Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Webfonts

Matt Wiebe
January 05, 2012

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. :)

Matt Wiebe

January 05, 2012
Tweet

More Decks by Matt Wiebe

Other Decks in Design

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