Best Practices for Incredible Web Typography

download Best Practices for Incredible Web Typography

of 32

  • date post

    27-Jan-2015
  • Category

    Documents

  • view

    103
  • download

    0

Embed Size (px)

description

 

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. 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. 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 fontfuse.webink.com 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 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