Your SlideShare is downloading. ×
0
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
The State of Web Type
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The State of Web Type

14,842

Published 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.

Published in: Design, Technology
6 Comments
50 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,842
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
361
Comments
6
Likes
50
Embeds 0
No embeds

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

×