Web Fonts: Why Bother?
Upcoming SlideShare
Loading in...5
×
 

Web Fonts: Why Bother?

on

  • 4,528 views

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.

Statistics

Views

Total Views
4,528
Views on SlideShare
4,508
Embed Views
20

Actions

Likes
8
Downloads
64
Comments
2

7 Embeds 20

http://lanyrd.com 10
http://geeksenavion.posterous.com 4
http://paper.li 2
http://www.onlydoo.com 1
http://www.mongodb.org 1
http://twitter.com 1
http://drizzlin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • jup! this hits the point
    Are you sure you want to
    Your message goes here
    Processing…
  • Awesome presentation, thanks for sharing.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

Web Fonts: Why Bother? Web Fonts: Why Bother? Presentation Transcript

  • 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.3 Chrome 5Safari 3.1 Safari 3.1Opera 10 Opera 9 iOS 4.2 iOS 1 2.2 browsers
  • @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.3 Chrome 5Safari 3.1 Safari 3.1Opera 10 Opera 9 iOS 1 2.2 browsers
  • @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 */}
  • @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");}}
  • @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 */}
  • <script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  • rendering
  • Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • TrueType and
  • TrueType and
  • Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • Rendering factors1) type design philosophy2) font file and outline format3) hinting4) operating systems5) web browsers6) font smoothing preferences
  • 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.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>
  • “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 class="char4">2</span></h1>
  • 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 class="char4">2</span></h1>
  • <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>
  • <h1 class="fancy_title">1972</h1>
  • Thank you!
  • Questions?Comments?
  • @gregveen