1. Best Practices for
Incredible
Web Typography
Presented by
Jim Kidwell

2. Fonts and
the Web?

3. @font-face
(our savior!)

4. www.yebocreative.com

5. www.heartscryindia.org

6. www.englishworkshop.eu

7. futureofcarsharing.com

8. www.nerdery.com

9. www.blackestate.co.nz

10. www.webink.com

11. www.webink.com

12. www.webink.com

13. IT’S TIME
to get started

14. Selecting Fonts
1. Where to find
2. Design resources
3. Readability
4. Pairing

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

16. Technology
Self-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

17. Design Resources
• Desktop font available
• Plug-in for Photoshop

18. Readability
• Selection
• Size
• Line length

19. Selection
P22 Cezanne Regular – P22
Antwerp Regular – A2 Type

20. It’s in the details
• Counter Opening Size
• X-height, Ascenders & Descenders
• Weight

21. Counter Opening Size
Helvetica
Arial Regular
Adelle Sans Regular

22. Counters
Helvetica
Arial Regular
Adelle Sans Regular

23. x-height, ascenders, descenders
Calluna Sans-Regular
Anzeigen Grotesk D Regular

24. Weight
CorbeauConPro-Thin
Beton T Extra Bold

26. Line Length
• Print standard = 50-75 max character width
• New proposal = 90 characters max

27. Pairing
• Avoid pairing too similar faces
• Keep it in the family
• Pair Serif & Sans Serif
• fontfuse.webink.com

28. Making it Perfect
Avoiding the
Pitfalls

29. Faux Styling
Adobe Caslon Pro - Regular
Faux italicized Adobe Caslon Pro - Regular
Adobe Caslon Pro - Italic

30. Test across all browsers
• Font Rendering is OS dependent
• Use Adobe BrowserLab, Browsershots, etc.
• Windows is most finicky
• Test with the lowest quality expected

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

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