the type revolutionary's cookbook
Post on 27-Jan-2015
114 Views
Preview:
DESCRIPTION
TRANSCRIPT
The Type Revolutionary’s Cookbook
Kevin O’Leary
Aaron Stanush
aaron@fourkitchens.com@aaronstanush
kevin.o'leary@acquia.com
Aaron Stanush Kevin O’LearyPartner and Designer UX designer
Why do we need more fonts?Because we do
‣ Type is beautiful
‣ Variety adds richness
‣ Type adds meaning
Because...
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‣ 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
Then‣ Arial
‣ Georgia
‣ Trebuchet MS
‣ Verdana
‣ Impact
‣ Times
‣ Palatino
‣ Geneva‣ Courier New
‣ Comic Sans
lostworldsfairs.com/moon
FOUNDRIES
Museo
DESIGNERS
Gotham Avenir
FORMATS WOFFTTF EOT
&
SVG
@font-face
FONTHOSTINGSERVICES
DIY
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
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.
“
Web font formatsMany formats for many browsers
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
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 • • •
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
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'); }
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.
@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
@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
@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
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
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
‣ 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
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/sessions
Click the “Take the Survey” link.
Thanks!
top related