The Type Revolutionary’sCookbookAaron StanushKevin O’Leary
Aaron Stanush             Kevin O’Leary Partner and Designer         UX designeraaron@fourkitchens.com   kevin.oleary@acqu...
Why do we need more fonts?Because we do
Because...‣   Type is beautiful‣   Variety adds richness‣   Type adds meaning
A little bit of historyThe golden age of type
Timeline ‣   1975: Steve Jobs takes a calligraphy class ‣   1984: The First Scalable Type Fonts ‣   1991: The Unicode Stan...
Before                            After‣   sIFR                          ‣   @font-face + WOFF    ‣   Flash               ...
Then‣   Arial          ‣   Times‣   Georgia        ‣   Palatino‣   Trebuchet MS   ‣   Geneva‣   Verdana        ‣   Courier...
lostworldsfairs.com/moon
FOUNDRIES           DESIGNERS                      &   Museo           Gotham       AvenirFORMATS      TTF     WOFF    EOT...
Where do fonts come from?Boutiques and mega-stores
Commerical fonts‣   Foundries and designers    ‣   Hoefler Frere-Jones, FontFont, House Industries, EmType,        Emigre, ...
Web font licensingIt’s complicated. Every foundry or designer has their own rules.
webfonts.info/wiki/index.php?title=Web_fonts_licensing_overview
Commercial-free or open source‣   Font Squirrel    ‣   fontsquirrel.com‣   Google web fonts    ‣   code.google.com/webfont...
SIL Open font license‣   scripts.sil.org/OFL“       It means that youre allowed to use these fonts personally or       com...
Web font formatsMany formats for many browsers
Web font formats‣   Truetype (TTF)                ‣   Web open font format                                      (WOFF)    ...
Browser supportFormat   Firefox 3.6+   Chrome 6+   IE 6-8     IE9       Safari 3.1+     iOS 4.2     Android 2.2 EOT       ...
Do it yourselfFont kits and bulletproof @font-face syntax
@font-face kits‣   Contains:    ‣   EOT, WOFF, TTF, SVG‣   Pre-built kits    ‣   Paid: fontspring.com and other shops    ‣...
Basic @font-face@font-face {  font-family: Gotham;  src: url(gotham.ttf);  }h1 {  font-family: Gotham;  }
Bulletproof @font-face@font-face {  font-family: Gotham;    src: url(gotham.eot) format(eot),    src: url(gotham.eot?iefix...
Define the first EOT@font-face {  font-family: Gotham;    src: url(gotham.eot) format(eot),    src: url(gotham.eot?iefix) fo...
Define the second EOT@font-face {  font-family: Gotham;    src: url(gotham.eot) format(eot),    src: url(gotham.eot?iefix) ...
Define the WOFF@font-face {  font-family: Gotham;    src: url(gotham.eot) format(eot),    src: url(gotham.eot?iefix) format...
Define the True-type@font-face {  font-family: Gotham;    src: url(gotham.eot) format(eot),    src: url(gotham.eot?iefix) f...
Define the SVG@font-face {  font-family: Gotham;    src: url(gotham.eot) format(eot),    src: url(gotham.eot?iefix) format(...
Font hosting servicesAn easier way
Font hosting‣   Pros    ‣   Large selection of high-quality fonts    ‣   Very little coding    ‣   No worrying about licen...
Font hosting services‣   fonts.com‣   fontslive.com‣   fontdeck.com‣   typekit.com‣   web-type.com‣   kernest.com and font...
Font hosting services                        fffo.grahambird.co.uk
Ensuring qualityIt’s a mixed bag
Three steps to quality‣   Know your foundry‣   Use appropriately‣   Test, test, test
Getting the hintNot all fonts are created equal
What the future holds
What we can hope for‣   Hinting will go away (eventually)‣   We will consolidate on one format (WOFF)‣   All typographic t...
Optical scaling
@font-your-face module‣   drupal.org/project/fontyourface    ‣   Support for Typekit, Google Fonts, Fonts.com, Font Squirr...
What did you think?Locate this session on the DCC website:http://chicago2011.drupal.org/sessionsClick the “Take the Survey...
The type revolutionary's cookbook
Upcoming SlideShare
Loading in...5
×

The type revolutionary's cookbook

1,755

Published on

A talk about how far fonts have come on the web and why this is the beginning of a new age for using beautiful fonts everywhere.

Originally presented by Aaron Stanush (Four Kitchens) and Kevin O'Leary (Acquia) at DrupalCon Chicago 2010.

http://chicago2011.drupal.org/sessions/type-revolutionary-s-cookbook

Published in: Technology, Art & Photos
1 Comment
0 Likes
Statistics
Notes
  • Thanks for this slideshow, much appreciated. btw, just to confirm that Google Web Fonts is a font hosting service as well, as well as being Open Source :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
1,755
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
27
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "The type revolutionary's cookbook"

  1. 1. The Type Revolutionary’sCookbookAaron StanushKevin O’Leary
  2. 2. Aaron Stanush Kevin O’Leary Partner and Designer UX designeraaron@fourkitchens.com kevin.oleary@acquia.com @aaronstanush
  3. 3. Why do we need more fonts?Because we do
  4. 4. Because...‣ Type is beautiful‣ Variety adds richness‣ Type adds meaning
  5. 5. A little bit of historyThe golden age of type
  6. 6. Timeline ‣ 1975: Steve Jobs takes a calligraphy class ‣ 1984: The First Scalable Type Fonts ‣ 1991: The Unicode Standard ‣ 1995: Thousands of scalable fonts in use ‣ 1998: @font-face introduced ‣ 2007: Typekit launched ‣ 2010: All major browsers support @font-face
  7. 7. Before After‣ sIFR ‣ @font-face + WOFF ‣ Flash ‣ Just CSS ‣ Liked by foundries ‣ Still serves files but in a more secure way‣ Cufón ‣ Javascript/JSON ‣ Lightweight, not widely trusted for licensing
  8. 8. Then‣ Arial ‣ Times‣ Georgia ‣ Palatino‣ Trebuchet MS ‣ Geneva‣ Verdana ‣ Courier New‣ Impact ‣ Comic Sans
  9. 9. lostworldsfairs.com/moon
  10. 10. FOUNDRIES DESIGNERS & Museo Gotham AvenirFORMATS TTF WOFF EOT SVG @font-face FONT DIY HOSTING SERVICES
  11. 11. Where do fonts come from?Boutiques and mega-stores
  12. 12. Commerical fonts‣ Foundries and designers ‣ Hoefler Frere-Jones, FontFont, House Industries, EmType, Emigre, P22‣ Font stores ‣ FontShop.com ‣ MyFonts.com ‣ Fontspring.com
  13. 13. Web font licensingIt’s complicated. Every foundry or designer has their own rules.
  14. 14. webfonts.info/wiki/index.php?title=Web_fonts_licensing_overview
  15. 15. Commercial-free or open source‣ Font Squirrel ‣ fontsquirrel.com‣ Google web fonts ‣ code.google.com/webfonts‣ League of Movable Type ‣ theleagueofmovabletype.com
  16. 16. SIL Open font license‣ scripts.sil.org/OFL“ It means that youre allowed to use these fonts personally or commercially, as long as you credit the original creator, and if you made tweaks and changes to the typefaces, any new typefaces resulting from it should be licensed under the same terms. That way all our fonts and any new fonts resulting from them will always be open. theleagueofmoveabletype.com/manifesto
  17. 17. Web font formatsMany formats for many browsers
  18. 18. Web font formats‣ Truetype (TTF) ‣ Web open font format (WOFF) ‣ Standard desktop format ‣ W3C standard, soon‣ Embedded OpenType (EOT) ‣ Smaller, contains metadata ‣ TrueType + DRM ‣ Scalable Vector Graphics (SVG) ‣ Created by Microsoft ‣ Not an actual font format
  19. 19. Browser supportFormat Firefox 3.6+ Chrome 6+ IE 6-8 IE9 Safari 3.1+ iOS 4.2 Android 2.2 EOT • • TTF • • • • • SVG • •WOFF • • • webfonts.info/wiki/index.php?title=@font-face_browser_support
  20. 20. Do it yourselfFont kits and bulletproof @font-face syntax
  21. 21. @font-face kits‣ Contains: ‣ EOT, WOFF, TTF, SVG‣ Pre-built kits ‣ Paid: fontspring.com and other shops ‣ Free: fontsquirrel.com/fontface‣ Build your own/host your own ‣ fontsquirrel.com/fontface/generator
  22. 22. Basic @font-face@font-face { font-family: Gotham; src: url(gotham.ttf); }h1 { font-family: Gotham; }
  23. 23. Bulletproof @font-face@font-face { font-family: Gotham; src: url(gotham.eot) format(eot), src: url(gotham.eot?iefix) format(eot), url(gotham.woff) format(woff), url(gotham.ttf) format(truetype), url(gotham.svg#gotham) format(svg); } fontspring.com/blog/the-new-bulletproof-font-face-syntax
  24. 24. Define the first EOT@font-face { font-family: Gotham; src: url(gotham.eot) format(eot), src: url(gotham.eot?iefix) format(eot), url(gotham.woff) format(woff), url(gotham.ttf) format(truetype), url(gotham.svg#gotham) format(svg); } This ensures the EOT is delivered to IE 9 while in IE 7/8 compatibility mode.
  25. 25. Define the second EOT@font-face { font-family: Gotham; src: url(gotham.eot) format(eot), src: url(gotham.eot?iefix) format(eot), url(gotham.woff) format(woff), url(gotham.ttf) format(truetype), url(gotham.svg#gotham) format(svg); } The question mark tricks IE 6-8 into ignoring the rest of the formats.
  26. 26. Define the WOFF@font-face { font-family: Gotham; src: url(gotham.eot) format(eot), src: url(gotham.eot?iefix) format(eot), url(gotham.woff) format(woff), url(gotham.ttf) format(truetype), url(gotham.svg#gotham) format(svg); }
  27. 27. Define the True-type@font-face { font-family: Gotham; src: url(gotham.eot) format(eot), src: url(gotham.eot?iefix) format(eot), url(gotham.woff) format(woff), url(gotham.ttf) format(truetype), url(gotham.svg#gotham) format(svg); }
  28. 28. Define the SVG@font-face { font-family: Gotham; src: url(gotham.eot) format(eot), src: url(gotham.eot?iefix) format(eot), url(gotham.woff) format(woff), url(gotham.ttf) format(truetype), url(gotham.svg#gotham) format(svg); } If the # value was not provided for you, open the SVG file in a text editor and look for: font id="mySVGFontName"
  29. 29. Font hosting servicesAn easier way
  30. 30. Font hosting‣ Pros ‣ Large selection of high-quality fonts ‣ Very little coding ‣ No worrying about licensing ‣ No expensive font purchases‣ Cons ‣ Not free – pay by pageviews or per font
  31. 31. Font hosting services‣ fonts.com‣ fontslive.com‣ fontdeck.com‣ typekit.com‣ web-type.com‣ kernest.com and fontue.com‣ webink.com
  32. 32. Font hosting services fffo.grahambird.co.uk
  33. 33. Ensuring qualityIt’s a mixed bag
  34. 34. Three steps to quality‣ Know your foundry‣ Use appropriately‣ Test, test, test
  35. 35. Getting the hintNot all fonts are created equal
  36. 36. What the future holds
  37. 37. What we can hope for‣ Hinting will go away (eventually)‣ We will consolidate on one format (WOFF)‣ All typographic tools available to print designers will become part of CSS‣ Optically scalable fonts
  38. 38. Optical scaling
  39. 39. @font-your-face module‣ drupal.org/project/fontyourface ‣ Support for Typekit, Google Fonts, Fonts.com, Font Squirrel, Kernest, and FontDeck ‣ Enabling a font happens automatically, e.g. no JS to add ‣ Can apply fonts to site elements through the UI
  40. 40. What did you think?Locate this session on the DCC website:http://chicago2011.drupal.org/sessionsClick the “Take the Survey” link.Thanks!
  1. A particular slide catching your eye?

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

×