Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Realizing the Expressive Potential of Fonts on ...

Realizing the Expressive Potential of Fonts on the Web

My presentation about web fonts, Typekit, and design given at Adobe MAX in LA on May 8, 2013.

Sean McBride

May 08, 2013
Tweet

More Decks by Sean McBride

Other Decks in Design

Transcript

  1. ?

  2. No

  3. EOT SVG OTF/TTF WOFF IE 5 – IE 9 IE

    9 – Chrome 0.3 Chrome 4 Chrome 5 – Firefox 3.5 Firefox 3.5 Firefox 3.6 – Opera 9 Opera 10 Opera 11.01 – Safari 3.1 Safari 3.1 Safari 5.1 – iOS 1 iOS 4.2 iOS 5 – 3.1 2.2 Chrome
  4. @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 */ }
  5. @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 */ }
  6. @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf')

    format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } http://use.typekit.net/abc1def.js http://use.edgefonts.net/droid-sans.js
  7. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con

    dential. Take the SESSION SURVEY on the MAX COMPANION app 76 …for your chance to WIN one of these e-books from Adobe Press Every survey you submit enters your name to win the daily grand prize - an Apple® iPod Nano®.