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