Font Swoon

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!

Transcript

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. Brandon Grotesque @ 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 rem vs 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. Find Inspiration
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