Font swoon
•
74 likes•58,682 views
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!
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (17)
More from Sara Cannon
More from Sara Cannon (20)
Recently uploaded
Recently uploaded (20)
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
- 4. Web Design is 95% Typography informationarchitects.jp/en/the-web-is-all-about-typography-period Font: Adelle
- 7. Liquor Store FF Meta Serif trentwalton.com/2011/05/10/fit-to-scale
- 9. League Gothic Le Monde Courrier browsehappy.com
- 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
- 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
- 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
- 52. Mensch @ font-face Made By: Morgan Kuntson los ype.com
- 54. ATRAMENT @ font-face Made By: Suitcase Type Foundry suitcasetype.com
- 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
- 61. Homestead @ font-face Made By: Luke Lisi los ype.com
- 62. Ranger Made By: Evan Huwa los ype.com
- 76. Open Source! Ofl (open Font License) theleagueofmoveabletype.com/manifesto
- 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); }
- 89. Typekit / Other Paid Hosts Google Api
- 90. Fontsquirrel.com
- 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
- 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
- 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; }
- 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
- 133. kern.js kernjs.com
- 135. FitText fi extjs.com
- 137. 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; }
- 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
- 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
- 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