Best Practices for Incredible Web Typography

Best Practices forIncredibleWeb Typography Presented by Jim Kidwell

Fonts andthe 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

IT’S TIMEto get started

Selecting Fonts1.  Where to find2.  Design resources3.  Readability4.  Pairing

Where are the Web Fonts?•  Type Foundries•  Web Font Services

TechnologySelf-hosting Web Font Services•  Fonts on your servers •  Service hosts fonts•  You code CSS variants •  Bit of code to your CSS•  You maintain fonts •  Service maintains fonts•  You test browser support •  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 PerfectAvoiding thePitfalls

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 finicky•  Test with the lowest quality expected

Licensing•  Read your font licenses•  Desktop font license ≠ Web font license

ResourcesWeb 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 Twitter •  @extensis •  @webink •  @jimkidwell

http://blog.webink.com	786
http://nextflow.in.th	91
http://chupipandiii.wikispaces.com	20
http://www.conseilsmarketing.com	10
http://pinterest.com	9
http://alisharosewebdesign.wordpress.com	8
https://twitter.com	6
http://twitter.com	3
http://translate.googleusercontent.com	2

Best Practices for Incredible Web Typography

by Extensis on Oct 26, 2012

Accessibility

Upload Details

Usage Rights

9 Embeds 935

Statistics

Best Practices for Incredible Web Typography Presentation Transcript