The State of Web Type
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

The State of Web Type

  • 15,350 views
Uploaded on

Presentation delivered to the Auckland Web Meetup on 20 May 2010, regarding the use of type on the web, its history and the new techniques and services that are emerging in this space.

Presentation delivered to the Auckland Web Meetup on 20 May 2010, regarding the use of type on the web, its history and the new techniques and services that are emerging in this space.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
15,350
On Slideshare
13,251
From Embeds
2,099
Number of Embeds
30

Actions

Shares
Downloads
355
Comments
6
Likes
50

Embeds 2,099

http://fontvilla.wordpress.com 835
http://www.slideshare.net 651
http://folksonomy.co 256
http://paolovalzania.wordpress.com 87
http://blog.quietnotsafe.org 60
http://paolovalzania.posterous.com 59
http://www.actionvillain.com 24
http://picturesandtype.tumblr.com 19
http://picturesandtype.tumblr.com 19
https://fontvilla.wordpress.com 14
http://dvplus.tumblr.com 12
http://www.minnix.info 9
http://bzickmun.wordpress.com 8
http://paolovalzania.blogspot.com 6
http://paolovalzania.blogspot.it 5
http://www.folksonomy.co 5
http://chrisrutz.de 5
http://www.linkedin.com 4
http://awesomepitch.co 3
http://posterous.com 3
http://translate.googleusercontent.com 3
http://feeds.feedburner.com 2
http://blog.openmba.education 2
http://facebook.slideshare.com 2
http://minnix.info 1
url_unknown 1
http://www.tumblr.com 1
http://www.pinterest.com 1
http://static.slidesharecdn.com 1
http://cache.baidu.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. The State of WEB TYPE 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. —D EBO RA H N ET BURN, LO S AN GE LE S TI ME S 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 sans Helvetica SERIF Lucida Tahoma Trebuchet Calibri Times Georgia SERIF Palatino Cambria
  • 6. IMAGE REPLACEMENT <h1>My Title</h1> h1 { background-image: url(title.png); text-indent: -999em; overflow: hidden; } Any typeface Not dynamic the the GOOD Consistent rendering Typographic control BAD Inefficient Text selection Widest support Images-off issue
  • 7. FLASH REPLACEMENT <h1>My Title</h1> <script> if(typeof sIFR == "function") sIFR.replaceElement("h1", "font.swf"); </script> Reasonably secure Licensing the the GOOD Consistent rendering Wide support BAD Configuration Text selection Text scaling No Apple love
  • 8. CANVAS / VML REPLACEMENT <h1>My Title</h1> <script> Cufon.set("fontFamily", "League Gothic"); Cufon.replace("h1"); </script> Reasonably secure Licensing the the GOOD Consistent rendering No plugins BAD Font conversion Configuration Wide support Screen readers Works on iPhone OS FOUT
  • 9. WHAT’S NEW?
  • 10. FONT-FACE EMBEDDING @font-face { } 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. — JA SO N SAN TA M A RI A, A LIST APART 296 www.alistapart.com/articles/on-web-typography/
  • 12. FONT-FACE EMBEDDING @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.otf') format('opentype'); } Real fonts on the web Licensing the the GOOD Web standards No plugins BAD Rendering Security Page weight FOUT
  • 13. FONT-FACE FORMATS IE4+ Embedded OpenType (EOT) 60% Source: marketshare.hitslink.com/browser-market-share.aspx?qprid=2 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%
  • 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. — JE F FR EY Z EL D M A N, G ODFAT HE R OF WE B DE SI GN 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 NEW! Announced today, open-source library
  • 19. OPEN-SOURCE FONTS Titillium League Gothic AC CAD EM IA DI BE LLE ARTI U RBINO LEAG UE OF MOVEABLE TYPE Fertigo Museo Sans E XLJ BRIS EXLJ BR IS Calluna ChunkFive E XLJ BRIS LEAG UE OF MOVEABLE TYPE Quicksand Goudy Bookletter A ND RE W PAGL INAWA N BAR R Y SCH WARTZ
  • 20. QUALITY CONTROL Strunk & White’s FE RTIG O Strunk White s CHU NKFIVE
  • 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. MIDDLEMEN IE EOT SAFARI, CHROME, TTF/OTF OPERA SECURITY SERVICE LICENSING CDN WOFF FIREFOX 3.6 SVG iPHONE OS
  • 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. TYPEKIT <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>
  • 31. TYPEKIT Multi-platform Hosted Distributed Point of failure the Licensed the Rendering GOOD Updated BAD Rent vs Buy Secure Page weight Cost-effective Easy
  • 32. FONTDECK
  • 33. FONTDECK @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; }
  • 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. —TH OM AS GIANNAT TA SI O, S MA SH I N G MAG www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/
  • 37. HINTING Same glyphs, but right has hinting applied Source: www.cooper.com/journal/ Trading off legibility against integrity Painstaking process, hundreds of hours Tuning for specific rendering engines
  • 38. RENDERING: PILL GOTHIC Safari OS X IE8 WIN 7 IE7 XP Source: www.typekit.com Chrome IE7 VISTA XP
  • 39. RENDERING: PILL GOTHIC Source: www.typekit.com
  • 40. RENDERING: FF TISA Safari OS X IE8 VISTA IE7 XP Source: www.typekit.com Firefox IE7 WIN 7 XP
  • 41. IN USE
  • 42. BIG NAMES
  • 43. BIG NAMES
  • 44. BIG NAMES
  • 45. BIG NAMES
  • 46. BIG NAMES
  • 47. NEW! 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 <script src="http://ajax.googleapis.com/ ajax/libs/webfont/1/webfont.js"></script> <script> WebFont.load({ google: { families: ['Droid Sans'] } }); </script>
  • 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. —S IM O K I NN UN EN, C RE ATO R OF CU FÓN www.newsurl.net/in-depth-the-future-of-web-fonts/
  • 50. THANKS Matthew Buchanan matthewbuchanan.name www.cactuslab.com