Best Practices for Incredible Web Typography
5 likes3,515 views
This document provides best practices for using web typography, including selecting fonts, where to find web fonts, technology options for hosting fonts, design resources, considerations for readability, pairing fonts, avoiding pitfalls like faux styling, testing fonts across browsers, licensing, and resources for further information. It addresses topics like type foundries, web font services, self-hosting versus hosted services, desktop font availability, Photoshop plugins, factors that impact readability, pairing similar versus contrasting font families, techniques for achieving perfect results, and ensuring compatibility by thorough browser testing.
Best Practices for Incredible Web Typography
- 1. Best Practices for Incredible Web Typography Presented by Jim Kidwell
- 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