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

The State of Web Type

The State of Web Type

Presented to the Auckland Web Meetup, 20 May 2010.

Matthew Buchanan

May 20, 2010
Tweet

More Decks by Matthew Buchanan

Other Decks in Design

Transcript

  1. A seventh-grader writing a book report on Microsoft Word had

    more font choices than the person designing Esquire magazine’s website or the Ikea online catalog. —DEBORAH NETBURN, LOS ANGELES TIMES latimesblogs.latimes.com/home_blog/2010/05/the-changing-typography-of-the-web.html
  2. <h1>My Title</h1> h1 { background-image: url(title.png); text-indent: -999em; overflow: hidden;

    } the GOOD IMAGE REPLACEMENT the BAD Any typeface Consistent rendering Typographic control Widest support Not dynamic Inefficient Text selection Images-off issue
  3. <h1>My Title</h1> <script> if(typeof sIFR == "function") sIFR.replaceElement("h1", "font.swf"); </script>

    the GOOD FLASH REPLACEMENT the BAD Reasonably secure Consistent rendering Wide support Licensing Configuration Text selection Text scaling No Apple love
  4. <h1>My Title</h1> <script> Cufon.set("fontFamily", "League Gothic"); Cufon.replace("h1"); </script> the GOOD

    CANVAS / VML REPLACEMENT the BAD Reasonably secure Consistent rendering No plugins Wide support Works on iPhone OS Licensing Font conversion Configuration Screen readers FOUT
  5. @font-face { } FONT-FACE EMBEDDING First introduced in CSS2 recommendation

    Removed from CSS2.1 specification Implemented in IE4, September 1997 —Proprietary EOT format Now in Firefox 3.5, Safari 3.1, Opera 10, Chrome 4
  6. Being a web designer will soon require a deeper understanding

    of typography and how typefaces work. —JASON SANTA MARIA, A LIST APART 296 www.alistapart.com/articles/on-web-typography/
  7. @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.otf')

    format('opentype'); } the GOOD FONT-FACE EMBEDDING the BAD Real fonts on the web Web standards No plugins Licensing Rendering Security Page weight FOUT
  8. FONT-FACE FORMATS IE4+ Embedded OpenType (EOT) 60% Firefox 3.5 TrueType,

    OpenType 5.8% Firefox 3.6 TrueType, OpenType, WOFF 15.3% Opera 10 TrueType, OpenType 1.8% Chrome 4 TrueType, OpenType, SVG 5.5% Safari 3.1+ TrueType, OpenType, SVG 4% iPhone OS SVG total 92.4% Source: marketshare.hitslink.com/browser-market-share.aspx?qprid=2
  9. FONT-FACE LICENSING Typefaces are electronic files, like MP3s —Difficult to

    protect against piracy Problem: browsers linking to raw font files —Foundries want their hard work protected Foundries use EULAs to control embedding —Some specify SWF, Cufón licences, most just PDF Obfuscation —All formats vulnerable to being “unwrapped”
  10. FONT-FACE EFFECT Web designers talking/thinking about type Type foundries participating

    New techniques and formats —Paul Irish: “Bulletproof @font-face syntax” —Web Open File Format (WOFF) Hosted “middlemen” solutions No single, standard format (yet)
  11. There is the possibility that the middlemen, by increasing acceptance

    of web fonts, will hasten the arrival of a licensing standard— and that this will, in turn, prompt Microsoft to support @font-face for any licensed font. —JEFFREY ZELDMAN, GODFATHER OF WEB DESIGN www.zeldman.com/x/54
  12. NEW SERVICES Typotheque First foundry service, per-font fee Typekit Hosted

    subscription service, via JS+CSS FontSquirrel Library of free fonts, kit & file generators Kernest Free and paid subscription service FontFont Per-font fee, self-hosted or via Typekit Fonts.com Hosted service, free trial, via JS+CSS Fontdeck Private beta, CSS-only hosted solution Google Announced today, open-source library NEW!
  13. FREE FONTS Fertigo EXLJBRIS Calluna EXLJBRIS ChunkFive LEAGUE OF MOVEABLE

    TYPE League Gothic LEAGUE OF MOVEABLE TYPE Museo Sans EXLJBRIS Titillium ACCADEMIA DI BELLE ARTI URBINO Quicksand ANDREW PAGLINAWAN Goudy Bookletter BARRY SCHWARTZ
  14. IE FIREFOX 3.6 iPHONE OS SAFARI, CHROME, OPERA TTF/OTF WOFF

    EOT SVG SERVICE MIDDLEMEN CDN SECURITY LICENSING
  15. SECURITY Security through obfuscation —Edit “name” table, breaks desktop installation

    (typophile.com/node/70404) —Serve fonts as base64-encoded data URI —Cryptography —Referrer checking —Subsetting of glyphs —Use multiple files, recombine with font stack (skolar-1, skolar-2, etc.)
  16. the GOOD TYPEKIT the BAD Multi-platform Hosted Distributed Licensed Updated

    Secure Cost-effective Easy Point of failure Rendering Rent vs Buy Page weight
  17. @font-face { font-family: 'Egyptienne URW Extra Narrow Bold'; src: url('http://f.fontdeck.com/

    … .eot'); src: local('Egyptienne URW Extra Narrow Bold'), url('http://f.fontdeck.com/ … .woff') format('woff'), url('http://f.fontdeck.com/ … .ttf') format('opentype'); font-weight: bold; font-style: normal; } FONTDECK
  18. RENDERING Each OS platform implements own engine Quartz 2D in

    OS X is smooth, but adds weight Windows ClearType sharper, more jaggy Windows DirectWrite offers improvement Hinting & sub-pixel rendering can help
  19. Font hinting … uses tables of mathematical instructions to align

    letterforms to the pixel grid and to determine which pixels should be greyscaled. —THOMAS GIANNATTASIO, SMASHING MAG www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/
  20. HINTING Source: www.cooper.com/journal/ Same glyphs, but right has hinting applied

    Trading off legibility against integrity Painstaking process, hundreds of hours Tuning for specific rendering engines
  21. RENDERING: PILL GOTHIC IE7 XP Chrome VISTA IE7 XP IE7

    XP IE8 WIN 7 Safari OS X Source: www.typekit.com
  22. RENDERING: FF TISA Safari OS X IE8 VISTA IE7 XP

    IE7 XP IE7 XP Firefox WIN 7 Source: www.typekit.com
  23. <script src="http://ajax.googleapis.com/ ajax/libs/webfont/1/webfont.js"></script> <script> WebFont.load({ google: { families: ['Droid Sans']

    } }); </script> GOOGLE WEBFONTS Announced today, open-source webfonts library Launching with 18 fonts ready to use Teamed up with Typekit Typekit open sources its WebFont Loader NEW!
  24. Most font replacement techniques, including my own, were meant as

    stepping stones to @font-face. 2010 is going to be the year of @font-face. —SIMO KINNUNEN, CREATOR OF CUFÓN www.newsurl.net/in-depth-the-future-of-web-fonts/