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

The type revolutionary's cookbook

The type revolutionary's cookbook

744d460fbc6fd58509aaf8ba0719d192?s=128

Aaron Stanush

March 07, 2011
Tweet

More Decks by Aaron Stanush

Other Decks in Design

Transcript

  1. The Type Revolutionary’s Cookbook Kevin O’Leary Aaron Stanush

  2. aaron@fourkitchens.com @aaronstanush kevin.o'leary@acquia.com Aaron Stanush Kevin O’Leary Partner and Designer

    UX designer
  3. Why do we need more fonts? Because we do

  4. ‣ Type is beautiful ‣ Variety adds richness ‣ Type

    adds meaning Because...
  5. None
  6. A little bit of history The golden age of type

  7. 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
  8. Before ‣ sIFR ‣ Flash ‣ Liked by foundries ‣

    Cufón ‣ Javascript/JSON ‣ Lightweight, not widely trusted for licensing ‣ @font-face + WOFF ‣ Just CSS ‣ Still serves files but in a more secure way After
  9. Then ‣ Arial ‣ Georgia ‣ Trebuchet MS ‣ Verdana

    ‣ Impact ‣ Times ‣ Palatino ‣ Geneva ‣ Courier New ‣ Comic Sans
  10. lostworldsfairs.com/moon

  11. FOUNDRIES Museo DESIGNERS Gotham Avenir FORMATS WOFF TTF EOT &

    SVG @font-face FONT HOSTING SERVICES DIY
  12. Where do fonts come from? Boutiques and mega-stores

  13. Commerical fonts ‣ Foundries and designers ‣ Hoefler Frere-Jones, FontFont,

    House Industries, EmType, Emigre, P22 ‣ Font stores ‣ FontShop.com ‣ MyFonts.com ‣ Fontspring.com
  14. Web font licensing It’s complicated. Every foundry or designer has

    their own rules.
  15. webfonts.info/wiki/index.php?title=Web_fonts_licensing_overview

  16. Commercial-free or open source ‣ Font Squirrel ‣ fontsquirrel.com ‣

    Google web fonts ‣ code.google.com/webfonts ‣ League of Movable Type ‣ theleagueofmovabletype.com
  17. SIL Open font license ‣ scripts.sil.org/OFL theleagueofmoveabletype.com/manifesto It means that

    you're 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. “
  18. Web font formats Many formats for many browsers

  19. Web font formats ‣ Truetype (TTF) ‣ Standard desktop format

    ‣ Embedded OpenType (EOT) ‣ TrueType + DRM ‣ Created by Microsoft ‣ Web open font format (WOFF) ‣ W3C standard, soon ‣ Smaller, contains metadata ‣ Scalable Vector Graphics (SVG) ‣ Not an actual font format
  20. Browser support webfonts.info/wiki/index.php?title=@font-face_browser_support Format Firefox 3.6+ Chrome 6+ IE 6-8

    IE9 Safari 3.1+ iOS 4.2 Android 2.2 EOT • • TTF • • • • • SVG • • WOFF • • •
  21. Do it yourself Font kits and bulletproof @font-face syntax

  22. @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
  23. Basic @font-face @font-face { font-family: Gotham; src: url('gotham.ttf'); } h1

    { font-family: Gotham; }
  24. Bulletproof @font-face fontspring.com/blog/the-new-bulletproof-font-face-syntax @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'); }
  25. 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.
  26. @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. Define the second EOT
  27. @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'); } Define the WOFF
  28. @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'); } Define the True-type
  29. If the # value was not provided for you, open

    the SVG file in a text editor and look for: font id="mySVGFontName" @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'); } Define the SVG
  30. Font hosting services An easier way

  31. 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
  32. Font hosting services ‣ fonts.com ‣ fontslive.com ‣ fontdeck.com ‣

    typekit.com ‣ web-type.com ‣ kernest.com and fontue.com ‣ webink.com
  33. Font hosting services fffo.grahambird.co.uk

  34. Ensuring quality It’s a mixed bag

  35. Three steps to quality ‣ Know your foundry ‣ Use

    appropriately ‣ Test, test, test
  36. Getting the hint Not all fonts are created equal

  37. What the future holds

  38. ‣ 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 What we can hope for
  39. Optical scaling

  40. @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
  41. What did you think? Locate this session on the DCC

    website: http://chicago2011.drupal.org/sessions Click the “Take the Survey” link. Thanks!