Font swoon
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Font swoon

on

  • 10,796 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 ...

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!

Statistics

Views

Total Views
10,796
Views on SlideShare
6,719
Embed Views
4,077

Actions

Likes
56
Downloads
113
Comments
4

47 Embeds 4,077

http://ran.ge 3817
https://twitter.com 103
http://dev.ran.ge 23
http://localhost 14
http://herrthees.de 12
http://ehd.development.com 9
http://range.dev 8
http://stagingarea.staffordshirechambers.co.uk 8
http://nginx.verdadefeminina.com.br 6
http://wysetc.stage.typify.nl 5
http://drmasonsclasses.com 5
http://histrionteatro.es 5
http://www.themxgroup.com 5
http://firesafetyconsultants.jhdwebdev.com 4
http://episcopaldiocesefortworth.org 4
http://impetusxmax.dev 3
http://team-eight.com 3
http://laagujapublicitaria.controlpublicidad.com 3
http://www.pedalsdemenorca.com 3
http://bomb.ran.ge 2
http://www.conceptweb.com.br 2
http://www.metrix.co.kr 2
http://aestheticrealism.ycproduction1.com 2
http://skeletoncase.com 2
http://id.getusb.info 2
http://cde.dev 2
http://pruebaiv.de.mialias.net 2
http://rachelshae.com 2
https://www.google.at 1
http://www.roqueta-torras.com 1
http://www.swmprobation.gov.uk 1
http://www.newsblur.com 1
http://translate.googleusercontent.com 1
https://mail.google.com 1
http://reader.aol.com 1
http://virginiamilitaryrelocationguide.com 1
http://tubeprofitpro.com 1
http://127.0.0.1 1
http://www.freemz.nl 1
http://isic-association.stage.typify.nl 1
http://www.ncsciencefestival.org 1
http://redspotgroup.co.uk 1
http://www.edret.cat 1
http://www.chatnetwerk.nl 1
http://fever.kroppenstedt.net 1
http://wp.minin.lan 1
http://feedly.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Font swoon Presentation 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