typography on the web
DESCRIPTION
Implementation of Typography on the web, in WordPress, cool web fonts, and where things are going. - A Talk at WordCamp Reno June 4th, 2011.TRANSCRIPT
TYPOGRAPHY ON THE WEB
sara cannon / sara-cannon.com / follow @saracannon
WORDCAMP RENO 2011
Saturday, June 4, 2011
WORDCAMP RENO
SARA CANNON
A B O U T M E
Birmingham, AL
@saracannon
slideshare.net/saracannon
sara-cannon.com
I love WordPress!
Saturday, June 4, 2011
WORDCAMP RENO
F O N T S U S E D I N T H I S P R E S E N TAT I O N :
T Y P O G R A P H Y O N T H E W E B
Chaparral Pro by Adobe http://typekit.com/fonts/chaparral-pro
LEAGUE GOTHIC by e League of Movable Type
http://typekit.com/fonts/league-gothic
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Web Design is 95% Typography
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Helvetica Neue
Arial
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
e Beautiful Web
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Liquor Store
FF Meta Serif
Saturday, June 4, 2011
T Y P O G R A P H Y A N D Y O U R T H E M E
http://www. jaxvineyards.com
FF Din
FF Tisa
Saturday, June 4, 2011
http://www.designmadeingermany.de/
T Y P O G R A P H Y A N D Y O U R T H E M E
FF Din
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
League Gothic
Le Monde Courrier
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Craft your CSS
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
L I N E - H E I G H T
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y A N D Y O U R T H E M E
Saturday, June 4, 2011
WORDCAMP RENO
L I N K S : B O R E R - B OT T O M O R C O L O R
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y A N D Y O U R T H E M E
Saturday, June 4, 2011
WORDCAMP RENO
L E T T E R - S P A C I N G
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
F O N T - S TA C K
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
O P T I M I Z E L E G I B I L I T Y
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
O P T I M I Z E L E G I B I L I T Y
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Web-Fonts
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
I Want To Go
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Font-Stacks
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
@font-face
Saturday, June 4, 2011
WORDCAMP RENO
@ F O N T - F A C E
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Why shouldn’t I try to use my print fonts that I paid so much for?
Saturday, June 4, 2011
WORDCAMP RENO
F O N T - H I N T I N G F O R T H E S C R E E N
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Load Time
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Check your licensing
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Hand Code
Font Face Kit Generator
Typekit Or Other Paid Hosts
Google Api
Saturday, June 4, 2011
WORDCAMP RENO
@ F O N T - F A C E
T Y P O G R A P H Y O N T H E W E B
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
from: fontsquirrel.com
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Fontsquirrel.com@font-face Generator
WOFF - e Emerging Standard Format.EOT (light) - Targets Internet Explorer.
SVG - Targets Webkit Mobile Platforms (iPhone And IPad)
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
http://sprungmarker.de/wp-content/uploads/webfont-services/
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
typekit.com
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Typekit Has 81 Participating Foundries
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Typekit Even Has Futura!
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Test and Tweak
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Always.
Check All Browsers
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
TYPE CRUNCH!!!Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
D I S A B L E T Y P E K I T J U S T F O R I E 6
T Y P O G R A P H Y O N T H E W E B
- load IE6 Fonts in Style Sheet within Conditional Comments in the Header
Saturday, June 4, 2011
WORDCAMP RENO
D I S A B L E F O R A L L O F W I N D O W S :
T Y P O G R A P H Y O N T H E W E B
User Agent
Saturday, June 4, 2011
WORDCAMP RENO
J U S T F I R E F O X
T Y P O G R A P H Y O N T H E W E B
CSS Hack
Saturday, June 4, 2011
WORDCAMP RENO
F I R E F O X O N A L L O F W I N D O W S
T Y P O G R A P H Y O N T H E W E B
User Agent
Saturday, June 4, 2011
WORDCAMP RENO
F I R E F O X O N W I N D O W S X P
T Y P O G R A P H Y O N T H E W E B
User Agent + CSS Hack
Saturday, June 4, 2011
WORDCAMP RENO
C O M B AT I N G F O U T
T Y P O G R A P H Y O N T H E W E B
Flash
Of
Unstyled
Text
Saturday, June 4, 2011
WORDCAMP RENO
C O M B AT I N G F O U T
T Y P O G R A P H Y A N D Y O U R T H E M E
blog.typekit.com/2010/05/19/typekit-and-google/
Saturday, June 4, 2011
WORDCAMP RENO
C O M B AT I N G F O U T
T Y P O G R A P H Y A N D Y O U R T H E M E
code.google.com/apis/webfonts/docs/webfont_loader.html
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y A N D Y O U R T H E M E
Typekit Default Embed:
Webfont Loader Embed:
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y A N D Y O U R T H E M E
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y A N D Y O U R T H E M E
github.com/typekit/webfontloader
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y A N D Y O U R T H E M E
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Take it Even Further
Saturday, June 4, 2011
WORDCAMP RENO
S T Y L I N G C O N D E N S E D F O N T S :
T Y P O G R A P H Y O N T H E W E B
Fallback with Webfont Loader Normal
Fallback Without Webfont Loaser
Saturday, June 4, 2011
WORDCAMP RENO
U S E T H O S E S T Y L E S H E E T S !
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Even More Custom Type
Implementation
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
CSS3
Saturday, June 4, 2011
WORDCAMP RENO
T E X T - S H A D O W
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
http://mothereffingtextshadow.com/
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
http://mothereffingtextshadow.com/
Saturday, June 4, 2011
WORDCAMP RENO
R OTAT E
T Y P O G R A P H Y O N T H E W E B
http://www.cssplayer.com/blog/date-display-technique-with-text-rotation/
Saturday, June 4, 2011
WORDCAMP RENO
R OTAT E
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
WordPress Plugins
Saturday, June 4, 2011
WORDCAMP RENO
P L U G I N : W P T Y P O G R A P H Y
T Y P O G R A P H Y O N T H E W E B
http://wordpress.org/extend/plugins/wp-typography/
Saturday, June 4, 2011
WORDCAMP RENO
P L U G I N : D R O P C A P S
T Y P O G R A P H Y O N T H E W E B
http://wordpress.org/extend/plugins/drop-caps/
• override their css with your own• works across browsers with not too much tweaking
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Neat Type Scripts
Saturday, June 4, 2011
WORDCAMP RENO
S C R I P T : L E T T E R I N G . J S
T Y P O G R A P H Y O N T H E W E B
http://letteringjs.com/
• Takes each letter in a headline and wraps it in a Span• Allows for individual letter manipulation • Not recommended for large chunks
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
S C R I P T : K E R N . J S
T Y P O G R A P H Y O N T H E W E B
http://www.kernjs.com/
• Allows in-browser kerning of lettering• Generates code for kerned copy• Works with Lettering.js
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
S C R I P T : F I T T E X T
T Y P O G R A P H Y O N T H E W E B
http://#ttextjs.com/
• Stretches headline to #t container • Useful for $uid/responsive layouts
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Other Must Havesies
Saturday, June 4, 2011
WORDCAMP RENO
E X T E N S I O N : W H AT F O N T
T Y P O G R A P H Y O N T H E W E B
http://chengyinliu.com/whatfont.html
• Find out what fonts and their CSS others are using• Sharpen your ninja font-detection skillz! (yes that is a ninja skill)
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
E X T E N S I O N : G O O G L E F O N T P R E V I E W E R
T Y P O G R A P H Y O N T H E W E B
https://github.com/pamelafox/font-previewer-extension
• Test run a font on your site without coding• using web-fonts only from Google’s web-font API
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
B O O K M A R K L E T : M I N
T Y P O G R A P H Y O N T H E W E B
http://min.artequalswork.com/
• Shows your site if it was just type• Gets rid of all images and leaves just the type layout• Analyze Typographic Hierarchy
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
e Future?
Saturday, June 4, 2011
WORDCAMP RENO
T H E F U T U R E ?
T Y P O G R A P H Y O N T H E W E B
• Richard Ritter of Fontdeck.com @clanut
•Open Type
• Ligatures
• Multiple Alphabet Sets
• Multiple Numeric Sets
• All through CSS Classes!
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
What Not To Do
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Style Your Website
With Paparyus
(Sorry Every Mediterranean Restaurant Website Ever)
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Use Non-Web-Licensed Fonts:
Archer or GOTHAM
(Sorry H&FJ Luvahz)
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Never EVER Use The Infamous Comic Sans
(It doesn’t matter that you think it’s good for wire-framing)
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
It’s STILL Not CoolEVEN If You Think
It Is IRONIC(Sorry Jorbin)
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
e Infamous Eye Bleed
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
EYE BLEED!!!
AHHH THE BURNING!
FREE SET OF STEAK KNIVES!!!
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
e Even More Infamous EYE BLEED
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
EYE BLEED!!!
AHHH THE BURNING!
FREE SET OF STEAK KNIVES!!!Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
What To Do
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Find An Appropriate Substitution For:
GOTHAM
By Using
PROXIMA NOVA
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Always.
Check All Browsers
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Create A Typographic Style Guide For
Your eme
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
http://twentytendemo.wordpress.com/
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
http://twentyelevendemo.wordpress.com/
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Follow e Industry
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
blog.typekit.com
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
ilovetypography.com
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
typographica.org
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
webtypography.net
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Follow e Tweets
Saturday, June 4, 2011
WORDCAMP RENO
F O L L O W T H E T W E E T S
T Y P O G R A P H Y O N T H E W E B
@JasonSantaMaria
@veen
@brucel
@ilovetypography
@jessicahische
@fontsquirrel
@typekit
@h_
@clagnut
@fchimero
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Find Inspiration
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
siteinspire.net
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
typographyserved.com
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
ministryoftype.co.uk
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
dribbble.com
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
wordpress.org/showcase
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Find Cool Fonts
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
P22 UNDERGROUND
by: P22
http://typekit.com/fonts/p22-underground
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Adelle
by: Type Together
http://typekit.com/fonts/adelle-web
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
http://typekit.com/fonts/ff-tisa-web-pro
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Typography is Everything.
“life is short, art is long”
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
ank You!
sara cannon / sara-cannon.com / follow @saracannonSaturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Type Foundries
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
H&FJ
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Archer
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
GOTHAM
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Veer
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Adobe
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
e League Of Moveable Type
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Open Source!O! (open Font License)
theleagueofmoveabletype.com/manifesto
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Exljbris
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
WORDCAMP RENO
T Y P O G R A P H Y O N T H E W E B
Lost Type
Pay What You Want by Riely Cran & Tyler Galpin
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011
T Y P O G R A P H Y O N T H E W E B
Saturday, June 4, 2011