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,306 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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,306
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
44
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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.

    ×