Typography on the Web

  • 19,400 views
Uploaded 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.

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 in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
19,400
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
545
Comments
8
Likes
70

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. 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