Your SlideShare is downloading. ×
0
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Font swoon
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Font swoon

11,212

Published on

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 …

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!

Published in: Technology, Design
4 Comments
58 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,212
On Slideshare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
128
Comments
4
Likes
58
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Sara Cannon Montreal Girl GeekFont: Acta Poster
  2. SARA CANNONCo-founder / Creative Director At Rangesara-cannon.com @saracannon slideshare.net/saracannonFonts: Vitesse, ARS Maque e
  3. # fontswoonFont: Pacifico
  4. Web Design is 95%Typographyinformationarchitects.jp/en/the-web-is-all-about-typography-periodFont: Adelle
  5. Web ExamplesFont: Omnes
  6. Liquor StoreFF Meta Seriftrentwalton.com/2011/05/10/fit-to-scale
  7. FF DinFF Tisajaxvineyards.com
  8. League GothicLe Monde Courrierbrowsehappy.com
  9. FF Dindesignmadeingermany.de/magazin/5
  10. Fonts! Fonts!Fonts!Font: Bello
  11. Slab-SerifFonts: Droid Serif & ArvoSerif&
  12. AFonts: Droid Serif & ArvoA vs
  13. Arvo@font-faceMade By: Anton Kovit files.korkork.com
  14. ArcherMade By: H&FJ typography.com
  15. Adelle@font-faceMade By: Type Together type-together.com
  16. AdelleJAF Facit Web
  17. Cambria@font-faceMade By: Ascender Fonts ascenderfonts.com
  18. Clarendon@font-faceMade By: Bitstream bitstream.com
  19. Chaparral Pro@font-faceMade By: Adobe adobe.com
  20. Droid Serif@font-faceMade By: Google code.google.com/android
  21. Museo Slab@font-faceMade By: exljbris exljbris.com
  22. Museo Slab
  23. VitesseMade By: H&FJ typography.com
  24. Sans-SerifFont: ARS Maque e
  25. AvenirMade By: Adrian Frutiger Linotype.com
  26. Open Sans@font-faceMade By: Googlegoogle.com/webfonts/specimen/Open+Sans
  27. BrandonGrotesque@font-faceMade By: HVD hvdfonts.com
  28. DIN@font-faceMade By: Linotype linotype.com
  29. Futura@font-faceMade By: BitStream Adobe.com
  30. GothamMade By: H&FJ typography.com
  31. Proxima Nova@font-faceMade By: Mark Simonson ms-studio.com
  32. OmnesMade By: Joshua Darden dardenstudio.com@font-face
  33. Display TypeFont: Bello
  34. Mensch@font-faceMade By: Morgan Kuntson los ype.com
  35. ATRAMENT@font-faceMade By: Suitcase Type Foundrysuitcasetype.com
  36. sco berkun.comAtrament Web
  37. LEAGUE GOTHIC@font-faceMade By: The League of Moveable Typetheleagueofmoveabletype.com
  38. Bello Script@font-faceMade By: Underware underware.nl
  39. FranchiseMade By: Derek Weathersbee los ype.com
  40. bklynsoap.comFranchiseOLD
  41. Homestead@font-faceMade By: Luke Lisi los ype.com
  42. RangerMade By: Evan Huwa los ype.com
  43. Type FoundriesFont: Adelle
  44. Lost Typelos ype.com
  45. exljbrisexljbris.com
  46. font fontfont-font.com
  47. H&FJtypography.com
  48. League ofMoveable Typetheleagueofmoveabletype.com
  49. Open Source!Ofl (open Font License)theleagueofmoveabletype.com/manifesto
  50. House Industrieshouseind.com
  51. ARS Typearstype.angusrshamal.com
  52. Suitcase TypeFoundrysuitcasetype.com
  53. BEYOND THESYSTEM FONT!Font: Brandon Grotesque
  54. .selector  {     font-­‐family:  Helvetica,  sans-­‐serif;}.selector  {     font-­‐family:  “Droid-­‐Sans”,  Helvetica,  sans-­‐serif;}
  55. @font-face
  56. @font-­‐face  {     font-­‐family:  Omnes;     src:  url(fonts/omnes.otf);}
  57. Paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  58. Typekit / Other Paid HostsGoogle Api
  59. Fontsquirrel.com
  60. sprungmarker.de/wp-content/uploads/webfont-services
  61. typekit.com
  62. CRAFTYOUR CSSFont: League Gothic
  63. px em remvs vs
  64. .selector  {   font-­‐size:  16px;}
  65. .container  {   font-­‐size:  16px;}.container  p  {   font-­‐size:  .4em;}
  66. Calculating REMTarget  Size  /  Base  Size  =  Value  
  67. html  {   font-­‐size:  16px;}.selector  {   /*          24  /  16  =  1.5            */   font-­‐size:  1.5rem;}
  68. .selector  {   line-­‐height:  1.75em;}
  69. .selector1  {   letter-­‐spacing:  0em;}.selector2  {   letter-­‐spacing:  .025em;}
  70. h1  {   text-­‐rendering:  optimiseLegibility;}
  71. .selector  {   text-­‐shadow:  horizontal-­‐offset    vertical-­‐offset    blur    color;}
  72. .selector  {   text-­‐shadow:  1px  1px  2px  #333;}designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste
  73. text-shadow forreadability
  74. Sub-headerAaSub-header
  75. Menu ItemAaMenu Item
  76. text-shadow foreffect
  77. .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
  78. mothereffingtextshadow.com
  79. .selector  {   -­‐webkit-­‐transform:  rotate(-­‐90deg);   -­‐moz-­‐transform:  rotate(-­‐90deg);   transform:  rotate(-­‐90deg);}
  80. .selector  {   background:  url(img/paint.png)  repeat,  white;   -­‐webkit-­‐text-­‐fill-­‐color:  transparent;   -­‐webkit-­‐background-­‐clip:  text;}
  81. Test &TweakFont: Carton
  82. check all browsers
  83. TYPE CRUNCH!!!
  84. Disable for IE
  85. Disable for Windows
  86. Disable for Firefox
  87. Firefox on all of Windows
  88. Neat ypeScriptsFont: SailT
  89. Lettering.jsle eringjs.com
  90. kern.jskernjs.com
  91. FitTextfi extjs.com
  92. Drop Caps
  93. wordpress.org/extend/plugins/drop-caps/
  94. p:first-­‐child::first-­‐letter  {     float:  left;     color:  #A6EEFF;     font-­‐size:  75px;     line-­‐height:  60px;     padding-­‐top:  4px;     padding-­‐right:  8px;     padding-­‐left:  3px;}
  95. Other ToolsFont: Ranger
  96. What Fontchengyinliu.com/whatfont.html
  97. Google FontPreviewergithub.com/pamelafox/font-previewer-extension
  98. MINmin.artequalswork.com
  99. FindInspiration
  100. ilovetypography.com
  101. webtypography.net
  102. typographica.org
  103. fontsinuse.com
  104. friendsoftype.com
  105. typography-daily.com
  106. siteinspire.net
  107. typographyserved.com
  108. ministryoftype.co.uk
  109. dribbble.com
  110. fontsinuse.com
  111. What Not to DoFont: Futura
  112. Style Your WebsiteWith Papyrus(Sorry Every Mediterranean Restaurant Website Ever)
  113. Use Non-Web-Licensed Fonts:Archer or GOTHAM
  114. Never EVER Use TheInfamous Comic Sans(It doesn’t matter that you think it’s good for wire-framing)
  115. Even If You ThinkIts Ironic
  116. e InfamousEye Bleed
  117. FREE SET OF STEAK KNIVES!!!EYE BLEED!!!AHHH THE BURNING!
  118. EYE BLEED!!!AHHH THE BURNING!FREE SET OF STEAK KNIVES!!!EYE BLEED!!!AHHH THE BURNING!
  119. What To DoFont: DIN Light Alt
  120. Create A TypographicStyle Guide ForYour eme
  121. Obey Licensing
  122. Follow theIndustryFont: Museo Sab
  123. Follow The Industry@JasonSantaMaria@veen@brucel@ilovetypography@jessicahische@fontsquirrel@typekit@h_@clagnut@fchimero
  124. LIFE IS SHORT, ART IS LONGTypography isEverything.CODE IS POETRY.Font: Pacifico, League Gothic
  125. Sara Cannon Montreal Girl GeekFont: Acta Poster

×