Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Best Practices forIncredibleWeb Typography   Presented by  Jim Kidwell
Fonts andthe 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 TIMEto get started
Selecting Fonts1.  Where to find2.  Design resources3.  Readability4.  Pairing
Where are the Web Fonts?•    Type Foundries•    Web Font Services
TechnologySelf-hosting                  Web Font Services•  Fonts on your servers      •  Service hosts fonts•  You code C...
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                       Ade...
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 PerfectAvoiding thePitfalls
Faux Styling                        Adobe Caslon Pro - Regular           Faux italicized Adobe Caslon Pro - Regular       ...
Test across all browsers•  Font Rendering is OS dependent•  Use Adobe BrowserLab, Browsershots, etc.•  Windows is most fin...
Licensing•  Read your font licenses•  Desktop font license ≠ Web font license
ResourcesWeb Font Best Practices - Resources  •  blog.webink.com/web-typography-best-practices-     resources/ Web Font Pl...
Best Practices for Incredible Web Typography
Upcoming SlideShare
Loading in …5
×

Best Practices for Incredible Web Typography

6,665 views

Published on

  • Be the first to comment

Best Practices for Incredible Web Typography

  1. Best Practices forIncredibleWeb Typography Presented by Jim 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. IT’S 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-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
  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 Styling Adobe 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

×