Just Your Type: Web Typography & You

3,279 views

Published on

Presented at MinneWebCon 2011

Web typography is making the internet look better than ever before. You're particular about the fonts you choose in other mediums, don't settle for anything less for your online projects. This session will address the basics of effective typography and techniques that everyone can apply right away to harness the power of web typography on their website or blog.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,279
On SlideShare
0
From Embeds
0
Number of Embeds
915
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Just Your Type: Web Typography & You

  1. 1. About Me • Web Designer • Type Geek • Font Snob
  2. 2. We’ll Cover: • Web typography (past/present) • Web fonts (what/how) • Ways you can make it happen
  3. 3. Web TypographyA “new” way to use type on the web.
  4. 4. A Brief Historyof Type**on the web
  5. 5. 1996• Early web looked like sh*#
  6. 6. 1996• Web pages would only display fonts installed on a user’s computer• “Core Fonts” introduced
  7. 7. 2004• Not much changed :(
  8. 8. 2007• CSS3 introduces @font-face• Web fonts are born• Huzzah!
  9. 9. 2007 BUT, browser support is limited
  10. 10. 2010 Browsers finally catch up. All of ‘em.
  11. 11. Web FontsAllow web designers to use fonts thatare not installed on the viewerscomputer.
  12. 12. Web FontsSource: http://www.webtype.com/blog/Webtype-serving-95-percent-of-all-desktop-browsers/
  13. 13. newyorker.com: NY Irvin, Times New Roman, Arial
  14. 14. @font-face Not a Twitter account.
  15. 15. @font-face • Clean • Doesn’t use Javascript, Flash, images, etc. • Searchable, selectable • Accessible • Standards-compliant • Fast & efficient • Awesome
  16. 16. @font-face No longer just for web designers comfortable with changing code
  17. 17. @font-face Many options for everyone.
  18. 18. @font-face Services • Typekit - http://typekit.com/ • Kernest - http://kernest.com/ • Webtype - http://webtype.com/ • FontShop - http://www.fontshop.com/fontlist/n/web_fontfonts/ • Fontdeck - http://fontdeck.com/ • Fontspring - http://www.fontspring.com/ • Typotheque - http://www.typotheque.com/webfonts • MyFonts - http://new.myfonts.com/info/webfonts/ • Fonts.com Web Fonts - http://webfonts.fonts.com/ • Google Web Fonts - http://www.google.com/webfonts/ • Font Squirrel - http://www.fontsquirrel.com/
  19. 19. How it works Just 2 Steps: 1. <head> link <link href="<link href="http://kernest.com/guffaw.css" media="screen" rel="stylesheet" type="text/css" />" media="screen" rel="stylesheet" type="text/css" /> 2. CSS code #content h1 { font-weight: normal; font-family: Arvo; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
  20. 20. Results guffawmn.com: Arvo, Arvo Bold
  21. 21. With great powercomes greatresponsibility
  22. 22. Choose yourfonts wisely• Mood is important• Should be appropriate to purpose• Avoid overused fonts
  23. 23. http://typedia.com/
  24. 24. Less is more• Don’t use too many fonts• Stick with 1 or 2
  25. 25. aworkinglibrary.com: Chaparral
  26. 26. bobulate.com: Skolar Web
  27. 27. Don’t forgetthe stacks• Alternative fonts are a must
  28. 28. http://www.awayback.com/revised-font-stack/
  29. 29. www.abookapart.com: Lucida Grande, Trebuchet MS, Georgia
  30. 30. Test. Test. Test.• Display will vary by browser, platform and device
  31. 31. Get Inspired• Pay attention to what and how others are doing it
  32. 32. http://typekit.com/gallery
  33. 33. clockwork.net: Kulturista Web, Helvetica Neue
  34. 34. adamstoddard.com: Sorts Mill Goudy, League Gothic
  35. 35. http://nicewebtype.com/fonts/bello-and-proxima-nova/
  36. 36. http://chengyinliu.com/whatfont.html
  37. 37. ?s
  38. 38. Thank you! Mykl Roventine designer of things myklroventine.com @myklroventine

×