Successfully reported this slideshow.
Your SlideShare is downloading. ×

Typography on the Web

Typography on the Web

Download to read offline

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

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

More Related Content

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Typography on the Web

  1. TYPOGRAPHY ON THE WEB WORDCAMP RENO 2011 sara cannon / sara-cannon.com / follow @saracannon Saturday, June 4, 2011
  2. ABOUT ME SARA CANNON Birmingham, AL @saracannon slideshare.net/saracannon sara-cannon.com I love WordPress! WORDCAMP RENO Saturday, 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 RENO Saturday, June 4, 2011
  4. TYPOGRAPHY ON THE WEB Web Design is 95% Typography WORDCAMP RENO Saturday, June 4, 2011
  5. TYPOGRAPHY ON THE WEB Helvetica Neue Arial Saturday, June 4, 2011
  6. TYPOGRAPHY ON THE WEB e Beautiful Web WORDCAMP RENO Saturday, June 4, 2011
  7. TYPOGRAPHY ON THE WEB Liquor Store FF Meta Serif Saturday, June 4, 2011
  8. TYPOGRAPHY AND YOUR THEME http://www. jaxvineyards.com FF Din FF Tisa Saturday, June 4, 2011
  9. TYPOGRAPHY AND YOUR THEME http://www.designmadeingermany.de/ FF Din Saturday, June 4, 2011
  10. TYPOGRAPHY ON THE WEB League Gothic Le Monde Courrier Saturday, June 4, 2011
  11. TYPOGRAPHY ON THE WEB Craft your CSS WORDCAMP RENO Saturday, June 4, 2011
  12. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  13. TYPOGRAPHY ON THE WEB LINE-HEIGHT WORDCAMP RENO Saturday, June 4, 2011
  14. TYPOGRAPHY AND YOUR THEME Saturday, June 4, 2011
  15. TYPOGRAPHY ON THE WEB LINKS: BORER-BOTTOM OR COLOR WORDCAMP RENO Saturday, June 4, 2011
  16. TYPOGRAPHY AND YOUR THEME Saturday, June 4, 2011
  17. TYPOGRAPHY ON THE WEB LETTER-SPACING WORDCAMP RENO Saturday, June 4, 2011
  18. TYPOGRAPHY ON THE WEB FONT-STACK WORDCAMP RENO Saturday, June 4, 2011
  19. TYPOGRAPHY ON THE WEB OPTIMIZE LEGIBILITY WORDCAMP RENO Saturday, June 4, 2011
  20. TYPOGRAPHY ON THE WEB OPTIMIZE LEGIBILITY WORDCAMP RENO Saturday, June 4, 2011
  21. TYPOGRAPHY ON THE WEB Web-Fonts WORDCAMP RENO Saturday, June 4, 2011
  22. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  23. TYPOGRAPHY ON THE WEB I Want To Go Saturday, June 4, 2011
  24. TYPOGRAPHY ON THE WEB Font-Stacks Saturday, June 4, 2011
  25. TYPOGRAPHY ON THE WEB @font-face WORDCAMP RENO Saturday, June 4, 2011
  26. TYPOGRAPHY ON THE WEB @FONT-FACE WORDCAMP RENO Saturday, 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 RENO Saturday, June 4, 2011
  28. TYPOGRAPHY ON THE WEB FONT-HINTING FOR THE SCREEN WORDCAMP RENO Saturday, June 4, 2011
  29. TYPOGRAPHY ON THE WEB Load Time WORDCAMP RENO Saturday, June 4, 2011
  30. TYPOGRAPHY ON THE WEB Check your licensing WORDCAMP RENO Saturday, June 4, 2011
  31. TYPOGRAPHY ON THE WEB Hand Code Font Face Kit Generator Typekit Or Other Paid Hosts Google Api WORDCAMP RENO Saturday, June 4, 2011
  32. TYPOGRAPHY ON THE WEB @FONT-FACE http://paulirish.com/2009/bulletproof-font-face- implementation-syntax/ WORDCAMP RENO Saturday, June 4, 2011
  33. TYPOGRAPHY ON THE WEB from: fontsquirrel.com WORDCAMP RENO Saturday, 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 RENO Saturday, 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 RENO Saturday, June 4, 2011
  37. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  38. TYPOGRAPHY ON THE WEB Typekit Has 81 Participating Foundries WORDCAMP RENO Saturday, June 4, 2011
  39. TYPOGRAPHY ON THE WEB Typekit Even Has Futura! WORDCAMP RENO Saturday, June 4, 2011
  40. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  41. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  42. TYPOGRAPHY ON THE WEB Test and Tweak WORDCAMP RENO Saturday, June 4, 2011
  43. TYPOGRAPHY ON THE WEB Check All Browsers Always. WORDCAMP RENO Saturday, June 4, 2011
  44. TYPOGRAPHY ON THE WEB TYPE CRUNCH!!! Saturday, June 4, 2011
  45. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  46. TYPOGRAPHY ON THE WEB Saturday, 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 RENO Saturday, June 4, 2011
  48. TYPOGRAPHY ON THE WEB DISABLE FOR ALL OF WINDOWS: User Agent WORDCAMP RENO Saturday, June 4, 2011
  49. TYPOGRAPHY ON THE WEB JUST FIREFOX CSS Hack WORDCAMP RENO Saturday, June 4, 2011
  50. TYPOGRAPHY ON THE WEB FIREFOX ON ALL OF WINDOWS User Agent WORDCAMP RENO Saturday, June 4, 2011
  51. TYPOGRAPHY ON THE WEB FIREFOX ON WINDOWS XP User Agent + CSS Hack WORDCAMP RENO Saturday, June 4, 2011
  52. TYPOGRAPHY ON THE WEB COMBATING FOUT Flash Of Unstyled Text WORDCAMP RENO Saturday, June 4, 2011
  53. TYPOGRAPHY AND YOUR THEME COMBATING FOUT blog.typekit.com/2010/05/19/typekit-and-google/ WORDCAMP RENO Saturday, June 4, 2011
  54. TYPOGRAPHY AND YOUR THEME COMBATING FOUT code.google.com/apis/webfonts/ docs/webfont_loader.html WORDCAMP RENO Saturday, June 4, 2011
  55. TYPOGRAPHY AND YOUR THEME Typekit Default Embed: Webfont Loader Embed: WORDCAMP RENO Saturday, June 4, 2011
  56. TYPOGRAPHY AND YOUR THEME WORDCAMP RENO Saturday, June 4, 2011
  57. TYPOGRAPHY AND YOUR THEME github.com/typekit/webfontloader WORDCAMP RENO Saturday, June 4, 2011
  58. TYPOGRAPHY AND YOUR THEME WORDCAMP RENO Saturday, June 4, 2011
  59. TYPOGRAPHY ON THE WEB Take it Even Further WORDCAMP RENO Saturday, June 4, 2011
  60. TYPOGRAPHY ON THE WEB STYLING CONDENSED FONTS: Fallback with Fallback Without Webfont Loader Normal Webfont Loaser WORDCAMP RENO Saturday, June 4, 2011
  61. TYPOGRAPHY ON THE WEB USE THOSE STYLE SHEETS! WORDCAMP RENO Saturday, June 4, 2011
  62. TYPOGRAPHY ON THE WEB Even More Custom Type Implementation WORDCAMP RENO Saturday, June 4, 2011
  63. TYPOGRAPHY ON THE WEB CSS3 WORDCAMP RENO Saturday, June 4, 2011
  64. TYPOGRAPHY ON THE WEB TEXT-SHADOW WORDCAMP RENO Saturday, 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 RENO Saturday, June 4, 2011
  68. TYPOGRAPHY ON THE WEB ROTATE WORDCAMP RENO Saturday, June 4, 2011
  69. TYPOGRAPHY ON THE WEB WordPress Plugins WORDCAMP RENO Saturday, June 4, 2011
  70. TYPOGRAPHY ON THE WEB PLUGIN: WP TYPOGRAPHY http://wordpress.org/extend/plugins/wp-typography/ WORDCAMP RENO Saturday, 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 RENO Saturday, June 4, 2011
  72. TYPOGRAPHY ON THE WEB Neat Type Scripts WORDCAMP RENO Saturday, 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 RENO Saturday, June 4, 2011
  74. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  75. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  76. TYPOGRAPHY ON THE WEB Saturday, 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 RENO Saturday, June 4, 2011
  78. TYPOGRAPHY ON THE WEB Saturday, 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 RENO Saturday, June 4, 2011
  80. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  81. TYPOGRAPHY ON THE WEB Other Must Havesies WORDCAMP RENO Saturday, 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 RENO Saturday, June 4, 2011
  83. TYPOGRAPHY ON THE WEB WORDCAMP RENO Saturday, 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 RENO Saturday, June 4, 2011
  85. TYPOGRAPHY ON THE WEB Saturday, 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 RENO Saturday, June 4, 2011
  87. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  88. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  89. TYPOGRAPHY ON THE WEB e Future? WORDCAMP RENO Saturday, 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 RENO Saturday, June 4, 2011
  91. TYPOGRAPHY ON THE WEB What Not To Do WORDCAMP RENO Saturday, June 4, 2011
  92. TYPOGRAPHY ON THE WEB Style Your Website With Paparyus (Sorry Every Mediterranean Restaurant Website Ever) WORDCAMP RENO Saturday, June 4, 2011
  93. TYPOGRAPHY ON THE WEB Use Non-Web-Licensed Fonts: Archer or GOTHAM (Sorry H&FJ Luvahz) WORDCAMP RENO Saturday, June 4, 2011
  94. TYPOGRAPHY ON THE WEB Saturday, 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 RENO Saturday, June 4, 2011
  96. TYPOGRAPHY ON THE WEB It’s STILL Not Cool EVEN If You Think It Is IRONIC (Sorry Jorbin) WORDCAMP RENO Saturday, June 4, 2011
  97. TYPOGRAPHY ON THE WEB e Infamous Eye Bleed WORDCAMP RENO Saturday, 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 RENO Saturday, 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 RENO Saturday, June 4, 2011
  102. TYPOGRAPHY ON THE WEB Find An Appropriate Substitution For: GOTHAM By Using PROXIMA NOVA WORDCAMP RENO Saturday, June 4, 2011
  103. TYPOGRAPHY ON THE WEB Check All Browsers Always. WORDCAMP RENO Saturday, June 4, 2011
  104. TYPOGRAPHY ON THE WEB Create A Typographic Style Guide For Your eme WORDCAMP RENO Saturday, June 4, 2011
  105. TYPOGRAPHY ON THE WEB http://twentytendemo.wordpress.com/ Saturday, June 4, 2011
  106. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  107. TYPOGRAPHY ON THE WEB Saturday, 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 RENO Saturday, June 4, 2011
  110. TYPOGRAPHY ON THE WEB blog.typekit.com Saturday, June 4, 2011
  111. TYPOGRAPHY ON THE WEB ilovetypography.com Saturday, June 4, 2011
  112. TYPOGRAPHY ON THE WEB typographica.org Saturday, June 4, 2011
  113. TYPOGRAPHY ON THE WEB webtypography.net Saturday, June 4, 2011
  114. TYPOGRAPHY ON THE WEB Follow e Tweets WORDCAMP RENO Saturday, June 4, 2011
  115. TYPOGRAPHY ON THE WEB FOLLOW THE TWEETS @JasonSantaMaria @fontsquirrel @veen @typekit @brucel @h_ @ilovetypography @clagnut @jessicahische @fchimero WORDCAMP RENO Saturday, June 4, 2011
  116. TYPOGRAPHY ON THE WEB Find Inspiration WORDCAMP RENO Saturday, June 4, 2011
  117. TYPOGRAPHY ON THE WEB siteinspire.net Saturday, June 4, 2011
  118. TYPOGRAPHY ON THE WEB typographyserved.com Saturday, June 4, 2011
  119. TYPOGRAPHY ON THE WEB ministryoftype.co.uk Saturday, June 4, 2011
  120. TYPOGRAPHY ON THE WEB dribbble.com Saturday, June 4, 2011
  121. TYPOGRAPHY ON THE WEB wordpress.org/showcase Saturday, June 4, 2011
  122. TYPOGRAPHY ON THE WEB Find Cool Fonts WORDCAMP RENO Saturday, June 4, 2011
  123. TYPOGRAPHY ON THE WEB P22 UNDERGROUND by: P22 http://typekit.com/fonts/p22-underground Saturday, June 4, 2011
  124. TYPOGRAPHY ON THE WEB Adelle by: Type Together http://typekit.com/fonts/adelle-web Saturday, June 4, 2011
  125. TYPOGRAPHY ON THE WEB http://typekit.com/fonts/ff-tisa-web-pro Saturday, June 4, 2011
  126. TYPOGRAPHY ON THE WEB “life is short, art is long” Typography is Everything. WORDCAMP RENO Saturday, June 4, 2011
  127. TYPOGRAPHY ON THE WEB ank You! sara cannon / sara-cannon.com / follow @saracannon Saturday, June 4, 2011
  128. TYPOGRAPHY ON THE WEB Type Foundries WORDCAMP RENO Saturday, June 4, 2011
  129. TYPOGRAPHY ON THE WEB H&FJ WORDCAMP RENO Saturday, June 4, 2011
  130. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  131. TYPOGRAPHY ON THE WEB Archer Saturday, June 4, 2011
  132. TYPOGRAPHY ON THE WEB GOTHAM Saturday, June 4, 2011
  133. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  134. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  135. TYPOGRAPHY ON THE WEB Veer WORDCAMP RENO Saturday, June 4, 2011
  136. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  137. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  138. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  139. TYPOGRAPHY ON THE WEB Adobe WORDCAMP RENO Saturday, June 4, 2011
  140. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  141. TYPOGRAPHY ON THE WEB e League Of Moveable Type WORDCAMP RENO Saturday, June 4, 2011
  142. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  143. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  144. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  145. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  146. TYPOGRAPHY ON THE WEB Open Source! O (open Font License) theleagueofmoveabletype.com/manifesto WORDCAMP RENO Saturday, June 4, 2011
  147. TYPOGRAPHY ON THE WEB Exljbris WORDCAMP RENO Saturday, June 4, 2011
  148. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  149. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  150. TYPOGRAPHY ON THE WEB Lost Type Pay What You Want by Riely Cran & Tyler Galpin WORDCAMP RENO Saturday, June 4, 2011
  151. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011
  152. TYPOGRAPHY ON THE WEB Saturday, June 4, 2011

×