Best Practices for Incredible Web Typography

download Best Practices for Incredible Web Typography

of 32

  • date post

  • Category


  • view

  • download


Embed Size (px)



Transcript of Best Practices for Incredible Web Typography

  • 1. Best Practices forIncredibleWeb Typography Presented byJim Kidwell

2. Fonts andthe Web? 3. @font-face(our savior!) 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. ITS TIMEto get started 14. Selecting Fonts1. Where to find2. Design resources3. Readability4. Pairing 15. Where are the Web Fonts? Type Foundries Web Font Services 16. TechnologySelf-hostingWeb 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. SelectionP22 Cezanne Regular P22Antwerp Regular A2 Type 20. Its in the details Counter Opening Size X-height, Ascenders & Descenders Weight 21. Counter Opening SizeHelveticaArial Regular Adelle Sans Regular 22. CountersHelveticaArial Regular Adelle Sans Regular 23. x-height, ascenders, descendersCalluna Sans-RegularAnzeigen Grotesk D Regular 24. Weight CorbeauConPro-ThinBeton T Extra Bold 25. Line Length Print standard = 50-75 max character width New proposal = 90 characters max 26. Pairing Avoid pairing too similar faces Keep it in the family Pair Serif & Sans Serif 27. Making it PerfectAvoiding thePitfalls 28. Faux StylingAdobe Caslon Pro - Regular Faux italicized Adobe Caslon Pro - Regular Adobe Caslon Pro - Italic 29. Test across all browsers Font Rendering is OS dependent Use Adobe BrowserLab, Browsershots, etc. Windows is most finicky Test with the lowest quality expected 30. Licensing Read your font licenses Desktop font license Web font license 31. ResourcesWeb Font Best Practices - Resources resources/ Web Font Plug-in for Photoshop Font testing on live sites Connect on Twitter @extensis @webink @jimkidwell