SlideShare a Scribd company logo
1 of 62
Download to read offline
SARA CANNON HTTP://RAN.GE
Sara Cannon
Partner & Creative Director
at Range http://ran.ge
@saracannon
!
slideshare.net/saracannon
WEB DESIGN IS
95%
TYPOGRAPHY
- OLIVER REICHENSTEIN
NYTimes
CNN
CNN with MIN - min.artequalswork.com
Craigslist
Craigslist Redesign Concept by Lance Culbreth
Hyperlink
Button
hyperlink
BAD TYPOGRAPHY
=
BAD USER EXPERIENCE
Drudge Report
Drudge Report
Drudge Report
Huffington Post
Huffington Post
GOOD TYPOGRAPHY
=
GOOD USER EXPERIENCE
Medium
Medium
Medium
nautil.us
nautil.us
refinery29.com
AdAge
IN COMMUNICATION
THE ROLE OF TYPE IN
type
rsq.com
WhoaNellyCatering.com
Moon Camp
Moon Camp
Digital
Storytelling
nytimes.com/projects/2012/snow-fall
theguardian.com/world/interactive/2013/nov/01/
snowden-nsa-files-surveillance-revelations-decoded
pitchfork.com/features/articles/9467-wax-and-
wane-the-tough-realities-behind-vinyls-comeback
madebyfriends.co/drones
http://aquatilis.tv
http://aquatilis.tv
http://aquatilis.tv
IN NAVIGATION
THE ROLE OF TYPE IN
type
vox.com
Where’s the Menu?!
IN PREFORMING TASKS
THE ROLE OF TYPE IN
type
UserTesting.com
abookapart.com/products/on-web-typography
READABILITY

More Related Content

What's hot

What's hot (17)

Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
 
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
 
No Boring Content Allowed!
No Boring Content Allowed!No Boring Content Allowed!
No Boring Content Allowed!
 
Content amid Chaos - beyond tellerrand Dusseldorf 2015
Content amid Chaos - beyond tellerrand Dusseldorf 2015Content amid Chaos - beyond tellerrand Dusseldorf 2015
Content amid Chaos - beyond tellerrand Dusseldorf 2015
 
Hp Dos & Donts Online Marketing V0.2 Kw
Hp Dos & Donts Online Marketing V0.2 KwHp Dos & Donts Online Marketing V0.2 Kw
Hp Dos & Donts Online Marketing V0.2 Kw
 
Responsive Design Workflow
Responsive Design WorkflowResponsive Design Workflow
Responsive Design Workflow
 
Web 2.0 And Hype
Web 2.0 And HypeWeb 2.0 And Hype
Web 2.0 And Hype
 
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
Storytelling For Multi-device Design - Bulgaria Web Summit, 20 Feb 2016
 
Sculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the BrowserSculpting Text: Easing the Pain of Designing in the Browser
Sculpting Text: Easing the Pain of Designing in the Browser
 
Link building service
Link building serviceLink building service
Link building service
 
Paul Wallbank at Flying Solo's Independents' Day
Paul Wallbank at Flying Solo's Independents' DayPaul Wallbank at Flying Solo's Independents' Day
Paul Wallbank at Flying Solo's Independents' Day
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
Top SEO changes 2018-2019
Top SEO changes 2018-2019Top SEO changes 2018-2019
Top SEO changes 2018-2019
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Design
 
Young Tammy 4.4_ppp
Young Tammy 4.4_pppYoung Tammy 4.4_ppp
Young Tammy 4.4_ppp
 
The Quest for Awesome Mobile Landing Pages - SMX West 2013
The Quest for Awesome Mobile Landing Pages - SMX West 2013The Quest for Awesome Mobile Landing Pages - SMX West 2013
The Quest for Awesome Mobile Landing Pages - SMX West 2013
 

Viewers also liked

Viewers also liked (20)

Staying Connected: Securing Your WordPress Website
Staying Connected: Securing Your WordPress WebsiteStaying Connected: Securing Your WordPress Website
Staying Connected: Securing Your WordPress Website
 
SEO goes Local
SEO goes LocalSEO goes Local
SEO goes Local
 
Creating a Promo Video using Your iPad and Editing with iMovie for iPad
Creating a Promo Video using Your iPad and Editing with iMovie for iPadCreating a Promo Video using Your iPad and Editing with iMovie for iPad
Creating a Promo Video using Your iPad and Editing with iMovie for iPad
 
Resources and lessons for using WordPress in your business
Resources and lessons for using WordPress in your businessResources and lessons for using WordPress in your business
Resources and lessons for using WordPress in your business
 
WordCamp Birmingham 2014: SEO Workshop: Best Practices for Better Website Tra...
WordCamp Birmingham 2014: SEO Workshop: Best Practices for Better Website Tra...WordCamp Birmingham 2014: SEO Workshop: Best Practices for Better Website Tra...
WordCamp Birmingham 2014: SEO Workshop: Best Practices for Better Website Tra...
 
Empathetc Development
Empathetc DevelopmentEmpathetc Development
Empathetc Development
 
The Goldilocks Zone: Finding the Perfect Length for Blog Posts
The Goldilocks Zone: Finding the Perfect Length for Blog PostsThe Goldilocks Zone: Finding the Perfect Length for Blog Posts
The Goldilocks Zone: Finding the Perfect Length for Blog Posts
 
Building Accessible Websites in WordPress - Birmingham WordCamp 2014
Building Accessible Websites in WordPress - Birmingham WordCamp 2014Building Accessible Websites in WordPress - Birmingham WordCamp 2014
Building Accessible Websites in WordPress - Birmingham WordCamp 2014
 
Sanitizing, Validating and Escaping in WordPress Themes and Plugins
Sanitizing, Validating and Escaping in WordPress Themes and PluginsSanitizing, Validating and Escaping in WordPress Themes and Plugins
Sanitizing, Validating and Escaping in WordPress Themes and Plugins
 
WordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. LouisWordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. Louis
 
Design Strategy: How information Can Drive Your Designs Decisions To Success
Design Strategy: How information Can Drive Your Designs Decisions To SuccessDesign Strategy: How information Can Drive Your Designs Decisions To Success
Design Strategy: How information Can Drive Your Designs Decisions To Success
 
Smart Design
Smart Design Smart Design
Smart Design
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSF
 
Learning Through Stealing - How to Become Better At Your Craft
Learning Through Stealing - How to Become Better At Your CraftLearning Through Stealing - How to Become Better At Your Craft
Learning Through Stealing - How to Become Better At Your Craft
 
WordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonWordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp London
 
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
 
Exploring the design process #wcchi
Exploring the design process #wcchiExploring the design process #wcchi
Exploring the design process #wcchi
 
WordCamp Asheville 2015 - Connections
WordCamp Asheville 2015 - ConnectionsWordCamp Asheville 2015 - Connections
WordCamp Asheville 2015 - Connections
 
Why we publish -- WordCamp Birmingham 2014
Why we publish -- WordCamp Birmingham 2014Why we publish -- WordCamp Birmingham 2014
Why we publish -- WordCamp Birmingham 2014
 
Designing Type for User Interface
Designing Type for User InterfaceDesigning Type for User Interface
Designing Type for User Interface
 

More from Sara Cannon

Beyond the System Font - Advanced Web Typography
Beyond the System Font - Advanced Web TypographyBeyond the System Font - Advanced Web Typography
Beyond the System Font - Advanced Web Typography
Sara Cannon
 

More from Sara Cannon (19)

Open Source Creativity
Open Source CreativityOpen Source Creativity
Open Source Creativity
 
Sara cannon pushing the creative limit
Sara cannon   pushing the creative limitSara cannon   pushing the creative limit
Sara cannon pushing the creative limit
 
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
 
IconFonts
IconFontsIconFonts
IconFonts
 
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
 
Designer vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNDesigner vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORN
 
Designer vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPressDesigner vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPress
 
Designing for The Modern Web
Designing for The Modern WebDesigning for The Modern Web
Designing for The Modern Web
 
Font Swoon - Advanced Web Typography
Font Swoon - Advanced Web TypographyFont Swoon - Advanced Web Typography
Font Swoon - Advanced Web Typography
 
Design Swoon - Visual Trends & WordPress
Design Swoon - Visual Trends  & WordPressDesign Swoon - Visual Trends  & WordPress
Design Swoon - Visual Trends & WordPress
 
UI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
UI Design for Themes and Plugins by Chelsea Otakan & Sara CannonUI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
UI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
 
Typography on the Web
Typography on the WebTypography on the Web
Typography on the Web
 
Type in your WordPress Themes by Sara Cannon WordCamp NYC
Type in your WordPress Themes by Sara Cannon WordCamp NYCType in your WordPress Themes by Sara Cannon WordCamp NYC
Type in your WordPress Themes by Sara Cannon WordCamp NYC
 
Beyond the System Font - Advanced Web Typography
Beyond the System Font - Advanced Web TypographyBeyond the System Font - Advanced Web Typography
Beyond the System Font - Advanced Web Typography
 
Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010
Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010
Customizing WordPress Themes / Child Themes - WordCamp Savannah 2010
 
"Wordpress And Your Brand" 2010 - By Sara Cannon
"Wordpress And Your Brand" 2010 - By Sara Cannon"Wordpress And Your Brand" 2010 - By Sara Cannon
"Wordpress And Your Brand" 2010 - By Sara Cannon
 
Wordpress and Your Brand
Wordpress and Your BrandWordpress and Your Brand
Wordpress and Your Brand
 
Interactive Branding Web Type Tips.Key
Interactive Branding Web Type Tips.KeyInteractive Branding Web Type Tips.Key
Interactive Branding Web Type Tips.Key
 
Web Typography Tips
Web Typography TipsWeb Typography Tips
Web Typography Tips
 

Recently uploaded

Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Nitya salvi
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
balqisyamutia
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
eqaqen
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
gajnagarg
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
gajnagarg
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
CristineGraceAcuyan
 

Recently uploaded (20)

Hackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdfHackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdf
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
 
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
 
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
 
Eye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docxEye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docx
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service