Typography               for the WebJosh Nichols                 @mrblank
Web design is95%typographyhttp://informationarchitects.net/blog/the-web-is-all-about-typography-period/
Rules
Thou shalt• Always use sans-serif text for body copy• Always use ems for sizing type• Always use black text on a white bac...
Nonsense
http://lostworldsfairs.com/eldorado/
http://jasonsantamaria.com/articles/chunky-in-fury
http://holidays.virb.com/
Beautiful type
http://trentwalton.com/2011/05/10/fit-to-scale/
http://trentwalton.com/examples/cowpoke/
http://lostworldsfairs.com/atlantis/
is possible
http://mattt.me/
http://lostworldsfairs.com/moon/
http://www.strangenative.com/foldup/
on the Web
http://www.castirondesign.com/
http://lefft.com/
http://stationstreetpgh.com/
Learn
http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/
http://www.peachpit.com/store/product.aspx?isbn=0201782634
http://webtypography.net/
Markup
" ≠“
-- ≠ –
TinyMCE http://www.tinymce.com/
SmartyPants   »“ "»–-- http://daringfireball.net/projects/smartypants/
Widon’twidowThe lonely life of an unluckywidowwidon’tThe lonely life of anunlucky widow http://www.shauninman.com/archive/...
Typogrifyhttp://code.google.com/p/typogrify/
WP Typography  http://kingdesk.com/projects/wp-typography/
Style
The old way
Default system fonts  http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Font Stackbody {		font-family: Georgia, Times,  			"Times New Roman", serif;		font-weight: normal;		font-style: normal;}  ...
The new way
https://typekit.com/
http://www.webink.com/
http://www.fontsquirrel.com/
http://www.google.com/webfonts/
Hosted<script type="text/javascript" 		src="http://use.typekit.com/lbp4ytj.js"></script><script type="text/javascript">	tr...
Self-hostedLink to all the various font formats.@font-face {  font-family: DejaVuSans;  src: url(fonts/DejaVuSans-webfont....
For weight & styles, FontSquirrel gets it wrong.Keep the font-family name the same and change thesrc, font-weight and font...
Build your stack.body {		font-family:				"DejaVuSans", Arial, 	                         sans-serif;		font-weight: normal;	...
Scripts
http://812studio.com/initial-letter-a-jquery-plugin-for-making-drop-caps-and-more/
http://letteringjs.com/
http://fittextjs.com/
Tips
Choose wisely• Only embed the fonts you need.• Watch for weight & style versions. Browsers will  fake them poorly if missi...
CSS• You can use measurements in px again!• Tell browsers to use kerning and ligatures:		   .foo { text-rendering: optimiz...
Thanks!Josh Nichols         @mrblank
Typography for the Web
Typography for the Web
Upcoming SlideShare
Loading in...5
×

Typography for the Web

1,133

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,133
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
35
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
  1. A particular slide catching your eye?

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

×