Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Typography on the Web
1. TYPOGRAPHY ON THE WEB
WORDCAMP RENO 2011
sara cannon / sara-cannon.com / follow @saracannon
Saturday, June 4, 2011
2. ABOUT ME
SARA CANNON
Birmingham, AL
@saracannon
slideshare.net/saracannon
sara-cannon.com
I love WordPress!
WORDCAMP RENO
Saturday, June 4, 2011
3. TYPOGRAPHY ON THE WEB
FONTS USED IN THIS PRESENTATION:
Chaparral Pro by Adobe
http://typekit.com/fonts/chaparral-pro
LEAGUE GOTHIC by e League of Movable Type
http://typekit.com/fonts/league-gothic
WORDCAMP RENO
Saturday, June 4, 2011
4. TYPOGRAPHY ON THE WEB
Web Design is 95%
Typography
WORDCAMP RENO
Saturday, June 4, 2011
25. TYPOGRAPHY ON THE WEB
@font-face
WORDCAMP RENO
Saturday, June 4, 2011
26. TYPOGRAPHY ON THE WEB
@FONT-FACE
WORDCAMP RENO
Saturday, June 4, 2011
27. TYPOGRAPHY ON THE WEB
Why shouldn’t I try to use my print
fonts that I paid so much for?
WORDCAMP RENO
Saturday, June 4, 2011
28. TYPOGRAPHY ON THE WEB
FONT-HINTING FOR THE SCREEN
WORDCAMP RENO
Saturday, June 4, 2011
29. TYPOGRAPHY ON THE WEB
Load Time
WORDCAMP RENO
Saturday, June 4, 2011
30. TYPOGRAPHY ON THE WEB
Check your licensing
WORDCAMP RENO
Saturday, June 4, 2011
31. TYPOGRAPHY ON THE WEB
Hand Code
Font Face Kit Generator
Typekit Or Other Paid Hosts
Google Api
WORDCAMP RENO
Saturday, June 4, 2011
32. TYPOGRAPHY ON THE WEB
@FONT-FACE
http://paulirish.com/2009/bulletproof-font-face-
implementation-syntax/
WORDCAMP RENO
Saturday, June 4, 2011
33. TYPOGRAPHY ON THE WEB
from: fontsquirrel.com
WORDCAMP RENO
Saturday, June 4, 2011
34. TYPOGRAPHY ON THE WEB
Fontsquirrel.com
@font-face Generator
WOFF - e Emerging Standard Format.
EOT (light) - Targets Internet Explorer.
SVG - Targets Webkit Mobile Platforms (iPhone And IPad)
WORDCAMP RENO
Saturday, June 4, 2011
35. TYPOGRAPHY ON THE WEB
http://sprungmarker.de/wp-content/uploads/webfont-services/
Saturday, June 4, 2011
36. TYPOGRAPHY ON THE WEB
typekit.com
WORDCAMP RENO
Saturday, June 4, 2011
47. TYPOGRAPHY ON THE WEB
DISABLE TYPEKIT JUST FOR IE6
- load IE6 Fonts in Style Sheet within Conditional
Comments in the Header
WORDCAMP RENO
Saturday, June 4, 2011
48. TYPOGRAPHY ON THE WEB
DISABLE FOR ALL OF WINDOWS:
User Agent
WORDCAMP RENO
Saturday, June 4, 2011
49. TYPOGRAPHY ON THE WEB
JUST FIREFOX
CSS Hack
WORDCAMP RENO
Saturday, June 4, 2011
50. TYPOGRAPHY ON THE WEB
FIREFOX ON ALL OF WINDOWS
User Agent
WORDCAMP RENO
Saturday, June 4, 2011
51. TYPOGRAPHY ON THE WEB
FIREFOX ON WINDOWS XP
User Agent + CSS Hack
WORDCAMP RENO
Saturday, June 4, 2011
52. TYPOGRAPHY ON THE WEB
COMBATING FOUT
Flash
Of
Unstyled
Text
WORDCAMP RENO
Saturday, June 4, 2011
53. TYPOGRAPHY AND YOUR THEME
COMBATING FOUT
blog.typekit.com/2010/05/19/typekit-and-google/
WORDCAMP RENO
Saturday, June 4, 2011
54. TYPOGRAPHY AND YOUR THEME
COMBATING FOUT
code.google.com/apis/webfonts/
docs/webfont_loader.html
WORDCAMP RENO
Saturday, June 4, 2011
55. TYPOGRAPHY AND YOUR THEME
Typekit Default Embed:
Webfont Loader Embed:
WORDCAMP RENO
Saturday, June 4, 2011
59. TYPOGRAPHY ON THE WEB
Take it Even Further
WORDCAMP RENO
Saturday, June 4, 2011
60. TYPOGRAPHY ON THE WEB
STYLING CONDENSED FONTS:
Fallback with Fallback Without
Webfont Loader Normal Webfont Loaser
WORDCAMP RENO
Saturday, June 4, 2011
61. TYPOGRAPHY ON THE WEB
USE THOSE STYLE SHEETS!
WORDCAMP RENO
Saturday, June 4, 2011
62. TYPOGRAPHY ON THE WEB
Even More Custom
Type
Implementation
WORDCAMP RENO
Saturday, June 4, 2011
69. TYPOGRAPHY ON THE WEB
WordPress Plugins
WORDCAMP RENO
Saturday, June 4, 2011
70. TYPOGRAPHY ON THE WEB
PLUGIN: WP TYPOGRAPHY
http://wordpress.org/extend/plugins/wp-typography/
WORDCAMP RENO
Saturday, June 4, 2011
71. TYPOGRAPHY ON THE WEB
PLUGIN: DROP CAPS
http://wordpress.org/extend/plugins/drop-caps/
• override their css with your own
• works across browsers with not too much tweaking
WORDCAMP RENO
Saturday, June 4, 2011
72. TYPOGRAPHY ON THE WEB
Neat Type Scripts
WORDCAMP RENO
Saturday, June 4, 2011
73. TYPOGRAPHY ON THE WEB
SCRIPT: LETTERING.JS
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
WORDCAMP RENO
Saturday, June 4, 2011
77. TYPOGRAPHY ON THE WEB
SCRIPT: KERN.JS
http://www.kernjs.com/
• Allows in-browser kerning of lettering
• Generates code for kerned copy
• Works with Lettering.js
WORDCAMP RENO
Saturday, June 4, 2011
79. TYPOGRAPHY ON THE WEB
SCRIPT: FIT TEXT
http:// ttextjs.com/
• Stretches headline to t container
• Useful for uid/responsive layouts
WORDCAMP RENO
Saturday, June 4, 2011
81. TYPOGRAPHY ON THE WEB
Other Must Havesies
WORDCAMP RENO
Saturday, June 4, 2011
82. TYPOGRAPHY ON THE WEB
EXTENSION: WHATFONT
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)
WORDCAMP RENO
Saturday, June 4, 2011
84. TYPOGRAPHY ON THE WEB
EXTENSION: GOOGLE FONT PREVIEWER
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
WORDCAMP RENO
Saturday, June 4, 2011
86. TYPOGRAPHY ON THE WEB
BOOKMARKLET: MIN
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
WORDCAMP RENO
Saturday, June 4, 2011
89. TYPOGRAPHY ON THE WEB
e Future?
WORDCAMP RENO
Saturday, June 4, 2011
90. TYPOGRAPHY ON THE WEB
THE FUTURE?
• Richard Ritter of Fontdeck.com @clanut
•Open Type
• Ligatures
• Multiple Alphabet Sets
• Multiple Numeric Sets
• All through CSS Classes!
WORDCAMP RENO
Saturday, June 4, 2011
91. TYPOGRAPHY ON THE WEB
What Not To Do
WORDCAMP RENO
Saturday, June 4, 2011
92. TYPOGRAPHY ON THE WEB
Style Your Website
With Paparyus
(Sorry Every Mediterranean Restaurant Website Ever)
WORDCAMP RENO
Saturday, June 4, 2011
93. TYPOGRAPHY ON THE WEB
Use Non-Web-Licensed Fonts:
Archer or GOTHAM
(Sorry H&FJ Luvahz)
WORDCAMP RENO
Saturday, June 4, 2011
95. TYPOGRAPHY ON THE WEB
Never EVER Use The
Infamous Comic Sans
(It doesn’t matter that you think it’s good for wire-framing)
WORDCAMP RENO
Saturday, June 4, 2011
96. TYPOGRAPHY ON THE WEB
It’s STILL Not Cool
EVEN If You Think
It Is IRONIC
(Sorry Jorbin)
WORDCAMP RENO
Saturday, June 4, 2011
97. TYPOGRAPHY ON THE WEB
e Infamous
Eye Bleed
WORDCAMP RENO
Saturday, June 4, 2011
98. TYPOGRAPHY ON THE WEB
EYE BLEED!!!
AHHH THE BURNING!
FREE SET OF STEAK KNIVES!!!
Saturday, June 4, 2011
99. TYPOGRAPHY ON THE WEB
e Even More Infamous
EYE BLEED
WORDCAMP RENO
Saturday, June 4, 2011
100. TYPOGRAPHY ON THE WEB
EYE BLEED!!!
AHHH THE BURNING!
FREE SET OF STEAK KNIVES!!!
Saturday, June 4, 2011
101. TYPOGRAPHY ON THE WEB
What To Do
WORDCAMP RENO
Saturday, June 4, 2011
102. TYPOGRAPHY ON THE WEB
Find An Appropriate Substitution For:
GOTHAM
By Using
PROXIMA NOVA
WORDCAMP RENO
Saturday, June 4, 2011
103. TYPOGRAPHY ON THE WEB
Check All Browsers
Always.
WORDCAMP RENO
Saturday, June 4, 2011
104. TYPOGRAPHY ON THE WEB
Create A Typographic
Style Guide For
Your eme
WORDCAMP RENO
Saturday, June 4, 2011
105. TYPOGRAPHY ON THE WEB
http://twentytendemo.wordpress.com/
Saturday, June 4, 2011
114. TYPOGRAPHY ON THE WEB
Follow e Tweets
WORDCAMP RENO
Saturday, June 4, 2011
115. TYPOGRAPHY ON THE WEB
FOLLOW THE TWEETS
@JasonSantaMaria @fontsquirrel
@veen @typekit
@brucel @h_
@ilovetypography @clagnut
@jessicahische @fchimero
WORDCAMP RENO
Saturday, June 4, 2011
116. TYPOGRAPHY ON THE WEB
Find Inspiration
WORDCAMP RENO
Saturday, June 4, 2011