beyond the system font - advanced web typography

BEYOND THE SYSTEM FONT

by sara cannon / sara-cannon.com / follow @saracannon

SARA CANNON

Scout Branding Company

twitter: @saracannon

blog: sara-cannon.com

BEYOND THE SYSTEM FONT

BEYOND THE SYSTEM FONT

TYPOGRAPHY

BEYOND THE SYSTEM FONT

BEYOND THE SYSTEM FONT

WEB TYPOGRAPHY

BEYOND THE SYSTEM FONT

BEYOND THE SYSTEM FONT

ADOBE:

BEYOND THE SYSTEM FONT

HF&J

NO @FONT-FACE EMBEDDING!

BEYOND THE SYSTEM FONT

SITE EXAMPLES

BEYOND THE SYSTEM FONT

http://lostworldsfairs.com/

BEYOND THE SYSTEM FONT

BEYOND THE SYSTEM FONT

http://www.designmadeingermany.de/magazin/5/

BEYOND THE SYSTEM FONT

BEYOND THE SYSTEM FONT

http://sxsw.beercamp.com/

BEYOND THE SYSTEM FONT

BEYOND THE SYSTEM FONT

BEYOND THE SYSTEM FONT

http://typekit.com/gallery

BEYOND THE SYSTEM FONT

BEYOND THE SYSTEM FONT

“I WANT TO GO BEYOND THE

SYSTEM FONT!”

BEYOND THE SYSTEM FONT

CUFON / FLIR / SIFR

BEYOND THE SYSTEM FONT

FONT-STACKS

BEYOND THE SYSTEM FONT

@FONT-FACE

BEYOND THE SYSTEM FONT

HAND CODETYPEKIT

FONTSQUIRREL /FONTSPRINGGOOGLE API

BEYOND THE SYSTEM FONT

TYPEKIT.COM

BEYOND THE SYSTEM FONT

BEYOND THE SYSTEM FONT

TYPEKIT HAS 68

PARTICIPATING FOUNDRIES

BEYOND THE SYSTEM FONT

ADOBE:

BEYOND THE SYSTEM FONT

VEER:

BEYOND THE SYSTEM FONT

DEMO

BEYOND THE SYSTEM FONT

BEYOND THE SYSTEM FONT

TYPEKIT + MOBILE

BEYOND THE SYSTEM FONT

IPHONE

ANDROID

BEYOND THE SYSTEM FONT

BEYOND THE SYSTEM FONT

COMBATING FOUT

BEYOND THE SYSTEM FONT

Flash

Of

Unstyled

Text

COMBATING FOUT

BEYOND THE SYSTEM FONT

blog.typekit.com/2010/05/19/typekit-and-google/

COMBATING FOUT

BEYOND THE SYSTEM FONT

github.com/typekit/webfontloader

COMBATING FOUT

BEYOND THE SYSTEM FONT

TYPEKIT DEFAULT EMBED:

COMBATING FOUT

BEYOND THE SYSTEM FONT

TYPEKIT DEFAULT EMBED:

COMBATING FOUT

BEYOND THE SYSTEM FONT

TYPEKIT DEFAULT EMBED:

WEB FONT LOADER EMBED:

COMBATING FOUT

BEYOND THE SYSTEM FONT

TYPEKIT DEFAULT EMBED:

COMBATING FOUT

BEYOND THE SYSTEM FONT

github.com/typekit/webfontloader

COMBATING FOUT

BEYOND THE SYSTEM FONT

COMBATING FOUT

BEYOND THE SYSTEM FONT

code.google.com/apis/webfonts/docs/webfont_loader.html

COMBATING FOUT

BEYOND THE SYSTEM FONT

TAKE IT FURTHER

BEYOND THE SYSTEM FONT

Styling Condensed Fonts

TAKE IT FURTHER

BEYOND THE SYSTEM FONT

BEYOND THE SYSTEM FONT

SAD CHRISTMAS!

BEYOND THE SYSTEM FONT

TYPE CRUNCH!

WINDOWS?

BEYOND THE SYSTEM FONT

Disable Typekit IE6

Disable Typekit for Windows

Use Google Font API for Windows

BEYOND THE SYSTEM FONT

BEYOND THE SYSTEM FONT

BEYOND THE SYSTEM FONT

USER AGENT

FOLLOW THE INDUSTRY

BEYOND THE SYSTEM FONT

blog.typekit.com

fontsquirrel.com/blog

RESOURCES

BEYOND THE SYSTEM FONT

WEBFONT LOADER:code.google.com/apis/webfonts/docs/webfont_loader.html

github.com/typekit/webfontloader

TYPEKIT FONT EVENTS:gist.github.com/401726

BEYOND THE SYSTEM FONT

THANK YOU!