Implementation of Typography on the web, in WordPress, cool web fonts, and where things are going. - A Talk at WordCamp Reno June 4th, 2011.

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

5. TYPOGRAPHY ON THE WEB
Helvetica Neue
Arial
Saturday, June 4, 2011

6. TYPOGRAPHY ON THE WEB
e Beautiful Web
WORDCAMP RENO
Saturday, June 4, 2011

7. TYPOGRAPHY ON THE WEB
Liquor Store
FF Meta Serif
Saturday, June 4, 2011

8. TYPOGRAPHY AND YOUR THEME
http://www. jaxvineyards.com
FF Din
FF Tisa
Saturday, June 4, 2011

9. TYPOGRAPHY AND YOUR THEME
http://www.designmadeingermany.de/
FF Din
Saturday, June 4, 2011

10. TYPOGRAPHY ON THE WEB
League Gothic
Le Monde Courrier
Saturday, June 4, 2011

11. TYPOGRAPHY ON THE WEB
Craft your CSS
WORDCAMP RENO
Saturday, June 4, 2011

12. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

13. TYPOGRAPHY ON THE WEB
LINE-HEIGHT
WORDCAMP RENO
Saturday, June 4, 2011

14. TYPOGRAPHY AND YOUR THEME
Saturday, June 4, 2011

15. TYPOGRAPHY ON THE WEB
LINKS: BORER-BOTTOM OR COLOR
WORDCAMP RENO
Saturday, June 4, 2011

16. TYPOGRAPHY AND YOUR THEME
Saturday, June 4, 2011

17. TYPOGRAPHY ON THE WEB
LETTER-SPACING
WORDCAMP RENO
Saturday, June 4, 2011

18. TYPOGRAPHY ON THE WEB
FONT-STACK
WORDCAMP RENO
Saturday, June 4, 2011

19. TYPOGRAPHY ON THE WEB
OPTIMIZE LEGIBILITY
WORDCAMP RENO
Saturday, June 4, 2011

20. TYPOGRAPHY ON THE WEB
OPTIMIZE LEGIBILITY
WORDCAMP RENO
Saturday, June 4, 2011

21. TYPOGRAPHY ON THE WEB
Web-Fonts
WORDCAMP RENO
Saturday, June 4, 2011

22. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

23. TYPOGRAPHY ON THE WEB
I Want To Go
Saturday, June 4, 2011

24. TYPOGRAPHY ON THE WEB
Font-Stacks
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

37. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

38. TYPOGRAPHY ON THE WEB
Typekit Has 81
Participating Foundries
WORDCAMP RENO
Saturday, June 4, 2011

39. TYPOGRAPHY ON THE WEB
Typekit Even Has Futura!
WORDCAMP RENO
Saturday, June 4, 2011

40. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

41. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

42. TYPOGRAPHY ON THE WEB
Test and Tweak
WORDCAMP RENO
Saturday, June 4, 2011

43. TYPOGRAPHY ON THE WEB
Check All Browsers
Always.
WORDCAMP RENO
Saturday, June 4, 2011

44. TYPOGRAPHY ON THE WEB
TYPE CRUNCH!!!
Saturday, June 4, 2011

45. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

46. TYPOGRAPHY ON THE WEB
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

56. TYPOGRAPHY AND YOUR THEME
WORDCAMP RENO
Saturday, June 4, 2011

57. TYPOGRAPHY AND YOUR THEME
github.com/typekit/webfontloader
WORDCAMP RENO
Saturday, June 4, 2011

58. TYPOGRAPHY AND YOUR THEME
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

63. TYPOGRAPHY ON THE WEB
CSS3
WORDCAMP RENO
Saturday, June 4, 2011

64. TYPOGRAPHY ON THE WEB
TEXT-SHADOW
WORDCAMP RENO
Saturday, June 4, 2011

65. TYPOGRAPHY ON THE WEB
http://mothereffingtextshadow.com/
Saturday, June 4, 2011

66. TYPOGRAPHY ON THE WEB
http://mothereffingtextshadow.com/
Saturday, June 4, 2011

67. TYPOGRAPHY ON THE WEB
ROTATE
http://www.cssplayer.com/blog/date-display-technique-
with-text-rotation/
WORDCAMP RENO
Saturday, June 4, 2011

68. TYPOGRAPHY ON THE WEB
ROTATE
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

74. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

75. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

76. TYPOGRAPHY ON THE WEB
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

78. TYPOGRAPHY ON THE WEB
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

80. TYPOGRAPHY ON THE WEB
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

83. TYPOGRAPHY ON THE WEB
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

85. TYPOGRAPHY ON THE WEB
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

87. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

88. TYPOGRAPHY ON THE WEB
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

94. TYPOGRAPHY ON THE WEB
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

106. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

107. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

108. TYPOGRAPHY ON THE WEB
http://twentyelevendemo.wordpress.com/
Saturday, June 4, 2011

109. TYPOGRAPHY ON THE WEB
Follow e Industry
WORDCAMP RENO
Saturday, June 4, 2011

110. TYPOGRAPHY ON THE WEB
blog.typekit.com
Saturday, June 4, 2011

111. TYPOGRAPHY ON THE WEB
ilovetypography.com
Saturday, June 4, 2011

112. TYPOGRAPHY ON THE WEB
typographica.org
Saturday, June 4, 2011

113. TYPOGRAPHY ON THE WEB
webtypography.net
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

117. TYPOGRAPHY ON THE WEB
siteinspire.net
Saturday, June 4, 2011

118. TYPOGRAPHY ON THE WEB
typographyserved.com
Saturday, June 4, 2011

119. TYPOGRAPHY ON THE WEB
ministryoftype.co.uk
Saturday, June 4, 2011

120. TYPOGRAPHY ON THE WEB
dribbble.com
Saturday, June 4, 2011

121. TYPOGRAPHY ON THE WEB
wordpress.org/showcase
Saturday, June 4, 2011

122. TYPOGRAPHY ON THE WEB
Find Cool Fonts
WORDCAMP RENO
Saturday, June 4, 2011

123. TYPOGRAPHY ON THE WEB
P22 UNDERGROUND
by: P22
http://typekit.com/fonts/p22-underground
Saturday, June 4, 2011

124. TYPOGRAPHY ON THE WEB
Adelle
by: Type Together
http://typekit.com/fonts/adelle-web
Saturday, June 4, 2011

125. TYPOGRAPHY ON THE WEB
http://typekit.com/fonts/ff-tisa-web-pro
Saturday, June 4, 2011

126. TYPOGRAPHY ON THE WEB
“life is short, art is long”
Typography is
Everything.
WORDCAMP RENO
Saturday, June 4, 2011

127. TYPOGRAPHY ON THE WEB
ank You!
sara cannon / sara-cannon.com / follow @saracannon
Saturday, June 4, 2011

128. TYPOGRAPHY ON THE WEB
Type Foundries
WORDCAMP RENO
Saturday, June 4, 2011

129. TYPOGRAPHY ON THE WEB
H&FJ
WORDCAMP RENO
Saturday, June 4, 2011

130. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

131. TYPOGRAPHY ON THE WEB
Archer
Saturday, June 4, 2011

132. TYPOGRAPHY ON THE WEB
GOTHAM
Saturday, June 4, 2011

133. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

134. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

135. TYPOGRAPHY ON THE WEB
Veer
WORDCAMP RENO
Saturday, June 4, 2011

136. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

137. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

138. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

139. TYPOGRAPHY ON THE WEB
Adobe
WORDCAMP RENO
Saturday, June 4, 2011

140. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

141. TYPOGRAPHY ON THE WEB
e League Of
Moveable Type
WORDCAMP RENO
Saturday, June 4, 2011

142. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

143. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

144. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

145. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

146. TYPOGRAPHY ON THE WEB
Open Source!
O (open Font License)
theleagueofmoveabletype.com/manifesto
WORDCAMP RENO
Saturday, June 4, 2011

147. TYPOGRAPHY ON THE WEB
Exljbris
WORDCAMP RENO
Saturday, June 4, 2011

148. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

149. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

150. TYPOGRAPHY ON THE WEB
Lost Type
Pay What You Want
by Riely Cran & Tyler Galpin
WORDCAMP RENO
Saturday, June 4, 2011

151. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011

152. TYPOGRAPHY ON THE WEB
Saturday, June 4, 2011