font swoon - advanced web typography

@saracannon sara-cannon.com

Font Swoon...

Sara Cannon

slideshare.net/saracannon

Freelance Artist, Designer, & WordPress Developer living in Birmingham, AL

@saracannon

#fontswoon

Web Design is 95%

Typography

informationarchitects.jp/en/the-web-is-all-about-typography-period

Web Examples

trentwalton.com/2011/05/10/fit-to-scale

Liquor Store

FF Meta Serif

jaxvineyards.com

FF Din

FF Tisa

browsehappy.com

League Gothic

Le Monde Courrier

designmadeingermany.de/magazin/5

FF Din

Fonts! Fonts! Fonts!

Slab-Serif

Arvo

@font-face

Made By: Anton Kovit files.korkork.com

Archer

Made By: H&FJ typography.com

Adelle

@font-face

Made By: Type Together type-together.com

Cambria

@font-face

Made By: Ascender Fonts ascenderfonts.com

Clarendon

@font-face

Made By: Bitstream bitstream.com

Chaparral Pro

@font-face

Made By: Adobe adobe.com

Droid Serif

@font-face

Made By: Google code.google.com/android

Museo Slab

@font-face

Made By: exljbris exljbris.com

Vitesse

Made By: H&FJ typography.com

Sans-Serif

Avenir

Made By: Adrian Frutiger Linotype.com

Droid Sans

@font-face

Made By: Google code.google.com/android

Brandon Grotesque

@font-face

Made By: HVD hvdfonts.com

DIN

@font-face

Made By: Linotype linotype.com

Futura

@font-face

Made By: BitStream Adobe.com

Gotham

Made By: H&FJ typography.com

Proxima Nova

@font-face

Made By: Mark Simonson ms-studio.com

Omnes

Made By: Joshua Darden dardenstudio.com

@font-face

Display Type

Mensch

@font-face

Made By: Morgan Kuntson los!ype.com

LEAGUE GOTHIC

@font-face

Made By: The League of Moveable Typetheleagueofmoveabletype.com

Bello Script

@font-face

Made By: Underware underware.nl

Franchise

Made By: Derek Weathersbee los!ype.com

Homestead

@font-face

Made By: Luke Lisi los!ype.com

Ranger

Made By: Evan Huwa los!ype.com

Type Foundries

Lost Type

los!ype.com

exljbris

exljbris.com

font font

font-font.com

H&FJ

typography.com

League of Moveable Type

theleagueofmoveabletype.com

Open Source!Ofl (open Font License)

theleagueofmoveabletype.com/manifesto

House Industries

houseind.com

ARS Type

arstype.angusrshamal.com

Craft You CSS

Beyond the System Font!

@font-face

Hand Code

Typekit Or Other Paid Hosts

Google Api

Paulirish.com/2009/bulletproof-font-face-

implementation-syntax/

Fontsquirrel.com

sprungmarker.de/wp-content/uploads/webfont-services

typekit.com

Test & Tweak

check all browsers

TYPE CRUNCH!!!

Disable for IE

Disable for Windows

Disable for Firefox

Firefox on all of Windows

Chrome on Windows XPgetting around cache

style.css

custom.js

Neat Type Scripts

Lettering.js

le!eringjs.com

kern.js

kernjs.com

FitText

fi!extjs.com

Neat Type Scripts

WP Typography

wordpress.org/extend/plugins/wp-typography

Drop Caps

wordpress.org/extend/plugins/drop-caps/

Other Must Havesies

What Font

chengyinliu.com/whatfont.html

valiocon.com

live example:

Google Font Previewer

github.com/pamelafox/font-previewer-extension

MIN

min.artequalswork.com

Follow the Industry

Follow The Industry

@JasonSantaMaria

@veen

@brucel

@ilovetypography

@jessicahische

@fontsquirrel

@typekit

@h_

@clagnut

@fchimero

blog.typekit.com

Find Inspiration

ilovetypography.com

webtypography.net

typographica.org

fontsinuse.com

friendsoftype.com

typography-daily.com

siteinspire.net

typographyserved.com

ministryoftype.co.uk

dribbble.com

wordpress.org/showcase

life is short, art is long

Typography is

Everything.code is poetry.

@saracannon sara-cannon.com

#fontswoon