TYPOGRAPHY ON THE WEB                            WORDCAMP RENO 2011    sara cannon / sara-cannon.com / follow @saracannonS...
ABOUT ME                                              SARA CANNON                                              Birmingham,...
TYPOGRAPHY ON THE WEB                FONTS USED IN THIS PRESENTATION:                Chaparral Pro by Adobe               ...
TYPOGRAPHY ON THE WEB                         Web Design is 95%                           Typography                      ...
TYPOGRAPHY ON THE WEB                         Helvetica Neue                 ArialSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                         e Beautiful Web                                                    WORDCAMP...
TYPOGRAPHY ON THE WEB                         Liquor Store                                            FF Meta SerifSaturda...
TYPOGRAPHY AND YOUR THEME                         http://www. jaxvineyards.com                              FF Din        ...
TYPOGRAPHY AND YOUR THEME                         http://www.designmadeingermany.de/                                     F...
TYPOGRAPHY ON THE WEB                         League Gothic                                             Le Monde CourrierS...
TYPOGRAPHY ON THE WEB                         Craft your CSS                                                   WORDCAMP RE...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                LINE-HEIGHT                                                      WORDCAMP RENOSaturda...
TYPOGRAPHY AND YOUR THEMESaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                LINKS: BORER-BOTTOM OR COLOR                                                  WORDCAM...
TYPOGRAPHY AND YOUR THEMESaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                LETTER-SPACING                                                  WORDCAMP RENOSaturday...
TYPOGRAPHY ON THE WEB                FONT-STACK                                                     WORDCAMP RENOSaturday,...
TYPOGRAPHY ON THE WEB                OPTIMIZE LEGIBILITY                                                   WORDCAMP RENOSa...
TYPOGRAPHY ON THE WEB                OPTIMIZE LEGIBILITY                                                   WORDCAMP RENOSa...
TYPOGRAPHY ON THE WEB                         Web-Fonts                                                 WORDCAMP RENOSatur...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                           I Want To GoSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                           Font-StacksSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                         @font-face                                                 WORDCAMP RENOSatu...
TYPOGRAPHY ON THE WEB                @FONT-FACE                                                     WORDCAMP RENOSaturday,...
TYPOGRAPHY ON THE WEB             Why shouldn’t I try to use my print               fonts that I paid so much for?        ...
TYPOGRAPHY ON THE WEB                FONT-HINTING FOR THE SCREEN                                                   WORDCAM...
TYPOGRAPHY ON THE WEB                              Load Time                                                 WORDCAMP RENO...
TYPOGRAPHY ON THE WEB                         Check your licensing                                                 WORDCAM...
TYPOGRAPHY ON THE WEB                                 Hand Code                           Font Face Kit Generator         ...
TYPOGRAPHY ON THE WEB                @FONT-FACE                http://paulirish.com/2009/bulletproof-font-face-           ...
TYPOGRAPHY ON THE WEB                           from: fontsquirrel.com                                                    ...
TYPOGRAPHY ON THE WEB                                 Fontsquirrel.com                               @font-face Generator ...
TYPOGRAPHY ON THE WEB      http://sprungmarker.de/wp-content/uploads/webfont-services/Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB                         typekit.com                                                 WORDCAMP RENOSat...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                           Typekit Has 81                         Participating Foundries            ...
TYPOGRAPHY ON THE WEB                         Typekit Even Has Futura!                                                    ...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                         Test and Tweak                                                   WORDCAMP RE...
TYPOGRAPHY ON THE WEB                         Check All Browsers                            Always.                       ...
TYPOGRAPHY ON THE WEB               TYPE CRUNCH!!!Saturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                DISABLE TYPEKIT JUST FOR IE6                 - load IE6 Fonts in Style Sheet within C...
TYPOGRAPHY ON THE WEB                DISABLE FOR ALL OF WINDOWS:                 User Agent                               ...
TYPOGRAPHY ON THE WEB                JUST FIREFOX                  CSS Hack                                               ...
TYPOGRAPHY ON THE WEB                FIREFOX ON ALL OF WINDOWS                User Agent                                  ...
TYPOGRAPHY ON THE WEB                FIREFOX ON WINDOWS XP                User Agent + CSS Hack                           ...
TYPOGRAPHY ON THE WEB                COMBATING FOUT                                 Flash                                 ...
TYPOGRAPHY AND YOUR THEME                COMBATING FOUT          blog.typekit.com/2010/05/19/typekit-and-google/          ...
TYPOGRAPHY AND YOUR THEME                COMBATING FOUT                code.google.com/apis/webfonts/                docs/...
TYPOGRAPHY AND YOUR THEME                Typekit Default Embed:                Webfont Loader Embed:                      ...
TYPOGRAPHY AND YOUR THEME                                                     WORDCAMP RENOSaturday, June 4, 2011
TYPOGRAPHY AND YOUR THEME              github.com/typekit/webfontloader                                                   ...
TYPOGRAPHY AND YOUR THEME                                                     WORDCAMP RENOSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                   Take it Even Further                                                 WORDCAMP RENO...
TYPOGRAPHY ON THE WEB                STYLING CONDENSED FONTS:               Fallback with                 Fallback Without...
TYPOGRAPHY ON THE WEB                USE THOSE STYLE SHEETS!                                                   WORDCAMP RE...
TYPOGRAPHY ON THE WEB                         Even More Custom                               Type                         ...
TYPOGRAPHY ON THE WEB                             CSS3                                                 WORDCAMP RENOSaturd...
TYPOGRAPHY ON THE WEB                TEXT-SHADOW                                                  WORDCAMP RENOSaturday, J...
TYPOGRAPHY ON THE WEB                         http://mothereffingtextshadow.com/Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB                         http://mothereffingtextshadow.com/Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB                ROTATE                http://www.cssplayer.com/blog/date-display-technique-          ...
TYPOGRAPHY ON THE WEB                ROTATE                                                 WORDCAMP RENOSaturday, June 4,...
TYPOGRAPHY ON THE WEB                         WordPress Plugins                                                    WORDCAM...
TYPOGRAPHY ON THE WEB                PLUGIN: WP TYPOGRAPHY                http://wordpress.org/extend/plugins/wp-typograph...
TYPOGRAPHY ON THE WEB                PLUGIN: DROP CAPS                http://wordpress.org/extend/plugins/drop-caps/      ...
TYPOGRAPHY ON THE WEB                         Neat Type Scripts                                                    WORDCAM...
TYPOGRAPHY ON THE WEB                SCRIPT: LETTERING.JS                http://letteringjs.com/                • Takes ea...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                SCRIPT: KERN.JS                http://www.kernjs.com/                • Allows in-brow...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                SCRIPT: FIT TEXT                http:// ttextjs.com/                • Stretches headl...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB               Other Must Havesies                                                 WORDCAMP RENOSatur...
TYPOGRAPHY ON THE WEB                EXTENSION: WHATFONT                http://chengyinliu.com/whatfont.html              ...
TYPOGRAPHY ON THE WEB                                                 WORDCAMP RENOSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                EXTENSION: GOOGLE FONT PREVIEWER                https://github.com/pamelafox/font-pre...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                BOOKMARKLET: MIN                http://min.artequalswork.com/                • Shows ...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                         e Future?                                                 WORDCAMP RENOSatu...
TYPOGRAPHY ON THE WEB                THE FUTURE?                • Richard Ritter of Fontdeck.com @clanut                •O...
TYPOGRAPHY ON THE WEB                         What Not To Do                                                   WORDCAMP RE...
TYPOGRAPHY ON THE WEB                         Style Your Website                           With Paparyus                  ...
TYPOGRAPHY ON THE WEB                  Use Non-Web-Licensed Fonts:                         Archer or GOTHAM               ...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                   Never EVER Use The                   Infamous Comic Sans           (It doesn’t mat...
TYPOGRAPHY ON THE WEB                  It’s STILL Not Cool                         EVEN If You Think                      ...
TYPOGRAPHY ON THE WEB                         e Infamous                          Eye Bleed                              ...
TYPOGRAPHY ON THE WEB      EYE BLEED!!!           AHHH THE BURNING!                         FREE SET OF STEAK KNIVES!!!Sat...
TYPOGRAPHY ON THE WEB                  e Even More Infamous                       EYE BLEED                              ...
TYPOGRAPHY ON THE WEB      EYE BLEED!!!       AHHH THE BURNING!             FREE SET OF STEAK KNIVES!!!Saturday, June 4, 2...
TYPOGRAPHY ON THE WEB                         What To Do                                                 WORDCAMP RENOSatu...
TYPOGRAPHY ON THE WEB                   Find An Appropriate Substitution For:                              GOTHAM         ...
TYPOGRAPHY ON THE WEB                         Check All Browsers                            Always.                       ...
TYPOGRAPHY ON THE WEB                         Create A Typographic                           Style Guide For              ...
TYPOGRAPHY ON THE WEB                         http://twentytendemo.wordpress.com/Saturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                     http://twentyelevendemo.wordpress.com/Saturday, June 4, 2011
TYPOGRAPHY ON THE WEB                     Follow e Industry                                                 WORDCAMP RENO...
TYPOGRAPHY ON THE WEB                           blog.typekit.comSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                         ilovetypography.comSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                           typographica.orgSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                          webtypography.netSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                         Follow e Tweets                                                    WORDCAMP...
TYPOGRAPHY ON THE WEB                FOLLOW THE TWEETS                @JasonSantaMaria          @fontsquirrel             ...
TYPOGRAPHY ON THE WEB                         Find Inspiration                                                   WORDCAMP ...
TYPOGRAPHY ON THE WEB                            siteinspire.netSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                         typographyserved.comSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                         ministryoftype.co.ukSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                             dribbble.comSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                         wordpress.org/showcaseSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                         Find Cool Fonts                                                   WORDCAMP R...
TYPOGRAPHY ON THE WEB                         P22 UNDERGROUND                                 by: P22                   ht...
TYPOGRAPHY ON THE WEB                                   Adelle                            by: Type Together               ...
TYPOGRAPHY ON THE WEB                         http://typekit.com/fonts/ff-tisa-web-proSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                          “life is short, art is long”                         Typography is         ...
TYPOGRAPHY ON THE WEB                              ank You!      sara cannon / sara-cannon.com / follow @saracannonSaturd...
TYPOGRAPHY ON THE WEB                         Type Foundries                                                   WORDCAMP RE...
TYPOGRAPHY ON THE WEB                             H&FJ                                                 WORDCAMP RENOSaturd...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                             ArcherSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                          GOTHAMSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                              Veer                                                 WORDCAMP RENOSatur...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                             Adobe                                                 WORDCAMP RENOSatur...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                         e League Of                         Moveable Type                          ...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                      Open Source!                   O (open Font License)                 theleagueo...
TYPOGRAPHY ON THE WEB                           Exljbris                                                 WORDCAMP RENOSatu...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEB                          Lost Type                             Pay What You Want                    ...
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
TYPOGRAPHY ON THE WEBSaturday, June 4, 2011
Upcoming SlideShare
Loading in...5
×

Typography on the Web

19,933

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
70 Likes
Statistics
Notes
No Downloads
Views
Total Views
19,933
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
555
Comments
8
Likes
70
Embeds 0
No embeds

No notes for slide

Typography on the Web

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

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

×