Your SlideShare is downloading. ×
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Typography for the Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Typography for the Web

1,090

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,090
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
35
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

×