Your SlideShare is downloading. ×
0
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
Just Your Type: Web Typography & You
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

Just Your Type: Web Typography & You

2,913

Published on

Presented at MinneWebCon 2011 …

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
2,913
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
33
Comments
0
Likes
2
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. About Me • Web Designer • Type Geek • Font Snob
  • 2. We’ll Cover: • Web typography (past/present) • Web fonts (what/how) • Ways you can make it happen
  • 3. Web TypographyA “new” way to use type on the web.
  • 4. A Brief Historyof Type**on the web
  • 5. 1996• Early web looked like sh*#
  • 6. 1996• Web pages would only display fonts installed on a user’s computer• “Core Fonts” introduced
  • 7. 2004• Not much changed :(
  • 8. 2007• CSS3 introduces @font-face• Web fonts are born• Huzzah!
  • 9. 2007 BUT, browser support is limited
  • 10. 2010 Browsers finally catch up. All of ‘em.
  • 11. Web FontsAllow web designers to use fonts thatare not installed on the viewerscomputer.
  • 12. Web FontsSource: http://www.webtype.com/blog/Webtype-serving-95-percent-of-all-desktop-browsers/
  • 13. newyorker.com: NY Irvin, Times New Roman, Arial
  • 14. @font-face Not a Twitter account.
  • 15. @font-face • Clean • Doesn’t use Javascript, Flash, images, etc. • Searchable, selectable • Accessible • Standards-compliant • Fast & efficient • Awesome
  • 16. @font-face No longer just for web designers comfortable with changing code
  • 17. @font-face Many options for everyone.
  • 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. 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. Results guffawmn.com: Arvo, Arvo Bold
  • 21. With great powercomes greatresponsibility
  • 22. Choose yourfonts wisely• Mood is important• Should be appropriate to purpose• Avoid overused fonts
  • 23. http://typedia.com/
  • 24. Less is more• Don’t use too many fonts• Stick with 1 or 2
  • 25. aworkinglibrary.com: Chaparral
  • 26. bobulate.com: Skolar Web
  • 27. Don’t forgetthe stacks• Alternative fonts are a must
  • 28. http://www.awayback.com/revised-font-stack/
  • 29. www.abookapart.com: Lucida Grande, Trebuchet MS, Georgia
  • 30. Test. Test. Test.• Display will vary by browser, platform and device
  • 31. Get Inspired• Pay attention to what and how others are doing it
  • 32. http://typekit.com/gallery
  • 33. clockwork.net: Kulturista Web, Helvetica Neue
  • 34. adamstoddard.com: Sorts Mill Goudy, League Gothic
  • 35. http://nicewebtype.com/fonts/bello-and-proxima-nova/
  • 36. http://chengyinliu.com/whatfont.html
  • 37. ?s
  • 38. Thank you! Mykl Roventine designer of things myklroventine.com @myklroventine

×