Web Fonts: Why      Bother?Greg Veen, 29 March 2011, Web 2.0 Expo, San                 Francisco
Hello, I’m GregVeenWeb designer, developerNow: Co-founder,Before: Twitter, Google,Monster.com...
@gregveen
@gregveen#w2e #webfonts
AgendaA web typography renaissanceHow did we get here?The value of web fontsChallenges, advancesQ&A
AgendaA web typography renaissanceHow did we get here?The value of web fontsChallenges, advancesQ&A
AgendaA web typography renaissanceHow did we get here?The value of web fontsChallenges, advancesQ&A
600 years of typography
thousandsoffonts
1993:nofonts
2008:18fonts
today: new browsers
today: new browsers
AgendaA web typography renaissanceHow did we get here?The value of web fontsChallenges, advancesQ&A
formats
OTF SVG WOFF EOT          formats
OTF/TTF        SVG        WOFF    EOT   IE9                     IE9    IE5  FF3.5        FF3.5      FF3.6Chrome 4 Chrome 0...
@font-face {  font-family: Awesome Font;  src: url(awesome-font.ttf);}
@font-face {  font-family: Awesome Font;  src: url(awesome-font.ttf);}
@font-face {  font-family: Awesome Font;  src: url(awesome-font.ttf);}
@font-face {  font-family: Awesome Font;  src: url(awesome-font.ttf);}
@font-face {  font-family: Awesome Font;  src: url(awesome-font.ttf);}h1 {  font-family: Awesome Font,  Georgia, serif;}
@font-face {  font-family: Awesome Font;  src: url(awesome-font.ttf);}h1 {  font-family: Awesome Font,  Georgia, serif;}
@font-face {  font-family: Awesome Font;  src: url(awesome-font.ttf);}h1 {  font-family: Awesome Font,  Georgia, serif;}
@font-face {  font-family: Awesome Font;  src: url(awesome-font.ttf);}h1 {  font-family: Awesome Font,  Georgia, serif;}
@font-face {  font-family: Awesome Font;  src: url(awesome-font.ttf);}h1 {  font-family: Awesome Font,  Georgia, serif;}
@font-face {  font-family: Awesome Font;  src: url(awesome-font.ttf);}h1 {  font-family: Awesome Font,  Georgia, serif;}
OTF/TTF        SVG        WOFF    EOT   IE9                     IE9    IE5  FF3.5        FF3.5      FF3.6Chrome 4 Chrome 0...
@font-face {  font-family: Awesome Font;  src: url(awesome-font.eot); /* IE 5-8 */  src: local(☺), /* sneaky trick for IE ...
@font-face {  font-family: Awesome Font;  src: url(awesome-font.eot); /* IE 5-8 */  src: local(☺), /* sneaky trick for IE ...
@font-face {  font-family: Awesome Font;  src: url(awesome-font.eot); /* IE9 Compat Modes */  src: url(awesome-font.eot?ie...
<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script><script type="text/javascript">try{Typekit...
rendering
Rendering factors1)   type design philosophy2)   font file and outline format3)   hinting4)   operating systems5)   web bro...
Rendering factors1)   type design philosophy2)   font file and outline format3)   hinting4)   operating systems5)   web bro...
Rendering factors1)   type design philosophy2)   font file and outline format3)   hinting4)   operating systems5)   web bro...
Rendering factors1)   type design philosophy2)   font file and outline format3)   hinting4)   operating systems5)   web bro...
Rendering factors1)   type design philosophy2)   font file and outline format3)   hinting4)   operating systems5)   web bro...
Rendering factors1)   type design philosophy2)   font file and outline format3)   hinting4)   operating systems5)   web bro...
Rendering factors1)   type design philosophy2)   font file and outline format3)   hinting4)   operating systems5)   web bro...
Rendering factors1)   type design philosophy2)   font file and outline format3)   hinting4)   operating systems5)   web bro...
Rendering factors1)   type design philosophy2)   font file and outline format3)   hinting4)   operating systems5)   web bro...
TrueType and
TrueType and
Rendering factors1)   type design philosophy2)   font file and outline format3)   hinting4)   operating systems5)   web bro...
Rendering factors1)   type design philosophy2)   font file and outline format3)   hinting4)   operating systems5)   web bro...
Rendering factors1)   type design philosophy2)   font file and outline format3)   hinting4)   operating systems5)   web bro...
Rendering factors1)   type design philosophy2)   font file and outline format3)   hinting4)   operating systems5)   web bro...
Core Text
Core TextDirectWrite
GDI + Core Text      ClearType
Core TextGDI + Standard
Core + no GDI Text
WTF?!
Flash ofunstyled text
<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script><script type="text/javascript">try{Typekit...
“Radical Web Typography”
<h1 class="fancy_title">1962</h1>
<h1 class="fancy_title">  <span class="char1">1</span>  <span class="char2">9</span>  <span class="char3">6</span>  <span ...
h1.fancy_title .char3,h1.fancy_title .char4 {  position: relative;  top: -10px;}
<h1 class="fancy_title">  <span class="char1">1</span>  <span class="char2">9</span>  <span class="char3">7</span>  <span ...
<h1 class="fancy_title">  <span class="char1">1</span>  <span class="char2">9</span>  <span class="char3">7</span>  <span ...
<h1 class="fancy_title">1972</h1>
Thank you!
Questions?Comments?
@gregveen
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Web Fonts: Why Bother?
Upcoming SlideShare
Loading in...5
×

Web Fonts: Why Bother?

4,590

Published on

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,590
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
67
Comments
2
Likes
8
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
  • In the beginning, there were fonts.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • So, in came Typekit. \n+ Weren&amp;#x2019;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
  • Web Fonts: Why Bother?

    1. 1. Web Fonts: Why Bother?Greg Veen, 29 March 2011, Web 2.0 Expo, San Francisco
    2. 2. Hello, I’m GregVeenWeb designer, developerNow: Co-founder,Before: Twitter, Google,Monster.com...
    3. 3. @gregveen
    4. 4. @gregveen#w2e #webfonts
    5. 5. AgendaA web typography renaissanceHow did we get here?The value of web fontsChallenges, advancesQ&A
    6. 6. AgendaA web typography renaissanceHow did we get here?The value of web fontsChallenges, advancesQ&A
    7. 7. AgendaA web typography renaissanceHow did we get here?The value of web fontsChallenges, advancesQ&A
    8. 8. 600 years of typography
    9. 9. thousandsoffonts
    10. 10. 1993:nofonts
    11. 11. 2008:18fonts
    12. 12. today: new browsers
    13. 13. today: new browsers
    14. 14. AgendaA web typography renaissanceHow did we get here?The value of web fontsChallenges, advancesQ&A
    15. 15. formats
    16. 16. OTF SVG WOFF EOT formats
    17. 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. 18. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}
    19. 19. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}
    20. 20. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}
    21. 21. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}
    22. 22. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}h1 { font-family: Awesome Font, Georgia, serif;}
    23. 23. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}h1 { font-family: Awesome Font, Georgia, serif;}
    24. 24. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}h1 { font-family: Awesome Font, Georgia, serif;}
    25. 25. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}h1 { font-family: Awesome Font, Georgia, serif;}
    26. 26. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}h1 { font-family: Awesome Font, Georgia, serif;}
    27. 27. @font-face { font-family: Awesome Font; src: url(awesome-font.ttf);}h1 { font-family: Awesome Font, Georgia, serif;}
    28. 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. 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. 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. 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. 32. <script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    33. 33. rendering
    34. 34. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
    35. 35. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
    36. 36. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
    37. 37. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
    38. 38. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
    39. 39. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
    40. 40. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
    41. 41. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
    42. 42. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
    43. 43. TrueType and
    44. 44. TrueType and
    45. 45. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
    46. 46. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
    47. 47. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
    48. 48. Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
    49. 49. Core Text
    50. 50. Core TextDirectWrite
    51. 51. GDI + Core Text ClearType
    52. 52. Core TextGDI + Standard
    53. 53. Core + no GDI Text
    54. 54. WTF?!
    55. 55. Flash ofunstyled text
    56. 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. 57. “Radical Web Typography”
    58. 58. <h1 class="fancy_title">1962</h1>
    59. 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. 60. h1.fancy_title .char3,h1.fancy_title .char4 { position: relative; top: -10px;}
    61. 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. 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. 63. <h1 class="fancy_title">1972</h1>
    64. 64. Thank you!
    65. 65. Questions?Comments?
    66. 66. @gregveen
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×