Best Practices for Incredible Web Typography
description
Transcript of Best Practices for Incredible Web Typography
Presented by Jim Kidwell
Best Practices for Incredible Web Typography
Fonts and the Web?
@font-face (our savior!)
www.yebocreative.com
www.heartscryindia.org
www.englishworkshop.eu
futureofcarsharing.com
www.nerdery.com
www.blackestate.co.nz
www.webink.com
www.webink.com
www.webink.com
IT’S TIME to get started
Selecting Fonts
1. Where to "nd
2. Design resources
3. Readability
4. Pairing
Where are the Web Fonts?
• Type Foundries
• Web Font Services
Technology
Self-hosting • Fonts on your servers
• You code CSS variants
• You maintain fonts
• You test browser support
Web Font Services • Service hosts fonts
• Bit of code to your CSS
• Service maintains fonts
• Service tests browser updates
Design Resources
• Desktop font available
• Plug-in for Photoshop
Readability
• Selection
• Size
• Line length
Selection
P22 Cezanne Regular – P22
Antwerp Regular – A2 Type
It’s in the details
• Counter Opening Size
• X-height, Ascenders & Descenders
• Weight
Counter Opening Size
Helvetica
Arial Regular
Adelle Sans Regular
Counters Helvetica
Arial Regular
Adelle Sans Regular
x-height, ascenders, descenders
Calluna Sans-Regular
Anzeigen Grotesk D Regular
Weight
CorbeauConPro-Thin
Beton T Extra Bold
Line Length
• Print standard = 50-75 max character width
• New proposal = 90 characters max
Pairing
• Avoid pairing too similar faces
• Keep it in the family
• Pair Serif & Sans Serif
• fontfuse.webink.com
Making it Perfect Avoiding the Pitfalls
Faux Styling
Adobe Caslon Pro - Regular
Faux italicized Adobe Caslon Pro - Regular
Adobe Caslon Pro - Italic
Test across all browsers
• Font Rendering is OS dependent
• Use Adobe BrowserLab, Browsershots, etc.
• Windows is most "nicky
• Test with the lowest quality expected
Licensing
• Read your font licenses
• Desktop font license ≠ Web font license
Resources Web Font Best Practices - Resources
• blog.webink.com/web-typography-best-practices-resources/
Web Font Plug-in for Photoshop • webfontplugin.com
Font testing on live sites • www.webink.com/fontdropper
Connect on Twi$er • @extensis • @webink • @jimkidwell