The type revolutionary's cookbook
Upcoming SlideShare
Loading in...5
×
 

The type revolutionary's cookbook

on

  • 2,056 views

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. ...

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

Statistics

Views

Total Views
2,056
Views on SlideShare
2,055
Embed Views
1

Actions

Likes
0
Downloads
26
Comments
1

1 Embed 1

http://twitter.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

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…
  • 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 :)
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The type revolutionary's cookbook The type revolutionary's cookbook Presentation Transcript

  • The Type Revolutionary’sCookbookAaron StanushKevin O’Leary
  • Aaron Stanush Kevin O’Leary Partner and Designer UX designeraaron@fourkitchens.com kevin.oleary@acquia.com @aaronstanush
  • 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 Standard ‣ 1995: Thousands of scalable fonts in use ‣ 1998: @font-face introduced ‣ 2007: Typekit launched ‣ 2010: All major browsers support @font-face
  • 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
  • Then‣ Arial ‣ Times‣ Georgia ‣ Palatino‣ Trebuchet MS ‣ Geneva‣ Verdana ‣ Courier New‣ Impact ‣ Comic Sans
  • lostworldsfairs.com/moon
  • FOUNDRIES DESIGNERS & Museo Gotham AvenirFORMATS TTF WOFF EOT SVG @font-face FONT DIY HOSTING SERVICES
  • Where do fonts come from?Boutiques and mega-stores
  • Commerical fonts‣ Foundries and designers ‣ Hoefler Frere-Jones, FontFont, House Industries, EmType, Emigre, P22‣ Font stores ‣ FontShop.com ‣ MyFonts.com ‣ Fontspring.com
  • 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/webfonts‣ League of Movable Type ‣ theleagueofmovabletype.com
  • 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
  • Web font formatsMany formats for many browsers
  • 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
  • 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
  • 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 ‣ Free: fontsquirrel.com/fontface‣ Build your own/host your own ‣ fontsquirrel.com/fontface/generator
  • 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) 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
  • 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.
  • 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.
  • 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); }
  • 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); }
  • 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"
  • Font hosting servicesAn easier way
  • 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
  • Font hosting services‣ fonts.com‣ fontslive.com‣ fontdeck.com‣ typekit.com‣ web-type.com‣ kernest.com and fontue.com‣ webink.com
  • 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 tools available to print designers will become part of CSS‣ Optically scalable fonts
  • Optical scaling
  • @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
  • What did you think?Locate this session on the DCC website:http://chicago2011.drupal.org/sessionsClick the “Take the Survey” link.Thanks!