Download pdf - Type in your WordPress Themes by Sara Cannon WordCamp NYC

TYPOGRAPHY AND YOUR THEME

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

SARA CANNON

Scout Branding Company

twitter: @saracannon

blog: sara-cannon.com



WEB DESIGN IS 95% TYPOGRAPHY


H&FJ



Archer


GOTHAM



VEER





ADOBE



THE LEAGUE OF MOVEABLE TYPE






OPEN SOURCE!OFL (OPEN FONT LICENSE)

THELEAGUEOFMOVEABLETYPE.COM/MANIFESTO


EXLJBRIS




WEB TYPOGRAPHY



CUFON / FLIR / SIFR


@FONT-FACE



ADOBE:


H&FJ


HF&J


SITE EXAMPLES


http://www.katerusby.com/

http://www.katerusby.com

http://www.katerusby.com


ROSEWOOD

NEUTRAFACE


http://michelvrana.com/




LEAGUE GOTHIC

DROID SERIF


http://www.designmadeingermany.de




Din Round Web


http://www. jaxvineyards.com




FF-Tisa-Web

FF-Din-Web


http://www.sequence.com




I WANT TO GO



FONT-STACKS


@FONT-FACE

@FONT-FACE


@FONT-FACE


http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/





@FONT-FACE


truetype (.ttf)

opentype (.otf)

web open font format (.wo!)

@FONT-FACE


font hinting



HAND CODETYPEKIT

FONTSQUIRREL /FONTSPRINGGOOGLE API


FONTSQUIRREL.COM@FONT-FACE GENERATOR

WOFF Font - The emerging standard format.EOT (light) Font - Targets Internet Explorer.

SVG Font - Targets Webkit Mobile platforms (iPhone and iPad)


TYPEKIT.COM



TYPEKIT HAS 68

PARTICIPATING FOUNDRIES


ADOBE:


VEER:



TYPOGRAPHIC STYLE GUIDE FOR YOUR

THEME


http://2010dev.wordpress.com/








COMBATING FOUT


Flash

Of

Unstyled

Text

COMBATING FOUT


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

COMBATING FOUT


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

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




COMBATING FOUT


TYPEKIT DEFAULT EMBED:

WEB FONT LOADER EMBED:

COMBATING FOUT


COMBATING FOUT


github.com/typekit/webfontloader

COMBATING FOUT


TAKE IT FURTHER


Styling Condensed Fonts

TAKE IT FURTHER



type crunch!!!

WINDOWS?


Disable Typekit IE6

Disable Typekit for Windows

Use Google Font API for Windows




USER AGENT

WINDOWS?


Firefox on Windows

USER AGENT

WINDOWS?


Firefox on Windows XP


WHAT NOT TO DO


Style Your Website With Comic Sans!


Or The Classic

Papyrus!


Or Even Papyrus Condensed!

SORRY AVATAR



THE INFAMOUS EYE BLEED.


EYE BLEED!!!

AHHH THE BURNING!

FREE SET OF STEAK KNIVES!!!


THE EVEN MORE INFAMOUS EYE

BLEED.


EYE BLEED!!!

AHHH THE BURNING!

FREE SET OF STEAK KNIVES!!!


WHAT TO DO


CHECK ALL BROWSERS

ALWAYS.


FOLLOW THE INDUSTRY


blog.typekit.com


ilovetypography.com


typographica.org


FIND INSPIRATION!


siteinspire.net


typographyserved.com


ministryoftype.co.uk


wordpress.org/showcase


Thank You!

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