Sara Cannon Montreal Girl GeekFont: Acta Poster
SARA CANNONCo-founder / Creative Director At Rangesara-cannon.com @saracannon slideshare.net/saracannonFonts: Vitesse, ARS...
# fontswoonFont: Pacifico
Web Design is 95%Typographyinformationarchitects.jp/en/the-web-is-all-about-typography-periodFont: Adelle
Web ExamplesFont: Omnes
Liquor StoreFF Meta Seriftrentwalton.com/2011/05/10/fit-to-scale
FF DinFF Tisajaxvineyards.com
League GothicLe Monde Courrierbrowsehappy.com
FF Dindesignmadeingermany.de/magazin/5
Fonts! Fonts!Fonts!Font: Bello
Slab-SerifFonts: Droid Serif & ArvoSerif&
AFonts: Droid Serif & ArvoA vs
Arvo@font-faceMade By: Anton Kovit files.korkork.com
ArcherMade By: H&FJ typography.com
Adelle@font-faceMade By: Type Together type-together.com
AdelleJAF Facit Web
Cambria@font-faceMade By: Ascender Fonts ascenderfonts.com
Clarendon@font-faceMade By: Bitstream bitstream.com
Chaparral Pro@font-faceMade By: Adobe adobe.com
Droid Serif@font-faceMade By: Google code.google.com/android
Museo Slab@font-faceMade By: exljbris exljbris.com
Museo Slab
VitesseMade By: H&FJ typography.com
Sans-SerifFont: ARS Maque e
AvenirMade By: Adrian Frutiger Linotype.com
Open Sans@font-faceMade By: Googlegoogle.com/webfonts/specimen/Open+Sans
BrandonGrotesque@font-faceMade By: HVD hvdfonts.com
DIN@font-faceMade By: Linotype linotype.com
Futura@font-faceMade By: BitStream Adobe.com
GothamMade By: H&FJ typography.com
Proxima Nova@font-faceMade By: Mark Simonson ms-studio.com
OmnesMade By: Joshua Darden dardenstudio.com@font-face
Display TypeFont: Bello
Mensch@font-faceMade By: Morgan Kuntson los ype.com
ATRAMENT@font-faceMade By: Suitcase Type Foundrysuitcasetype.com
sco berkun.comAtrament Web
LEAGUE GOTHIC@font-faceMade By: The League of Moveable Typetheleagueofmoveabletype.com
Bello Script@font-faceMade By: Underware underware.nl
FranchiseMade By: Derek Weathersbee los ype.com
bklynsoap.comFranchiseOLD
Homestead@font-faceMade By: Luke Lisi los ype.com
RangerMade By: Evan Huwa los ype.com
Type FoundriesFont: Adelle
Lost Typelos ype.com
exljbrisexljbris.com
font fontfont-font.com
H&FJtypography.com
League ofMoveable Typetheleagueofmoveabletype.com
Open Source!Ofl (open Font License)theleagueofmoveabletype.com/manifesto
House Industrieshouseind.com
ARS Typearstype.angusrshamal.com
Suitcase TypeFoundrysuitcasetype.com
BEYOND THESYSTEM FONT!Font: Brandon Grotesque
.selector	  {	   	   font-­‐family:	  Helvetica,	  sans-­‐serif;}.selector	  {	   	   font-­‐family:	  “Droid-­‐Sans”,	  H...
@font-face
@font-­‐face	  {	   	   font-­‐family:	  Omnes;	   	   src:	  url(fonts/omnes.otf);}
Paulirish.com/2009/bulletproof-font-face-implementation-syntax/
Typekit / Other Paid HostsGoogle Api
Fontsquirrel.com
sprungmarker.de/wp-content/uploads/webfont-services
typekit.com
CRAFTYOUR CSSFont: League Gothic
px em remvs vs
.selector	  {	   font-­‐size:	  16px;}
.container	  {	   font-­‐size:	  16px;}.container	  p	  {	   font-­‐size:	  .4em;}
Calculating REMTarget	  Size	  /	  Base	  Size	  =	  Value	  
html	  {	   font-­‐size:	  16px;}.selector	  {	   /*	  	  	  	  	  24	  /	  16	  =	  1.5	  	  	  	  	  	  */	   font-­‐siz...
.selector	  {	   line-­‐height:	  1.75em;}
.selector1	  {	   letter-­‐spacing:	  0em;}.selector2	  {	   letter-­‐spacing:	  .025em;}
h1	  {	   text-­‐rendering:	  optimiseLegibility;}
.selector	  {	   text-­‐shadow:	  horizontal-­‐offset	  	  vertical-­‐offset	  	  blur	  	  color;}
.selector	  {	   text-­‐shadow:	  1px	  1px	  2px	  #333;}designshack.net/articles/css/12-fun-css-text-shadows-you-can-cop...
text-shadow forreadability
Sub-headerAaSub-header
Menu ItemAaMenu Item
text-shadow foreffect
.selector	  {	   color:	  #707070;	  	   text-­‐shadow:	  5px	  5px	  0px	  #eee,	  	   7px	  7px	  0px	  #707070;}designs...
mothereffingtextshadow.com
.selector	  {	   -­‐webkit-­‐transform:	  rotate(-­‐90deg);	   -­‐moz-­‐transform:	  rotate(-­‐90deg);	   transform:	  rot...
.selector	  {	   background:	  url(img/paint.png)	  repeat,	  white;	   -­‐webkit-­‐text-­‐fill-­‐color:	  transparent;	  ...
Test &TweakFont: Carton
check all browsers
TYPE CRUNCH!!!
Disable for IE
Disable for Windows
Disable for Firefox
Firefox on all of Windows
Neat ypeScriptsFont: SailT
Lettering.jsle eringjs.com
kern.jskernjs.com
FitTextfi extjs.com
Drop Caps
wordpress.org/extend/plugins/drop-caps/
p:first-­‐child::first-­‐letter	  {	   	   float:	  left;	   	   color:	  #A6EEFF;	   	   font-­‐size:	  75px;	   	   line...
Other ToolsFont: Ranger
What Fontchengyinliu.com/whatfont.html
Google FontPreviewergithub.com/pamelafox/font-previewer-extension
MINmin.artequalswork.com
FindInspiration
ilovetypography.com
webtypography.net
typographica.org
fontsinuse.com
friendsoftype.com
typography-daily.com
siteinspire.net
typographyserved.com
ministryoftype.co.uk
dribbble.com
fontsinuse.com
What Not to DoFont: Futura
Style Your WebsiteWith Papyrus(Sorry Every Mediterranean Restaurant Website Ever)
Use Non-Web-Licensed Fonts:Archer or GOTHAM
Never EVER Use TheInfamous Comic Sans(It doesn’t matter that you think it’s good for wire-framing)
Even If You ThinkIts Ironic
e InfamousEye Bleed
FREE SET OF STEAK KNIVES!!!EYE BLEED!!!AHHH THE BURNING!
EYE BLEED!!!AHHH THE BURNING!FREE SET OF STEAK KNIVES!!!EYE BLEED!!!AHHH THE BURNING!
What To DoFont: DIN Light Alt
Create A TypographicStyle Guide ForYour eme
Obey Licensing
Follow theIndustryFont: Museo Sab
Follow The Industry@JasonSantaMaria@veen@brucel@ilovetypography@jessicahische@fontsquirrel@typekit@h_@clagnut@fchimero
LIFE IS SHORT, ART IS LONGTypography isEverything.CODE IS POETRY.Font: Pacifico, League Gothic
Sara Cannon Montreal Girl GeekFont: Acta Poster
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
×

Font swoon

11,299

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 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,299
On Slideshare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
130
Comments
4
Likes
58
Embeds 0
No embeds

No notes for slide

Transcript of "Font swoon"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×