Typography on the Web

30,059 views
27,106 views

Published on

Implementation of Typography on the web, in WordPress, cool web fonts, and where things are going. - A Talk at WordCamp Reno June 4th, 2011.

Published in: Technology, Design
8 Comments
72 Likes
Statistics
Notes
No Downloads
Views
Total views
30,059
On SlideShare
0
From Embeds
0
Number of Embeds
2,359
Actions
Shares
0
Downloads
568
Comments
8
Likes
72
Embeds 0
No embeds

No notes for slide

Typography on the Web

  1. TYPOGRAPHY ON THE WEB WORDCAMP RENO 2011 sara cannon / sara-cannon.com / follow @saracannonSaturday, June 4, 2011
  2. ABOUT ME SARA CANNON Birmingham, AL @saracannon slideshare.net/saracannon sara-cannon.com I love WordPress! WORDCAMP RENOSaturday, June 4, 2011
  3. TYPOGRAPHY ON THE WEB FONTS USED IN THIS PRESENTATION: Chaparral Pro by Adobe http://typekit.com/fonts/chaparral-pro LEAGUE GOTHIC by e League of Movable Type http://typekit.com/fonts/league-gothic WORDCAMP RENOSaturday, June 4, 2011
  4. TYPOGRAPHY ON THE WEB Web Design is 95% Typography WORDCAMP RENOSaturday, June 4, 2011
  5. TYPOGRAPHY ON THE WEB Helvetica Neue ArialSaturday, June 4, 2011
  6. TYPOGRAPHY ON THE WEB e Beautiful Web WORDCAMP RENOSaturday, June 4, 2011
  7. TYPOGRAPHY ON THE WEB Liquor Store FF Meta SerifSaturday, June 4, 2011
  8. TYPOGRAPHY AND YOUR THEME http://www. jaxvineyards.com FF Din FF TisaSaturday, June 4, 2011
  9. TYPOGRAPHY AND YOUR THEME http://www.designmadeingermany.de/ FF DinSaturday, June 4, 2011
  10. TYPOGRAPHY ON THE WEB League Gothic Le Monde CourrierSaturday, June 4, 2011
  11. TYPOGRAPHY ON THE WEB Craft your CSS WORDCAMP RENOSaturday, June 4, 2011
  12. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  13. TYPOGRAPHY ON THE WEB LINE-HEIGHT WORDCAMP RENOSaturday, June 4, 2011
  14. TYPOGRAPHY AND YOUR THEMESaturday, June 4, 2011
  15. TYPOGRAPHY ON THE WEB LINKS: BORER-BOTTOM OR COLOR WORDCAMP RENOSaturday, June 4, 2011
  16. TYPOGRAPHY AND YOUR THEMESaturday, June 4, 2011
  17. TYPOGRAPHY ON THE WEB LETTER-SPACING WORDCAMP RENOSaturday, June 4, 2011
  18. TYPOGRAPHY ON THE WEB FONT-STACK WORDCAMP RENOSaturday, June 4, 2011
  19. TYPOGRAPHY ON THE WEB OPTIMIZE LEGIBILITY WORDCAMP RENOSaturday, June 4, 2011
  20. TYPOGRAPHY ON THE WEB OPTIMIZE LEGIBILITY WORDCAMP RENOSaturday, June 4, 2011
  21. TYPOGRAPHY ON THE WEB Web-Fonts WORDCAMP RENOSaturday, June 4, 2011
  22. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  23. TYPOGRAPHY ON THE WEB I Want To GoSaturday, June 4, 2011
  24. TYPOGRAPHY ON THE WEB Font-StacksSaturday, June 4, 2011
  25. TYPOGRAPHY ON THE WEB @font-face WORDCAMP RENOSaturday, June 4, 2011
  26. TYPOGRAPHY ON THE WEB @FONT-FACE WORDCAMP RENOSaturday, June 4, 2011
  27. TYPOGRAPHY ON THE WEB Why shouldn’t I try to use my print fonts that I paid so much for? WORDCAMP RENOSaturday, June 4, 2011
  28. TYPOGRAPHY ON THE WEB FONT-HINTING FOR THE SCREEN WORDCAMP RENOSaturday, June 4, 2011
  29. TYPOGRAPHY ON THE WEB Load Time WORDCAMP RENOSaturday, June 4, 2011
  30. TYPOGRAPHY ON THE WEB Check your licensing WORDCAMP RENOSaturday, June 4, 2011
  31. TYPOGRAPHY ON THE WEB Hand Code Font Face Kit Generator Typekit Or Other Paid Hosts Google Api WORDCAMP RENOSaturday, June 4, 2011
  32. TYPOGRAPHY ON THE WEB @FONT-FACE http://paulirish.com/2009/bulletproof-font-face- implementation-syntax/ WORDCAMP RENOSaturday, June 4, 2011
  33. TYPOGRAPHY ON THE WEB from: fontsquirrel.com WORDCAMP RENOSaturday, June 4, 2011
  34. TYPOGRAPHY ON THE WEB Fontsquirrel.com @font-face Generator WOFF - e Emerging Standard Format. EOT (light) - Targets Internet Explorer. SVG - Targets Webkit Mobile Platforms (iPhone And IPad) WORDCAMP RENOSaturday, June 4, 2011
  35. TYPOGRAPHY ON THE WEB http://sprungmarker.de/wp-content/uploads/webfont-services/Saturday, June 4, 2011
  36. TYPOGRAPHY ON THE WEB typekit.com WORDCAMP RENOSaturday, June 4, 2011
  37. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  38. TYPOGRAPHY ON THE WEB Typekit Has 81 Participating Foundries WORDCAMP RENOSaturday, June 4, 2011
  39. TYPOGRAPHY ON THE WEB Typekit Even Has Futura! WORDCAMP RENOSaturday, June 4, 2011
  40. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  41. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  42. TYPOGRAPHY ON THE WEB Test and Tweak WORDCAMP RENOSaturday, June 4, 2011
  43. TYPOGRAPHY ON THE WEB Check All Browsers Always. WORDCAMP RENOSaturday, June 4, 2011
  44. TYPOGRAPHY ON THE WEB TYPE CRUNCH!!!Saturday, June 4, 2011
  45. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  46. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  47. TYPOGRAPHY ON THE WEB DISABLE TYPEKIT JUST FOR IE6 - load IE6 Fonts in Style Sheet within Conditional Comments in the Header WORDCAMP RENOSaturday, June 4, 2011
  48. TYPOGRAPHY ON THE WEB DISABLE FOR ALL OF WINDOWS: User Agent WORDCAMP RENOSaturday, June 4, 2011
  49. TYPOGRAPHY ON THE WEB JUST FIREFOX CSS Hack WORDCAMP RENOSaturday, June 4, 2011
  50. TYPOGRAPHY ON THE WEB FIREFOX ON ALL OF WINDOWS User Agent WORDCAMP RENOSaturday, June 4, 2011
  51. TYPOGRAPHY ON THE WEB FIREFOX ON WINDOWS XP User Agent + CSS Hack WORDCAMP RENOSaturday, June 4, 2011
  52. TYPOGRAPHY ON THE WEB COMBATING FOUT Flash Of Unstyled Text WORDCAMP RENOSaturday, June 4, 2011
  53. TYPOGRAPHY AND YOUR THEME COMBATING FOUT blog.typekit.com/2010/05/19/typekit-and-google/ WORDCAMP RENOSaturday, June 4, 2011
  54. TYPOGRAPHY AND YOUR THEME COMBATING FOUT code.google.com/apis/webfonts/ docs/webfont_loader.html WORDCAMP RENOSaturday, June 4, 2011
  55. TYPOGRAPHY AND YOUR THEME Typekit Default Embed: Webfont Loader Embed: WORDCAMP RENOSaturday, June 4, 2011
  56. TYPOGRAPHY AND YOUR THEME WORDCAMP RENOSaturday, June 4, 2011
  57. TYPOGRAPHY AND YOUR THEME github.com/typekit/webfontloader WORDCAMP RENOSaturday, June 4, 2011
  58. TYPOGRAPHY AND YOUR THEME WORDCAMP RENOSaturday, June 4, 2011
  59. TYPOGRAPHY ON THE WEB Take it Even Further WORDCAMP RENOSaturday, June 4, 2011
  60. TYPOGRAPHY ON THE WEB STYLING CONDENSED FONTS: Fallback with Fallback Without Webfont Loader Normal Webfont Loaser WORDCAMP RENOSaturday, June 4, 2011
  61. TYPOGRAPHY ON THE WEB USE THOSE STYLE SHEETS! WORDCAMP RENOSaturday, June 4, 2011
  62. TYPOGRAPHY ON THE WEB Even More Custom Type Implementation WORDCAMP RENOSaturday, June 4, 2011
  63. TYPOGRAPHY ON THE WEB CSS3 WORDCAMP RENOSaturday, June 4, 2011
  64. TYPOGRAPHY ON THE WEB TEXT-SHADOW WORDCAMP RENOSaturday, June 4, 2011
  65. TYPOGRAPHY ON THE WEB http://mothereffingtextshadow.com/Saturday, June 4, 2011
  66. TYPOGRAPHY ON THE WEB http://mothereffingtextshadow.com/Saturday, June 4, 2011
  67. TYPOGRAPHY ON THE WEB ROTATE http://www.cssplayer.com/blog/date-display-technique- with-text-rotation/ WORDCAMP RENOSaturday, June 4, 2011
  68. TYPOGRAPHY ON THE WEB ROTATE WORDCAMP RENOSaturday, June 4, 2011
  69. TYPOGRAPHY ON THE WEB WordPress Plugins WORDCAMP RENOSaturday, June 4, 2011
  70. TYPOGRAPHY ON THE WEB PLUGIN: WP TYPOGRAPHY http://wordpress.org/extend/plugins/wp-typography/ WORDCAMP RENOSaturday, June 4, 2011
  71. TYPOGRAPHY ON THE WEB PLUGIN: DROP CAPS http://wordpress.org/extend/plugins/drop-caps/ • override their css with your own • works across browsers with not too much tweaking WORDCAMP RENOSaturday, June 4, 2011
  72. TYPOGRAPHY ON THE WEB Neat Type Scripts WORDCAMP RENOSaturday, June 4, 2011
  73. TYPOGRAPHY ON THE WEB SCRIPT: LETTERING.JS http://letteringjs.com/ • Takes each letter in a headline and wraps it in a Span • Allows for individual letter manipulation • Not recommended for large chunks WORDCAMP RENOSaturday, June 4, 2011
  74. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  75. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  76. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  77. TYPOGRAPHY ON THE WEB SCRIPT: KERN.JS http://www.kernjs.com/ • Allows in-browser kerning of lettering • Generates code for kerned copy • Works with Lettering.js WORDCAMP RENOSaturday, June 4, 2011
  78. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  79. TYPOGRAPHY ON THE WEB SCRIPT: FIT TEXT http:// ttextjs.com/ • Stretches headline to t container • Useful for uid/responsive layouts WORDCAMP RENOSaturday, June 4, 2011
  80. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  81. TYPOGRAPHY ON THE WEB Other Must Havesies WORDCAMP RENOSaturday, June 4, 2011
  82. TYPOGRAPHY ON THE WEB EXTENSION: WHATFONT http://chengyinliu.com/whatfont.html • Find out what fonts and their CSS others are using • Sharpen your ninja font-detection skillz! (yes that is a ninja skill) WORDCAMP RENOSaturday, June 4, 2011
  83. TYPOGRAPHY ON THE WEB WORDCAMP RENOSaturday, June 4, 2011
  84. TYPOGRAPHY ON THE WEB EXTENSION: GOOGLE FONT PREVIEWER https://github.com/pamelafox/font-previewer- extension • Test run a font on your site without coding • using web-fonts only from Google’s web-font API WORDCAMP RENOSaturday, June 4, 2011
  85. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  86. TYPOGRAPHY ON THE WEB BOOKMARKLET: MIN http://min.artequalswork.com/ • Shows your site if it was just type • Gets rid of all images and leaves just the type layout • Analyze Typographic Hierarchy WORDCAMP RENOSaturday, June 4, 2011
  87. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  88. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  89. TYPOGRAPHY ON THE WEB e Future? WORDCAMP RENOSaturday, June 4, 2011
  90. TYPOGRAPHY ON THE WEB THE FUTURE? • Richard Ritter of Fontdeck.com @clanut •Open Type • Ligatures • Multiple Alphabet Sets • Multiple Numeric Sets • All through CSS Classes! WORDCAMP RENOSaturday, June 4, 2011
  91. TYPOGRAPHY ON THE WEB What Not To Do WORDCAMP RENOSaturday, June 4, 2011
  92. TYPOGRAPHY ON THE WEB Style Your Website With Paparyus (Sorry Every Mediterranean Restaurant Website Ever) WORDCAMP RENOSaturday, June 4, 2011
  93. TYPOGRAPHY ON THE WEB Use Non-Web-Licensed Fonts: Archer or GOTHAM (Sorry H&FJ Luvahz) WORDCAMP RENOSaturday, June 4, 2011
  94. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  95. TYPOGRAPHY ON THE WEB Never EVER Use The Infamous Comic Sans (It doesn’t matter that you think it’s good for wire-framing) WORDCAMP RENOSaturday, June 4, 2011
  96. TYPOGRAPHY ON THE WEB It’s STILL Not Cool EVEN If You Think It Is IRONIC (Sorry Jorbin) WORDCAMP RENOSaturday, June 4, 2011
  97. TYPOGRAPHY ON THE WEB e Infamous Eye Bleed WORDCAMP RENOSaturday, June 4, 2011
  98. TYPOGRAPHY ON THE WEB EYE BLEED!!! AHHH THE BURNING! FREE SET OF STEAK KNIVES!!!Saturday, June 4, 2011
  99. TYPOGRAPHY ON THE WEB e Even More Infamous EYE BLEED WORDCAMP RENOSaturday, June 4, 2011
  100. TYPOGRAPHY ON THE WEB EYE BLEED!!! AHHH THE BURNING! FREE SET OF STEAK KNIVES!!!Saturday, June 4, 2011
  101. TYPOGRAPHY ON THE WEB What To Do WORDCAMP RENOSaturday, June 4, 2011
  102. TYPOGRAPHY ON THE WEB Find An Appropriate Substitution For: GOTHAM By Using PROXIMA NOVA WORDCAMP RENOSaturday, June 4, 2011
  103. TYPOGRAPHY ON THE WEB Check All Browsers Always. WORDCAMP RENOSaturday, June 4, 2011
  104. TYPOGRAPHY ON THE WEB Create A Typographic Style Guide For Your eme WORDCAMP RENOSaturday, June 4, 2011
  105. TYPOGRAPHY ON THE WEB http://twentytendemo.wordpress.com/Saturday, June 4, 2011
  106. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  107. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  108. TYPOGRAPHY ON THE WEB http://twentyelevendemo.wordpress.com/Saturday, June 4, 2011
  109. TYPOGRAPHY ON THE WEB Follow e Industry WORDCAMP RENOSaturday, June 4, 2011
  110. TYPOGRAPHY ON THE WEB blog.typekit.comSaturday, June 4, 2011
  111. TYPOGRAPHY ON THE WEB ilovetypography.comSaturday, June 4, 2011
  112. TYPOGRAPHY ON THE WEB typographica.orgSaturday, June 4, 2011
  113. TYPOGRAPHY ON THE WEB webtypography.netSaturday, June 4, 2011
  114. TYPOGRAPHY ON THE WEB Follow e Tweets WORDCAMP RENOSaturday, June 4, 2011
  115. TYPOGRAPHY ON THE WEB FOLLOW THE TWEETS @JasonSantaMaria @fontsquirrel @veen @typekit @brucel @h_ @ilovetypography @clagnut @jessicahische @fchimero WORDCAMP RENOSaturday, June 4, 2011
  116. TYPOGRAPHY ON THE WEB Find Inspiration WORDCAMP RENOSaturday, June 4, 2011
  117. TYPOGRAPHY ON THE WEB siteinspire.netSaturday, June 4, 2011
  118. TYPOGRAPHY ON THE WEB typographyserved.comSaturday, June 4, 2011
  119. TYPOGRAPHY ON THE WEB ministryoftype.co.ukSaturday, June 4, 2011
  120. TYPOGRAPHY ON THE WEB dribbble.comSaturday, June 4, 2011
  121. TYPOGRAPHY ON THE WEB wordpress.org/showcaseSaturday, June 4, 2011
  122. TYPOGRAPHY ON THE WEB Find Cool Fonts WORDCAMP RENOSaturday, June 4, 2011
  123. TYPOGRAPHY ON THE WEB P22 UNDERGROUND by: P22 http://typekit.com/fonts/p22-undergroundSaturday, June 4, 2011
  124. TYPOGRAPHY ON THE WEB Adelle by: Type Together http://typekit.com/fonts/adelle-webSaturday, June 4, 2011
  125. TYPOGRAPHY ON THE WEB http://typekit.com/fonts/ff-tisa-web-proSaturday, June 4, 2011
  126. TYPOGRAPHY ON THE WEB “life is short, art is long” Typography is Everything. WORDCAMP RENOSaturday, June 4, 2011
  127. TYPOGRAPHY ON THE WEB ank You! sara cannon / sara-cannon.com / follow @saracannonSaturday, June 4, 2011
  128. TYPOGRAPHY ON THE WEB Type Foundries WORDCAMP RENOSaturday, June 4, 2011
  129. TYPOGRAPHY ON THE WEB H&FJ WORDCAMP RENOSaturday, June 4, 2011
  130. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  131. TYPOGRAPHY ON THE WEB ArcherSaturday, June 4, 2011
  132. TYPOGRAPHY ON THE WEB GOTHAMSaturday, June 4, 2011
  133. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  134. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  135. TYPOGRAPHY ON THE WEB Veer WORDCAMP RENOSaturday, June 4, 2011
  136. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  137. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  138. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  139. TYPOGRAPHY ON THE WEB Adobe WORDCAMP RENOSaturday, June 4, 2011
  140. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  141. TYPOGRAPHY ON THE WEB e League Of Moveable Type WORDCAMP RENOSaturday, June 4, 2011
  142. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  143. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  144. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  145. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  146. TYPOGRAPHY ON THE WEB Open Source! O (open Font License) theleagueofmoveabletype.com/manifesto WORDCAMP RENOSaturday, June 4, 2011
  147. TYPOGRAPHY ON THE WEB Exljbris WORDCAMP RENOSaturday, June 4, 2011
  148. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  149. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  150. TYPOGRAPHY ON THE WEB Lost Type Pay What You Want by Riely Cran & Tyler Galpin WORDCAMP RENOSaturday, June 4, 2011
  151. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
  152. TYPOGRAPHY ON THE WEBSaturday, June 4, 2011

×