Font Swoon

32b34f5d4fdde3f24996bc8c5ec38f10?s=47 Sara Cannon
April 16, 2014

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!

32b34f5d4fdde3f24996bc8c5ec38f10?s=128

Sara Cannon

April 16, 2014
Tweet

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

  5. None
  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

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

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

  19. None
  20. Adelle JAF Facit Web

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

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

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

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

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

  30. None
  31. Museo Slab

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

  33. None
  34. Sans-Serif Font: ARS Maque e

  35. Avenir Made By: Adrian Frutiger Linotype.com

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

  38. None
  39. Brandon Grotesque @ font-face Made By: HVD hvdfonts.com

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

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

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

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

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

  50. None
  51. Display Type Font: Bello

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

  53. None
  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
  57. None
  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

  65. None
  66. exljbris exljbris.com

  67. None
  68. font font font-font.com

  69. None
  70. H&FJ typography.com

  71. None
  72. None
  73. None
  74. League of Moveable Type theleagueofmoveabletype.com

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

  77. House Industries houseind.com

  78. None
  79. ARS Type arstype.angusrshamal.com

  80. None
  81. Suitcase Type Foundry suitcasetype.com

  82. None
  83. BEYOND THE SYSTEM FONT! Font: Brandon Grotesque

  84. None
  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

  93. None
  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; }
  100. None
  101. .selector  {   line-­‐height:  1.75em; }

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

     .025em; }
  104. None
  105. h1  {   text-­‐rendering:  optimiseLegibility; }

  106. None
  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

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

     rotate(-­‐90deg); }
  118. None
  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!!!

  123. None
  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

  130. None
  131. None
  132. None
  133. kern.js kernjs.com

  134. None
  135. FitText fi extjs.com

  136. None
  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

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

  144. None
  145. MIN min.artequalswork.com

  146. None
  147. None
  148. Find Inspiration

  149. ilovetypography.com

  150. None
  151. webtypography.net

  152. None
  153. typographica.org

  154. None
  155. fontsinuse.com

  156. None
  157. friendsoftype.com

  158. None
  159. typography-daily.com

  160. None
  161. siteinspire.net

  162. None
  163. typographyserved.com

  164. None
  165. ministryoftype.co.uk

  166. None
  167. dribbble.com

  168. None
  169. fontsinuse.com

  170. None
  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

  181. None
  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