Typography for the Web

1,394 views
1,228 views

Published on

Published in: Design, Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,394
On SlideShare
0
From Embeds
0
Number of Embeds
234
Actions
Shares
0
Downloads
36
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Typography for the Web

  1. 1. Typography for the WebJosh Nichols @mrblank
  2. 2. Web design is95%typographyhttp://informationarchitects.net/blog/the-web-is-all-about-typography-period/
  3. 3. Rules
  4. 4. Thou shalt• Always use sans-serif text for body copy• Always use ems for sizing type• Always use black text on a white background• Always use web-safe colors• Always use web-safe fonts• Always make links blue and underlined• Never use italics
  5. 5. Nonsense
  6. 6. http://lostworldsfairs.com/eldorado/
  7. 7. http://jasonsantamaria.com/articles/chunky-in-fury
  8. 8. http://holidays.virb.com/
  9. 9. Beautiful type
  10. 10. http://trentwalton.com/2011/05/10/fit-to-scale/
  11. 11. http://trentwalton.com/examples/cowpoke/
  12. 12. http://lostworldsfairs.com/atlantis/
  13. 13. is possible
  14. 14. http://mattt.me/
  15. 15. http://lostworldsfairs.com/moon/
  16. 16. http://www.strangenative.com/foldup/
  17. 17. on the Web
  18. 18. http://www.castirondesign.com/
  19. 19. http://lefft.com/
  20. 20. http://stationstreetpgh.com/
  21. 21. Learn
  22. 22. http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/
  23. 23. http://www.peachpit.com/store/product.aspx?isbn=0201782634
  24. 24. http://webtypography.net/
  25. 25. Markup
  26. 26. " ≠“
  27. 27. -- ≠ –
  28. 28. TinyMCE http://www.tinymce.com/
  29. 29. SmartyPants »“ "»–-- http://daringfireball.net/projects/smartypants/
  30. 30. Widon’twidowThe lonely life of an unluckywidowwidon’tThe lonely life of anunlucky widow http://www.shauninman.com/archive/2006/08/22/widont_wordpress_plugin
  31. 31. Typogrifyhttp://code.google.com/p/typogrify/
  32. 32. WP Typography http://kingdesk.com/projects/wp-typography/
  33. 33. Style
  34. 34. The old way
  35. 35. Default system fonts http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
  36. 36. Font Stackbody { font-family: Georgia, Times, "Times New Roman", serif; font-weight: normal; font-style: normal;} http://cssfontstack.com/
  37. 37. The new way
  38. 38. https://typekit.com/
  39. 39. http://www.webink.com/
  40. 40. http://www.fontsquirrel.com/
  41. 41. http://www.google.com/webfonts/
  42. 42. Hosted<script type="text/javascript" src="http://use.typekit.com/lbp4ytj.js"></script><script type="text/javascript"> try{Typekit.load();}catch(e){}</script>body { font-family: "proxima-nova", Arial, sans-serif; font-weight: 400; font-style: normal;}
  43. 43. Self-hostedLink to all the various font formats.@font-face { font-family: DejaVuSans; src: url(fonts/DejaVuSans-webfont.eot); src: url(fonts/DejaVuSans-webfont.eot?#iefix) format(embedded-opentype), url(fonts/DejaVuSans-webfont.woff) format(woff), url(fonts/DejaVuSans-webfont.ttf) format(truetype), url(fonts/DejaVuSans-webfont.svg#DejaVuSansBook) format(svg); font-weight: normal; font-style: normal;}
  44. 44. For weight & styles, FontSquirrel gets it wrong.Keep the font-family name the same and change thesrc, font-weight and font-style.@font-face { font-family: DejaVuSans; src: url(fonts/DejaVuSans-Bold-webfont.eot); src: url(fonts/DejaVuSans-Bold-webfont.eot?#iefix) format(embedded-opentype), url(fonts/DejaVuSans-Bold-webfont.woff) format(woff), url(fonts/DejaVuSans-Bold-webfont.ttf) format(truetype), url(fonts/DejaVuSans-Bold-webfont. svg#DejaVuSansBookBold) format(svg); font-weight: bold; font-style: normal;}
  45. 45. Build your stack.body { font-family: "DejaVuSans", Arial, sans-serif; font-weight: normal; font-style: normal;}
  46. 46. Scripts
  47. 47. http://812studio.com/initial-letter-a-jquery-plugin-for-making-drop-caps-and-more/
  48. 48. http://letteringjs.com/
  49. 49. http://fittextjs.com/
  50. 50. Tips
  51. 51. Choose wisely• Only embed the fonts you need.• Watch for weight & style versions. Browsers will fake them poorly if missing.• Some fonts don’t have all glyphs needed.• Check font rendering on both Windows and Mac before designing. Not all look the same cross platform.• If using a wide or condensed font, make sure your fallback in the stack won’t break your layout. http://modernizr.com/ can help fix that.
  52. 52. CSS• You can use measurements in px again!• Tell browsers to use kerning and ligatures: .foo { text-rendering: optimizelegibility; }• Font smoothing for reversed text in Webkit on the Mac: .foo { -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }
  53. 53. Thanks!Josh Nichols @mrblank

×