Intro to Webfonts

An introduction to the history of fonts on the web, and some considerations for working with webfonts today.

From a talk given on Jan 4, 2012 at the Winnipeg WordPress Meetup. The talk was (hopefully) more interesting than the slides. :)

Transcript

1. WEBFONTS
   

   View Slide

2. WEB FONTS
   

   View Slide

3. 1996
   ★ Microsoft gives CoreFonts to the web
   ★ Good: Verdana, Georgia
   ★ OK: Times New Roman, Arial, Trebuchet,
   Impact
   ★ Ugly: Comic Sans
   

   View Slide

4. 1997
   ★ Browser Wars.
   ★ IE: EOT
   ★ Netscape: TrueDoc
   ★ Nobody cares. Everybody just uses Arial.
   

   View Slide

5. 1997-2007
   ★ Crickets.
   ★ Embed type in images, use Core Fonts.
   ★ Foundries ostrich.
   

   View Slide

6. 2004
   ★ sIFR - a painful but useful attempt at using
   custom fonts.
   

   View Slide

7. 2007
   ★ Håkon Wium Lie writes "CSS @ Ten" for
   A List Apart.
   

   View Slide

8. 2008
   ★ Safari 3.1 allows native @font-face
   embedding of TTF/OTF font les.
   

   View Slide

9. 2009
   ★ Firefox 3.5 supports TTF/OTF @font-face
   embedding
   ★ People realize that IE still supports EOT.
   ★ FF + Safari + IE = most of the web.
   

   View Slide

10. 2009
    ★ Chrome 4 supports @font-face
    ★ Cufon debuts. Great hack, too late.
    ★ Foundries remove head from sand, help
    create WOFF
    ★ FF 3.6, Chrome 5, use WOFF
    

    View Slide

11. 2009
    ★ Typekit debuts
    ★ Font Squirrel generator debuts
    ★ I launch thatwasnotok.com
    

    View Slide

12. 2010
    ★ Bunch of Typekit clones pop up
    ★ Foundries roll their own
    ★ Serious exploration of x-platform
    rendering issues
    

    View Slide

13. 2011
    ★ IE9 released (much better type rendering)
    ★ Safari 5.1 nally has WOFF support
    ★ Typekit bought by Adobe
    

    View Slide

14. 2011
    @font-­‐face  {
     font-­‐family:  'MyWebFont';
     src:  url('webfont.eot');  /*  IE9  Compat  Modes  */
     src:  url('webfont.eot?#iefix')  format('embedded-­‐opentype'),  /*  IE6-­‐IE8  */
               url('webfont.woff')  format('woff'),  /*  Modern  Browsers  */
               url('webfont.ttf')    format('truetype'),  /*  Safari,  Android,  iOS  */
               url('webfont.svg#svgFontName')  format('svg');  /*  Legacy  iOS  */
    }
    /*
    http://www.fontspring.com/blog/further-­‐hardening-­‐of-­‐the-­‐bulletproof-­‐syntax
    */
    

    View Slide

15. 2012
    ?
    

    View Slide

16. Type Rendering
    ★ Windows & Windows & Mac, oh my
    

    View Slide

17. Type Rendering
    

    View Slide

18. Mac OS X
    

    View Slide

19. DirectWrite (Vista, Win 7)
    

    View Slide

20. GDI ClearType (XP)
    

    View Slide

21. GDI Standard (XP)
    

    View Slide

22. No Antialiasing
    

    View Slide

23. TrueType Hinting
    ★ Trying to make Windows suck less
    

    View Slide

24. TrueType Hinting
    

    View Slide

25. ttfautohint
    

    View Slide

26. Performance
    ★ All browsers handle @font-face differently
    ★ WebFont Loader lets you smooth them out
    

    View Slide

27. Best Practices
    ★ Always test font rendering in Win XP rst
    

    View Slide

28. Best Bets
    ★ Typekit (esp. Adobe and FontFont)
    ★ WebType RE fonts
    ★ ttfautohint
    ★ Running fonts through Font Squirrel
    generator
    ★ Headlines are always safer
    

    View Slide

29. Webfonts + WordPress
    ★ Best plugin I found for Google Web Fonts:
    http://wordpress.org/extend/plugins/
    google-web-fonts-for-wordpress/
    ★ WordPress.com has Typekit integration
    built in. ($30/year)
    ★ Custom is the best way to go if you can.
    

    View Slide

30. FontFriend
    http://somadesign.ca/projects/fontfriend/
    

    View Slide

31. Thanks!
    ★ http://blog.typekit.com/2010/10/15/type-rendering-operating-systems/
    ★ http://www.typotheque.com/articles/hinting
    ★ http://www.fontslive.com/info/typography/web-font-quality.aspx
    ★ http://www.lucasfonts.com/fonts/thesans/thesans-of ce/features/
    ★ http://cl.ly/9PBw
    ★ http://www.freetype.org/ttfautohint/
    ★ https://github.com/typekit/webfontloader
    

    View Slide