The type revolutionary's cookbook

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