Web Fonts: Why Bother?

  • 4,284 views
Uploaded on

Originally presented by Greg Veen (@gregveen) at the Web 2.0 Expo in San Francisco on 29 March 2011.

Originally presented by Greg Veen (@gregveen) at the Web 2.0 Expo in San Francisco on 29 March 2011.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • jup! this hits the point
    Are you sure you want to
    Your message goes here
  • Awesome presentation, thanks for sharing.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,284
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
66
Comments
2
Likes
8

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • In the beginning, there were fonts.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • So, in came Typekit. \n+ Weren’t the first to get into the space. (Kearnest and Typeotech)\n+ a fully devoted team.\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
  • \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

Transcript

  • 1. Web Fonts: Why Bother?Greg Veen, 29 March 2011, Web 2.0 Expo, San Francisco
  • 2. Hello, I’m GregVeenWeb designer, developerNow: Co-founder,Before: Twitter, Google,Monster.com...
  • 3. @gregveen
  • 4. @gregveen#w2e #webfonts
  • 5. AgendaA web typography renaissanceHow did we get here?The value of web fontsChallenges, advancesQ&A
  • 6. AgendaA web typography renaissanceHow did we get here?The value of web fontsChallenges, advancesQ&A
  • 7. AgendaA web typography renaissanceHow did we get here?The value of web fontsChallenges, advancesQ&A
  • 8. 600 years of typography
  • 9. thousandsoffonts
  • 10. 1993:nofonts
  • 11. 2008:18fonts
  • 12. today: new browsers
  • 13. today: new browsers
  • 14. AgendaA web typography renaissanceHow did we get here?The value of web fontsChallenges, advancesQ&A
  • 15. formats
  • 16. OTF SVG WOFF EOT formats
  • 17. OTF/TTF SVG WOFF EOT IE9 IE9 IE5 FF3.5 FF3.5 FF3.6Chrome 4 Chrome 0.3 Chrome 5Safari 3.1 Safari 3.1Opera 10 Opera 9 iOS 4.2 iOS 1 2.2 browsers
  • 18. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}
  • 19. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}
  • 20. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}
  • 21. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}
  • 22. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}h1 { font-family: Awesome Font, Georgia, serif;}
  • 23. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}h1 { font-family: Awesome Font, Georgia, serif;}
  • 24. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}h1 { font-family: Awesome Font, Georgia, serif;}
  • 25. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}h1 { font-family: Awesome Font, Georgia, serif;}
  • 26. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}h1 { font-family: Awesome Font, Georgia, serif;}
  • 27. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}h1 { font-family: Awesome Font, Georgia, serif;}
  • 28. OTF/TTF SVG WOFF EOT IE9 IE9 IE5 FF3.5 FF3.5 FF3.6Chrome 4 Chrome 0.3 Chrome 5Safari 3.1 Safari 3.1Opera 10 Opera 9 iOS 1 2.2 browsers
  • 29. @font-face {  font-family: Awesome Font;  src: url(awesome-font.eot); /* IE 5-8 */  src: local(☺), /* sneaky trick for IE */       url(awesome-font.woff) format(woff), /* FF 3.6+, Chrome 5+, IE9 */       url(awesome-font.ttf) format(truetype), /* Opera, Safari, iOS4.2+ */       url(awesome-font.svg#font) format(svg); /* iOS <4.1 */}
  • 30. @font-face {  font-family: Awesome Font;  src: url(awesome-font.eot); /* IE 5-8 */  src: local(☺), /* sneaky trick for IE */       url(awesome-font.woff) format(woff), /* FF 3.6+, Chrome 5+, IE9 */       url(awesome-font.ttf) format(truetype), /* Opera, Safari, iOS4.2+ */       url(awesome-font.svg#font) format(svg); /* iOS <4.1 */}@media screen and (max-device-width: 480px) { @font-face { font-family: "Awesome Font"; src: url("awesome-font.woff") format("woff"), url("GraublauWeb.otf") format("opentype"), url("GraublauWeb.svg#grablau") format("svg");}}
  • 31. @font-face { font-family: Awesome Font; src: url(awesome-font.eot); /* IE9 Compat Modes */ src: url(awesome-font.eot?iefix) format(eot), /* IE6-IE8 */ url(awesome-font.woff) format(woff), /* Modern Browsers */ url(awesome-font.ttf) format(truetype), /* Safari, Android, iOS */ url(awesome-font.svg#svgFontName) format(svg); /* Legacy iOS */}
  • 32. <script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  • 33. rendering
  • 34. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • 35. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • 36. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • 37. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • 38. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • 39. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • 40. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • 41. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • 42. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • 43. TrueType and
  • 44. TrueType and
  • 45. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • 46. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • 47. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • 48. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • 49. Core Text
  • 50. Core TextDirectWrite
  • 51. GDI + Core Text ClearType
  • 52. Core TextGDI + Standard
  • 53. Core + no GDI Text
  • 54. WTF?!
  • 55. Flash ofunstyled text
  • 56. <script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script><style type="text/css"> .wf-loading { /* styles to use when web fonts are loading */ } .wf-active { /* styles to use when web fonts are active */ } .wf-inactive { /* styles to use when web fonts are inactive */ }</style>
  • 57. “Radical Web Typography”
  • 58. <h1 class="fancy_title">1962</h1>
  • 59. <h1 class="fancy_title"> <span class="char1">1</span> <span class="char2">9</span> <span class="char3">6</span> <span class="char4">2</span></h1>
  • 60. h1.fancy_title .char3,h1.fancy_title .char4 { position: relative; top: -10px;}
  • 61. <h1 class="fancy_title"> <span class="char1">1</span> <span class="char2">9</span> <span class="char3">7</span> <span class="char4">2</span></h1>
  • 62. <h1 class="fancy_title"> <span class="char1">1</span> <span class="char2">9</span> <span class="char3">7</span> <span class="char4">2</span></h1>
  • 63. <h1 class="fancy_title">1972</h1>
  • 64. Thank you!
  • 65. Questions?Comments?
  • 66. @gregveen