SlideShare a Scribd company logo
1 of 114
Download to read offline
PROTOTYPING WITH
WEB TYPOGRAPHY
tweet @jamneely @typecastapp
JAMIE NEELY
TYPE FIRST
PROTOTYPING
PRACTICAL EXAMPLES
2009/2010
2009/2010With great power comes… (you know the rest)
8%
17%
May‘12 May‘13
Websites that use web fonts have
DOUBLED in the past year
Source: httparchive.com/trends
Sony USA homepage (set in ITC Avant Garde Gothic)
Microsoft worldwide homepage (set in Segoe UI)
“Into the Arctic”from Greenpeace (set in Brandon Grotesque and Rooney)
The World Wildlife Fund homepage (set in Open Sans and custom WWF font)
The World Wildlife Fund homepage (set in Open Sans and custom WWF font)The World Wildlife Fund
“Dadaab Stories”from Film Aid (set in Cubano and Nunito)
War Child
About.me web font options
TYPE FIRST
The shift
PROTOTYPING
In case you didn't get the memo,
wireframing is dead and prototypes
are the only way forward.
— Joshua Porter, hubspot
IDEO sketchnote From 99u Conference by C Todd Lombardo
HTML/CSS is real in a way
Photoshop will never be.
— Jason Fried, 37 Signals
Typography for the Web
is really hard to design anywhere
other than inside the browser.
— Viljami Salminen
CSS
p {
font-style: italic;
font-weight: 400;
font-family: MillerDisplay;
}
Working with web fonts is hard
Typecast	
  screencast
Typecast.com
Early demos of Typecast
Early demos of Typecast
Early demos of Typecast
PRACTICAL EXAMPLES
Type as brand
The reading experience
Cross-screen journeys
Type as brand
The reading experience
Cross-screen journeys
Type is the clothes that words wear.
— Steve Mattheson
A quote
Elevator pitch
Project brief
Word cloud
Hello world
SPECIMENS
Early typography prototyping in Typecast for Vogue.co.uk (courtesy of Kat Windley)
Early typography prototyping in Typecast for Vogue.co.uk (courtesy of Kat Windley)
A Typecast‘canvas’showing side-by-side type specimens
Early typography prototyping in Typecast for Vogue.co.uk (courtesy of Kat Windley)
The winning specimen, Brandon Grotesque and Caslon 224
Type as brand
The reading experience
Cross-screen journeys
Likable
Legible
Readable
Webfontspecimen.com from Tim Brown / Typekit
Helvetica (grey) vs Helvetica eText (red)
Likable
Legible
Readable
Lorum ipsum et stupid
Lists
Navigation schemes
Comment streams
Galleries
Mastheads & footers
GLOBAL CONTENT
A blog article
Home page
Mission statement
Author bio
An event description
UNIQUE CONTENT
Rendering & clarity
Family size & weight availability
Language support
OpenType support
File size & page weight
Accessibility & fall backs
PERFORMANCE
Type as brand
The reading experience
Cross-screen journeys
Smart phones
Not-so smart phones
Computers and tablets
E-readers
Cars
Fridges
Kiosks
Size of viewport
Screen density
Orientation
Aspect ratio
Rendering technology
DEVICE & TECHNOLOGY
Noise and distraction
Screen-to-eye distance
Light & illumination
Weight to hold
User disability
HUMAN & ENVIRONMENT
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Working with web fonts is hard
Invoices
Receipts
Forgot password
Marketing emails
Newsletters
Blank slates
Product updates
Service maintenance
Activity updates
TRANSACTIONAL, MARKETING & SERVICE EMAILS
Type as brand
Specimens, font choice
The reading experience
Global & unique content
Cross-screen journeys
Devices, locations & email
Working with web fonts is hard
Typography
QUESTIONS?
tweet @jamneely @typecastapp
JAMIE NEELY

More Related Content

Viewers also liked

Metaphors and its relevance in Communication
Metaphors and its relevance in CommunicationMetaphors and its relevance in Communication
Metaphors and its relevance in CommunicationJoao Ferraz
 
Digestive system
Digestive systemDigestive system
Digestive systemJeancelle
 
Splunk Fundamentals: Investigations with Core Splunk - Splunk Tech Day
Splunk Fundamentals: Investigations with Core Splunk - Splunk Tech DaySplunk Fundamentals: Investigations with Core Splunk - Splunk Tech Day
Splunk Fundamentals: Investigations with Core Splunk - Splunk Tech DayZivaro Inc
 
SDN Security: Two Sides of the Same Coin
SDN Security: Two Sides of the Same CoinSDN Security: Two Sides of the Same Coin
SDN Security: Two Sides of the Same CoinZivaro Inc
 

Viewers also liked (8)

Metaphors and its relevance in Communication
Metaphors and its relevance in CommunicationMetaphors and its relevance in Communication
Metaphors and its relevance in Communication
 
Tree test
Tree testTree test
Tree test
 
Digestive system
Digestive systemDigestive system
Digestive system
 
Edmodo
EdmodoEdmodo
Edmodo
 
Splunk Fundamentals: Investigations with Core Splunk - Splunk Tech Day
Splunk Fundamentals: Investigations with Core Splunk - Splunk Tech DaySplunk Fundamentals: Investigations with Core Splunk - Splunk Tech Day
Splunk Fundamentals: Investigations with Core Splunk - Splunk Tech Day
 
Vuvox
VuvoxVuvox
Vuvox
 
Mahara
MaharaMahara
Mahara
 
SDN Security: Two Sides of the Same Coin
SDN Security: Two Sides of the Same CoinSDN Security: Two Sides of the Same Coin
SDN Security: Two Sides of the Same Coin
 

Similar to After the Jump > Jamie Neely: Prototyping web typography.

Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicitymStoner, Inc.
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesDoug Gapinski
 
Cross Platform Development Strategies with vendor review and PhoneGap case study
Cross Platform Development Strategies with vendor review and PhoneGap case studyCross Platform Development Strategies with vendor review and PhoneGap case study
Cross Platform Development Strategies with vendor review and PhoneGap case studyElegant Technologies, LLC
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldmStoner, Inc.
 
ICT in the Senior School
ICT in the Senior SchoolICT in the Senior School
ICT in the Senior SchoolJacqui Sharp
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldDoug Gapinski
 
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13Enough Software
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop UsabilityDoug Gapinski
 
Multiple intelligences and Web2.0
Multiple intelligences and Web2.0Multiple intelligences and Web2.0
Multiple intelligences and Web2.0Jacqui Sharp
 
Where Design and Development Meet: Cross Platform Mobile Experiences
Where Design and Development Meet: Cross Platform Mobile Experiences Where Design and Development Meet: Cross Platform Mobile Experiences
Where Design and Development Meet: Cross Platform Mobile Experiences Seattle Interactive Conference
 
I Want It All (Educational Tools) for Free!
I Want It All (Educational Tools) for Free!I Want It All (Educational Tools) for Free!
I Want It All (Educational Tools) for Free!Jonathan Bacon
 
Accessible Design and Content in 20 Minutes
Accessible Design and Content in 20 MinutesAccessible Design and Content in 20 Minutes
Accessible Design and Content in 20 MinutesMarli Mesibov
 
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)JenRobbins
 
Accessibility for design system 19
Accessibility for design system 19Accessibility for design system 19
Accessibility for design system 19Paya Do
 
Presentation final
Presentation finalPresentation final
Presentation finalRoy Hibbert
 
Kineo Responsive Elearning
Kineo Responsive Elearning Kineo Responsive Elearning
Kineo Responsive Elearning Steve Rayson
 
Gormley mc dermott_how_to_incorporate_multiple_literacies_in_teaching_nysra_2011
Gormley mc dermott_how_to_incorporate_multiple_literacies_in_teaching_nysra_2011Gormley mc dermott_how_to_incorporate_multiple_literacies_in_teaching_nysra_2011
Gormley mc dermott_how_to_incorporate_multiple_literacies_in_teaching_nysra_2011Kay Gormley
 

Similar to After the Jump > Jamie Neely: Prototyping web typography. (20)

Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicity
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
 
Cross Platform Development Strategies with vendor review and PhoneGap case study
Cross Platform Development Strategies with vendor review and PhoneGap case studyCross Platform Development Strategies with vendor review and PhoneGap case study
Cross Platform Development Strategies with vendor review and PhoneGap case study
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
ICT in the Senior School
ICT in the Senior SchoolICT in the Senior School
ICT in the Senior School
 
Pages Session
Pages SessionPages Session
Pages Session
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13MTC Spring 2013 -  crossplatform woes - robert virkus - 2013-03-13
MTC Spring 2013 - crossplatform woes - robert virkus - 2013-03-13
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop Usability
 
Multiple intelligences and Web2.0
Multiple intelligences and Web2.0Multiple intelligences and Web2.0
Multiple intelligences and Web2.0
 
Where Design and Development Meet: Cross Platform Mobile Experiences
Where Design and Development Meet: Cross Platform Mobile Experiences Where Design and Development Meet: Cross Platform Mobile Experiences
Where Design and Development Meet: Cross Platform Mobile Experiences
 
I Want It All (Educational Tools) for Free!
I Want It All (Educational Tools) for Free!I Want It All (Educational Tools) for Free!
I Want It All (Educational Tools) for Free!
 
Online + reporting
Online + reportingOnline + reporting
Online + reporting
 
Responsive design for communicators
Responsive design for communicatorsResponsive design for communicators
Responsive design for communicators
 
Accessible Design and Content in 20 Minutes
Accessible Design and Content in 20 MinutesAccessible Design and Content in 20 Minutes
Accessible Design and Content in 20 Minutes
 
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
 
Accessibility for design system 19
Accessibility for design system 19Accessibility for design system 19
Accessibility for design system 19
 
Presentation final
Presentation finalPresentation final
Presentation final
 
Kineo Responsive Elearning
Kineo Responsive Elearning Kineo Responsive Elearning
Kineo Responsive Elearning
 
Gormley mc dermott_how_to_incorporate_multiple_literacies_in_teaching_nysra_2011
Gormley mc dermott_how_to_incorporate_multiple_literacies_in_teaching_nysra_2011Gormley mc dermott_how_to_incorporate_multiple_literacies_in_teaching_nysra_2011
Gormley mc dermott_how_to_incorporate_multiple_literacies_in_teaching_nysra_2011
 

Recently uploaded

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 

Recently uploaded (20)

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 

After the Jump > Jamie Neely: Prototyping web typography.