Your SlideShare is downloading. ×

Web Fonts: Why Bother?

4,469

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

Published in: Technology
2 Comments
8 Likes
Statistics
Notes
  • jup! this hits the point
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Awesome presentation, thanks for sharing.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,469
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
67
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

    ×