The state of webtypographyDesigning in the @font-face of dangerFebruary 5, 2011Aaron StanushCo-founder and designer
A little bit of historyMmm... @font-face since ’97
Web font formats
Web font formats‣   Embedded OpenType (EOT)    ‣   TrueType + DRM    ‣   Created by Microsoft
Web font formats‣   Embedded OpenType (EOT)    ‣   TrueType + DRM    ‣   Created by Microsoft‣   TrueType (TTF)    ‣   Sta...
Web font formats‣   Embedded OpenType (EOT)    ‣   TrueType + DRM    ‣   Created by Microsoft‣   TrueType (TTF)    ‣   Sta...
Web font formats‣   Embedded OpenType (EOT)       ‣   SVG    ‣   TrueType + DRM                ‣   Not a font format    ‣ ...
Web font formats‣   Embedded OpenType (EOT)       ‣   SVG    ‣   TrueType + DRM                ‣   Not a font format    ‣ ...
It only took a decade
It only took a decade‣   1997: CSS2 introduces @font-face
It only took a decade‣   1997: CSS2 introduces @font-face    ‣   IE4 supports @font-face but only EOT
It only took a decade‣   1997: CSS2 introduces @font-face    ‣   IE4 supports @font-face but only EOT‣   2008: Safari 3.1 ...
It only took a decade‣   1997: CSS2 introduces @font-face    ‣   IE4 supports @font-face but only EOT‣   2008: Safari 3.1 ...
It only took a decade‣   1997: CSS2 introduces @font-face    ‣   IE4 supports @font-face but only EOT‣   2008: Safari 3.1 ...
It only took a decade‣   1997: CSS2 introduces @font-face    ‣   IE4 supports @font-face but only EOT‣   2008: Safari 3.1 ...
It only took a decade‣   1997: CSS2 introduces @font-face    ‣   IE4 supports @font-face but only EOT‣   2008: Safari 3.1 ...
Before
Before‣   sIFR    ‣   Flash    ‣   Liked by foundries
Before‣   sIFR    ‣   Flash    ‣   Liked by foundries‣   Cufón    ‣   Javascript/JSON    ‣   Lightweight, not widely trust...
Now: Just CSS@font-face {  font-family: Gotham;  src: url(gotham.ttf);  }
Then‣ Arial            ‣ Times‣ Georgia          ‣ Palatino‣ Trebuchet   MS   ‣ Geneva‣ Verdana          ‣ Courier    New‣...
Nowlostworldsfairs.com/moon
Getting the fonts
Commerical, licensed
Commerical, licensed‣   Foundries    ‣   Hoefler Frere Jones, FontFont, House Industries,        EmType, etc.
Commerical, licensed‣   Foundries    ‣   Hoefler Frere Jones, FontFont, House Industries,        EmType, etc.‣   Font store...
Web font licensing It’s complicated. Every foundry has their own rules.webfonts.info/wiki/index.php?title=Web_fonts_licens...
Free and open source
Upcoming SlideShare
Loading in …5
×

The state of web typography

4,309 views

Published on

In the beginning, web designers only had a handful of typefaces at their disposal to use in their designs. Then Flash and Javascript allowed unlimited fonts but lacked accessibility features. In the past year, it seems we finally have a winning solution: the @font-face method which has support from all major browsers and does so using only HTML and CSS.

Meanwhile, a second conversation is happening amongst those who actually own the fonts – the foundries. Would these emerging technologies ensure that their typefaces could not be easily copied from the web? Unfortunately @font-face is still not widely accepted by most foundries. Some allow you to use a hosted service like TypeKit, or you can venture into the burgeoning movement of open source and commercial-free fonts and enjoy free rein over your web typography.

Published in: Design, Technology, Art & Photos
  • Be the first to comment

The state of web typography

  1. 1. The state of webtypographyDesigning in the @font-face of dangerFebruary 5, 2011Aaron StanushCo-founder and designer
  2. 2. A little bit of historyMmm... @font-face since ’97
  3. 3. Web font formats
  4. 4. Web font formats‣ Embedded OpenType (EOT) ‣ TrueType + DRM ‣ Created by Microsoft
  5. 5. Web font formats‣ Embedded OpenType (EOT) ‣ TrueType + DRM ‣ Created by Microsoft‣ TrueType (TTF) ‣ Standard desktop format
  6. 6. Web font formats‣ Embedded OpenType (EOT) ‣ TrueType + DRM ‣ Created by Microsoft‣ TrueType (TTF) ‣ Standard desktop format‣ OpenType (OTF) ‣ TrueType 2.0
  7. 7. Web font formats‣ Embedded OpenType (EOT) ‣ SVG ‣ TrueType + DRM ‣ Not a font format ‣ Created by Microsoft ‣ Used for iOS‣ TrueType (TTF) ‣ Standard desktop format‣ OpenType (OTF) ‣ TrueType 2.0
  8. 8. Web font formats‣ Embedded OpenType (EOT) ‣ SVG ‣ TrueType + DRM ‣ Not a font format ‣ Created by Microsoft ‣ Used for iOS‣ TrueType (TTF) ‣ Web Open Font Format (WOFF) ‣ Standard desktop format ‣ W3C standard‣ OpenType (OTF) ‣ Small, contains ‣ TrueType 2.0 ownership data
  9. 9. It only took a decade
  10. 10. It only took a decade‣ 1997: CSS2 introduces @font-face
  11. 11. It only took a decade‣ 1997: CSS2 introduces @font-face ‣ IE4 supports @font-face but only EOT
  12. 12. It only took a decade‣ 1997: CSS2 introduces @font-face ‣ IE4 supports @font-face but only EOT‣ 2008: Safari 3.1 supports @font-face
  13. 13. It only took a decade‣ 1997: CSS2 introduces @font-face ‣ IE4 supports @font-face but only EOT‣ 2008: Safari 3.1 supports @font-face‣ 2009: Firefox 3.5 supports @font-face
  14. 14. It only took a decade‣ 1997: CSS2 introduces @font-face ‣ IE4 supports @font-face but only EOT‣ 2008: Safari 3.1 supports @font-face‣ 2009: Firefox 3.5 supports @font-face‣ 2010: Chrome 4 supports @font-face
  15. 15. It only took a decade‣ 1997: CSS2 introduces @font-face ‣ IE4 supports @font-face but only EOT‣ 2008: Safari 3.1 supports @font-face‣ 2009: Firefox 3.5 supports @font-face‣ 2010: Chrome 4 supports @font-face ‣ Firefox 3.6, Chrome 6, IE9 support WOFF
  16. 16. It only took a decade‣ 1997: CSS2 introduces @font-face ‣ IE4 supports @font-face but only EOT‣ 2008: Safari 3.1 supports @font-face‣ 2009: Firefox 3.5 supports @font-face‣ 2010: Chrome 4 supports @font-face ‣ Firefox 3.6, Chrome 6, IE9 support WOFF ‣ W3C publishes working draft for WOFF
  17. 17. Before
  18. 18. Before‣ sIFR ‣ Flash ‣ Liked by foundries
  19. 19. Before‣ sIFR ‣ Flash ‣ Liked by foundries‣ Cufón ‣ Javascript/JSON ‣ Lightweight, not widely trusted for licensing
  20. 20. Now: Just CSS@font-face { font-family: Gotham; src: url(gotham.ttf); }
  21. 21. Then‣ Arial ‣ Times‣ Georgia ‣ Palatino‣ Trebuchet MS ‣ Geneva‣ Verdana ‣ Courier New‣ Impact ‣ Comic Sans
  22. 22. Nowlostworldsfairs.com/moon
  23. 23. Getting the fonts
  24. 24. Commerical, licensed
  25. 25. Commerical, licensed‣ Foundries ‣ Hoefler Frere Jones, FontFont, House Industries, EmType, etc.
  26. 26. Commerical, licensed‣ Foundries ‣ Hoefler Frere Jones, FontFont, House Industries, EmType, etc.‣ Font stores ‣ FontShop.com ‣ MyFonts.com
  27. 27. Web font licensing It’s complicated. Every foundry has their own rules.webfonts.info/wiki/index.php?title=Web_fonts_licensing_overview
  28. 28. Free and open source
  29. 29. Free and open source‣ Font Squirrel ‣ fontsquirrel.com‣ Google Web Fonts ‣ code.google.com/webfonts‣ League of Movable Type ‣ theleagueofmovabletype.com
  30. 30. SIL Open font license ‣ http://scripts.sil.org/OFL“ It means that youre allowed to use these fonts personally or commercially, as long as you credit the original creator, and if you made tweaks and changes to the typefaces, any new typefaces resulting from it should be licensed under the same terms. That way all our fonts and any new fonts resulting from them will always be open.theleagueofmoveabletype.com/manifesto
  31. 31. Browser supportBecause one font formatwould be too easy
  32. 32. Web font formats
  33. 33. Web font formats‣ Embedded OpenType (EOT) ‣ TrueType + DRM ‣ Created by Microsoft
  34. 34. Web font formats‣ Embedded OpenType (EOT) ‣ TrueType + DRM ‣ Created by Microsoft‣ TrueType (TTF) ‣ Standard desktop format
  35. 35. Web font formats‣ Embedded OpenType (EOT) ‣ TrueType + DRM ‣ Created by Microsoft‣ TrueType (TTF) ‣ Standard desktop format‣ OpenType (OTF) ‣ TrueType 2.0
  36. 36. Web font formats‣ Embedded OpenType (EOT) ‣ SVG ‣ TrueType + DRM ‣ Not a font format ‣ Created by Microsoft ‣ Used for iOS‣ TrueType (TTF) ‣ Standard desktop format‣ OpenType (OTF) ‣ TrueType 2.0
  37. 37. Web font formats‣ Embedded OpenType (EOT) ‣ SVG ‣ TrueType + DRM ‣ Not a font format ‣ Created by Microsoft ‣ Used for iOS‣ TrueType (TTF) ‣ Web Open Font Format (WOFF) ‣ Standard desktop format ‣ W3C standard‣ OpenType (OTF) ‣ Small, contains ‣ TrueType 2.0 ownership data
  38. 38. Browser support Firefox 3.6+ Chrome 6+ IE9 Safari 5 iOS 4.2 EOT • TTF • • • • OTF • • • • SVG • • WOFF • •webfonts.info/wiki/index.php?title=@font-face_browser_support
  39. 39. @font-face kits‣ Contains: ‣ EOT, WOFF, TTF, SVG, Cufon, HTML, CSS‣ Pre-built kits ‣ fontsquirrel.com/fontface‣ Build your own ‣ fontsquirrel.com/fontface/generator
  40. 40. The bulletproof@font-face syntaxA moving target
  41. 41. The basics@font-face { font-family: Gotham; src: url(gotham.ttf); }
  42. 42. The Bulletproof way @font-face { font-family: Gotham; src: url(gotham.eot); src: local(☺), url(gotham.woff) format(woff), url(gotham.ttf) format(truetype); }paulirish.com/2009/bulletproof-font-face-implementation-syntax
  43. 43. Mo’ bulletproofer @font-face { font-family: Gotham; src: url(‘gotham.eot’); } @font-face { font-family: Gotham Rounded; src: url(//:) format(“No404”), url(‘gotham.ttf’) format (“truetype”); }readableweb.com/mo-bulletproofer-font-face-css-syntax
  44. 44. The new bulletproof @font-face { font-family: Gotham; src: url(gotham.eot?) format(eot), url(gotham.woff) format(woff), url(gotham.ttf) format(truetype), url(gotham.svg#gotham) format(svg); }fontspring.com/blog/the-new-bulletproof-font-face-syntax
  45. 45. Font hosting servicesThe easy way out
  46. 46. Font hosting
  47. 47. Font hosting‣ Pros ‣ Large selection of high-quality fonts ‣ Very little coding ‣ No worrying about licensing ‣ No expensive font purchases
  48. 48. Font hosting‣ Pros ‣ Large selection of high-quality fonts ‣ Very little coding ‣ No worrying about licensing ‣ No expensive font purchases‣ Cons ‣ Not free – pay by pageviews or per font
  49. 49. Font hosting services‣ Paid ‣ Typekit.com ‣ Free ‣ Fontdeck.com ‣ code.google.com/ webfonts ‣ webfonts.fonts.com ‣ typotheque.com ‣ Kernest.com
  50. 50. lostworldsfairs.com
  51. 51. All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2009 Four Kitchen Studios, LLC.

×