Times New Roman. Helvetica. Comic Sans. We’ve all got fonts we love to use or love to hate. Typography is one of those topics that’s easy to overlook, but when you bring it up, everyone has an opinion. Sara’s talk is not just for designers spending hours debating on the slant of a curly-quote or the perfect sans serif – it’s for anyone who’s ever typed, read, or even just stared at the screen or page. Because typography is essential to how we read, consume, convey, and process the written word and it’s BFF, design. Let’s take our relationship with web typography to the next level and crush on the latest fonts, check out some awesome CSS3 implementations, and find incredible inspiration for interaction, refinement and our next dates with negative space. Come fall head over heels with us at Font Swoon!

1. Sara Cannon Montreal Girl Geek
Font: Acta Poster

2. SARA CANNON
Co-founder / Creative Director At Range
sara-cannon.com @saracannon slideshare.net/saracannon
Fonts: Vitesse, ARS Maque e

3. # fontswoon
Font: Pacifico

4. Web Design is 95%
Typography
informationarchitects.jp/en/the-web-is-all-about-typography-period
Font: Adelle

6. Web Examples
Font: Omnes

7. Liquor Store
FF Meta Serif
trentwalton.com/2011/05/10/fit-to-scale

8. FF Din
FF Tisa
jaxvineyards.com

9. League Gothic
Le Monde Courrier
browsehappy.com

10. FF Din
designmadeingermany.de/magazin/5

11. Fonts! Fonts!
Fonts!
Font: Bello

12. Slab-Serif
Fonts: Droid Serif & Arvo
Serif
&

13. A
Fonts: Droid Serif & Arvo
A vs

14. Arvo
@
font-face
Made By: Anton Kovit files.korkork.com

16. Archer
Made By: H&FJ typography.com

18. Adelle
@
font-face
Made By: Type Together type-together.com

20. Adelle
JAF Facit Web

21. Cambria
@
font-face
Made By: Ascender Fonts ascenderfonts.com

23. Clarendon
@
font-face
Made By: Bitstream bitstream.com

25. Chaparral Pro
@
font-face
Made By: Adobe adobe.com

27. Droid Serif
@
font-face
Made By: Google code.google.com/android

29. Museo Slab
@
font-face
Made By: exljbris exljbris.com

31. Museo Slab

32. Vitesse
Made By: H&FJ typography.com

34. Sans-Serif
Font: ARS Maque e

35. Avenir
Made By: Adrian Frutiger Linotype.com

37. Open Sans
@
font-face
Made By: Google
google.com/webfonts/specimen/Open+Sans

39. BrandonGrotesque
@
font-face
Made By: HVD hvdfonts.com

41. DIN
@
font-face
Made By: Linotype linotype.com

43. Futura
@
font-face
Made By: BitStream Adobe.com

45. Gotham
Made By: H&FJ typography.com

47. Proxima Nova
@
font-face
Made By: Mark Simonson ms-studio.com

49. Omnes
Made By: Joshua Darden dardenstudio.com
@
font-face

51. Display Type
Font: Bello

52. Mensch
@
font-face
Made By: Morgan Kuntson los ype.com

54. ATRAMENT
@
font-face
Made By: Suitcase Type Foundry
suitcasetype.com

55. sco berkun.com
Atrament Web

56. LEAGUE GOTHIC
@
font-face
Made By: The League of Moveable Type
theleagueofmoveabletype.com

58. Bello Script
@
font-face
Made By: Underware underware.nl

59. Franchise
Made By: Derek Weathersbee los ype.com

60. bklynsoap.com
Franchise
OLD

61. Homestead
@
font-face
Made By: Luke Lisi los ype.com

62. Ranger
Made By: Evan Huwa los ype.com

63. Type Foundries
Font: Adelle

64. Lost Type
los ype.com

66. exljbris
exljbris.com

68. font font
font-font.com

70. H&FJ
typography.com

74. League of
Moveable Type
theleagueofmoveabletype.com

76. Open Source!
Ofl (open Font License)
theleagueofmoveabletype.com/manifesto

77. House Industries
houseind.com

79. ARS Type
arstype.angusrshamal.com

81. Suitcase Type
Foundry
suitcasetype.com

83. BEYOND THE
SYSTEM FONT!
Font: Brandon Grotesque

85. .selector
{
font-­‐family:
Helvetica,
sans-­‐serif;
}
.selector
{
font-­‐family:
“Droid-­‐Sans”,
Helvetica,
sans-­‐serif;
}

86. @font-face

87. @font-­‐face
{
font-­‐family:
Omnes;
src:
url(fonts/omnes.otf);
}

88. Paulirish.com/2009/
bulletproof-font-face-
implementation-syntax/

89. Typekit / Other Paid Hosts
Google Api

90. Fontsquirrel.com

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

92. typekit.com

94. CRAFT
YOUR CSS
Font: League Gothic

95. px em remvs vs

96. .selector
{
font-­‐size:
16px;
}

97. .container
{
font-­‐size:
16px;
}
.container
p
{
font-­‐size:
.4em;
}

98. Calculating REM
Target
Size
/
Base
Size
=
Value

99. html
{
font-­‐size:
16px;
}
.selector
{
/*
24
/
16
=
1.5
*/
font-­‐size:
1.5rem;
}

101. .selector
{
line-­‐height:
1.75em;
}

103. .selector1
{
letter-­‐spacing:
0em;
}
.selector2
{
letter-­‐spacing:
.025em;
}

105. h1
{
text-­‐rendering:
optimiseLegibility;
}

107. .selector
{
text-­‐shadow:
horizontal-­‐offset
vertical-­‐offset
blur
color;
}

108. .selector
{
text-­‐shadow:
1px
1px
2px
#333;
}
designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste

109. text-shadow for
readability

110. Sub-header
Aa
Sub-header

111. Menu Item
Aa
Menu Item

112. text-shadow for
effect

113. .selector
{
color:
#707070;
text-­‐shadow:
5px
5px
0px
#eee,
7px
7px
0px
#707070;
}
designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste

114. mothereffingtextshadow.com

117. .selector
{
-­‐webkit-­‐transform:
rotate(-­‐90deg);
-­‐moz-­‐transform:
rotate(-­‐90deg);
transform:
rotate(-­‐90deg);
}

119. .selector
{
background:
url(img/paint.png)
repeat,
white;
-­‐webkit-­‐text-­‐fill-­‐color:
transparent;
-­‐webkit-­‐background-­‐clip:
text;
}

120. Test &
Tweak
Font: Carton

121. check all browsers

122. TYPE CRUNCH!!!

124. Disable for IE

125. Disable for Windows

126. Disable for Firefox

127. Firefox on all of Windows

128. Neat ype
Scripts
Font: Sail
T

129. Lettering.js
le eringjs.com

133. kern.js
kernjs.com

135. FitText
fi extjs.com

137. Drop Caps

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

139. p:first-­‐child::first-­‐letter
{
float:
left;
color:
#A6EEFF;
font-­‐size:
75px;
line-­‐height:
60px;
padding-­‐top:
4px;
padding-­‐right:
8px;
padding-­‐left:
3px;
}

140. Other Tools
Font: Ranger

141. What Font
chengyinliu.com/whatfont.html

143. Google Font
Previewer
github.com/pamelafox/font-previewer-extension

145. MIN
min.artequalswork.com

148. FindInspiration

149. ilovetypography.com

151. webtypography.net

153. typographica.org

155. fontsinuse.com

157. friendsoftype.com

159. typography-daily.com

161. siteinspire.net

163. typographyserved.com

165. ministryoftype.co.uk

167. dribbble.com

169. fontsinuse.com

171. What Not to Do
Font: Futura

172. Style Your Website
With Papyrus
(Sorry Every Mediterranean Restaurant Website Ever)

173. Use Non-Web-Licensed Fonts:
Archer or GOTHAM

174. Never EVER Use The
Infamous Comic Sans
(It doesn’t matter that you think it’s good for wire-framing)

175. Even If You Think
Its Ironic

176. e Infamous
Eye Bleed

177. FREE SET OF STEAK KNIVES!!!
EYE BLEED!!!
AHHH THE BURNING!

178. EYE BLEED!!!
AHHH THE BURNING!
FREE SET OF STEAK KNIVES!!!
EYE BLEED!!!
AHHH THE BURNING!

179. What To Do
Font: DIN Light Alt

180. Create A Typographic
Style Guide For
Your eme

182. Obey Licensing

183. Follow the
Industry
Font: Museo Sab

184. Follow The Industry
@JasonSantaMaria
@veen
@brucel
@ilovetypography
@jessicahische
@fontsquirrel
@typekit
@h_
@clagnut
@fchimero

185. LIFE IS SHORT, ART IS LONG
Typography is
Everything.
CODE IS POETRY.
Font: Pacifico, League Gothic

186. Sara Cannon Montreal Girl Geek
Font: Acta Poster