The State of Web Type

Presented to the Auckland Web Meetup, 20 May 2010.

Transcript

1. WEB TYPE The State of Auckland Web Meetup ¶ 20 May 2010 ¶ Matthew Buchanan
2. 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
3. Source: www.flickr.com/photos/six_7_8/3854121575/
4. WHERE WERE WE?
5. BROWSER FONTS Verdana Arial Helvetica Lucida Tahoma Trebuchet Calibri sans SERIF SERIF Times Georgia Palatino Cambria
6. <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
7. <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
8. <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
9. WHAT’S NEW?
10. @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
11. 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/
12. @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
13. 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
14. 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”
15. BETTER HOW?
16. 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)
17. 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
18. 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!
19. 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
20. QUALITY CONTROL Strunk White s Strunk & White’s CHUNKFIVE FERTIGO
21. EXAMPLES Source: www.typotheque.com
22. EXAMPLES Source: sxsw.beercamp.com
23. EXAMPLES Source: www.typekit.com/gallery
24. EXAMPLES Source: www.typekit.com/gallery
25. IE FIREFOX 3.6 iPHONE OS SAFARI, CHROME, OPERA TTF/OTF WOFF EOT SVG SERVICE MIDDLEMEN CDN SECURITY LICENSING
26. 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.)
27. TYPEKIT
28. TYPEKIT
29. TYPEKIT
30. <h1 class="tk-skolar">My Title</h1> <script type="text/javascript" src="http://use.typekit.com/vzv4jhc.js"> </script> <script type="text/javascript"> try{ Typekit.load(); } catch(e){} </script> TYPEKIT
31. the GOOD TYPEKIT the BAD Multi-platform Hosted Distributed Licensed Updated Secure Cost-effective Easy Point of failure Rendering Rent vs Buy Page weight
32. FONTDECK
33. @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
34. LOOKS GOOD
35. 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
36. 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/
37. 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
38. RENDERING: PILL GOTHIC IE7 XP Chrome VISTA IE7 XP IE7 XP IE8 WIN 7 Safari OS X Source: www.typekit.com
39. RENDERING: PILL GOTHIC Source: www.typekit.com
40. RENDERING: FF TISA Safari OS X IE8 VISTA IE7 XP IE7 XP IE7 XP Firefox WIN 7 Source: www.typekit.com
41. IN USE
42. BIG NAMES
43. BIG NAMES
44. BIG NAMES
45. BIG NAMES
46. BIG NAMES
47. <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!
48. RESOURCES nicewebtype.com webtypography.net www.alistapart.com/issues/296 typekit.com fontsquirrel.com theleagueofmoveabletype.com typographica.org typophile.com/forum/ ilovetypography.com/2009/08/07/the-font-as-service/ code.google.com/webfonts
49. 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/
50. Matthew Buchanan matthewbuchanan.name www.cactuslab.com THANKS