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!