Just Your Type: Web Typography & You
•
4 likes•1,427 views
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.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to Just Your Type: Web Typography & You
Similar to Just Your Type: Web Typography & You (20)
More from Mykl Roventine
More from Mykl Roventine (20)
Recently uploaded
Recently uploaded (20)
Just Your Type: Web Typography & You
- 2. About Me • Web Designer • Type Geek • Font Snob
- 3. We’ll Cover: • Web typography (past/present) • Web fonts (what/how) • Ways you can make it happen
- 4. Web Typography A “new” way to use type on the web.
- 5. A Brief History of Type* *on the web
- 6. 1996 • Early web looked like sh*#
- 7. 1996 • Web pages would only display fonts installed on a user’s computer • “Core Fonts” introduced
- 9. 2004 • Not much changed :(
- 10. 2007 • CSS3 introduces @font-face • Web fonts are born • Huzzah!
- 11. 2007 BUT, browser support is limited
- 12. 2010 Browsers finally catch up. All of ‘em.
- 13. Web Fonts Allow web designers to use fonts that are not installed on the viewer's computer.
- 14. Web Fonts Source: http://www.webtype.com/blog/Webtype-serving-95-percent-of-all-desktop-browsers/
- 15. newyorker.com: NY Irvin, Times New Roman, Arial
- 16. @font-face Not a Twitter account.
- 17. @font-face • Clean • Doesn’t use Javascript, Flash, images, etc. • Searchable, selectable • Accessible • Standards-compliant • Fast & efficient • Awesome
- 18. @font-face No longer just for web designers comfortable with changing code
- 19. @font-face Many options for everyone.
- 20. @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/
- 21. 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; }
- 22. Results guffawmn.com: Arvo, Arvo Bold
- 23. With great power comes great responsibility
- 24. Choose your fonts wisely • Mood is important • Should be appropriate to purpose • Avoid overused fonts
- 26. Less is more • Don’t use too many fonts • Stick with 1 or 2
- 29. Don’t forget the stacks • Alternative fonts are a must
- 31. www.abookapart.com: Lucida Grande, Trebuchet MS, Georgia
- 32. Test. Test. Test. • Display will vary by browser, platform and device
- 33. Get Inspired • Pay attention to what and how others are doing it
- 35. clockwork.net: Kulturista Web, Helvetica Neue
- 36. adamstoddard.com: Sorts Mill Goudy, League Gothic
- 39. ?s
- 40. Thank you! Mykl Roventine designer of things myklroventine.com @myklroventine