font swoon - advanced web typography
DESCRIPTION
In Font Swoon we will not only take a great look at some cool and inspiring fonts and implementations, but an in-depth look at advanced type techniques using CSS3 as well as basic implementation. A type nerd must see.TRANSCRIPT
@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