• Like
Typography for the Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Typography for the Web

  • 1,009 views
Published

 

Published in Design , Technology , Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,009
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
34
Comments
0
Likes
3

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 for the WebJosh Nichols @mrblank
  • 2. Web design is95%typographyhttp://informationarchitects.net/blog/the-web-is-all-about-typography-period/
  • 3. Rules
  • 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. Nonsense
  • 6. http://lostworldsfairs.com/eldorado/
  • 7. http://jasonsantamaria.com/articles/chunky-in-fury
  • 8. http://holidays.virb.com/
  • 9. Beautiful type
  • 10. http://trentwalton.com/2011/05/10/fit-to-scale/
  • 11. http://trentwalton.com/examples/cowpoke/
  • 12. http://lostworldsfairs.com/atlantis/
  • 13. is possible
  • 14. http://mattt.me/
  • 15. http://lostworldsfairs.com/moon/
  • 16. http://www.strangenative.com/foldup/
  • 17. on the Web
  • 18. http://www.castirondesign.com/
  • 19. http://lefft.com/
  • 20. http://stationstreetpgh.com/
  • 21. Learn
  • 22. http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/
  • 23. http://www.peachpit.com/store/product.aspx?isbn=0201782634
  • 24. http://webtypography.net/
  • 25. Markup
  • 26. " ≠“
  • 27. -- ≠ –
  • 28. TinyMCE http://www.tinymce.com/
  • 29. SmartyPants »“ "»–-- http://daringfireball.net/projects/smartypants/
  • 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. Typogrifyhttp://code.google.com/p/typogrify/
  • 32. WP Typography http://kingdesk.com/projects/wp-typography/
  • 33. Style
  • 34. The old way
  • 35. Default system fonts http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
  • 36. Font Stackbody { font-family: Georgia, Times, "Times New Roman", serif; font-weight: normal; font-style: normal;} http://cssfontstack.com/
  • 37. The new way
  • 38. https://typekit.com/
  • 39. http://www.webink.com/
  • 40. http://www.fontsquirrel.com/
  • 41. http://www.google.com/webfonts/
  • 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. 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. 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. Build your stack.body { font-family: "DejaVuSans", Arial, sans-serif; font-weight: normal; font-style: normal;}
  • 46. Scripts
  • 47. http://812studio.com/initial-letter-a-jquery-plugin-for-making-drop-caps-and-more/
  • 48. http://letteringjs.com/
  • 49. http://fittextjs.com/
  • 50. Tips
  • 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. 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. Thanks!Josh Nichols @mrblank