Your SlideShare is downloading. ×
0
Handglovery   typography & the modern web     looking back, looking forward
ig
ty·pog·ra·phy     (noun)
OMG I CAN USE MANY FONTZ?!?!11!one!?                                       http://flic.kr/p/7HSzyo
typography ≠ fonts
typography             fonts
typography       of                       stufflots            other                    fonts
typography       of                        stufflots             other            and      fonts
Presenting TextualInformation       to an Audience
Web design is 95%      Typographyhttp://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/
2   23
2   23
2   23
2   23
http://retinart.net/graphic-design/secret-law-of-page-harmony/
φphi, the golden ratio     ~1.618 : 1
Gutenberg   1436 A.D.               http://www.flickr.com/photos/nicksherman/3770659985
2   23
http://flic.kr/p/6pRW4M
960http://960.gs
the typographical scale
Vertical Rhythymhttp://24ways.org/2006/compose-to-a-vertical-rhythm
Leading          Nulla fringilla, orci ac euismod semper, magna diam          porttitor mauris, quis sollicitudin sapien j...
Measure          Morbi ac commodo nulla. In condimentum orci id nisl volutpat          bibendum. Quisque commodo hendrerit...
Font Size            Nulla fringilla, orci ac euismod semper, magna diam            porttitor mauris, quis sollicitudin sa...
http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
Font Pairing               Once Upon A Time   GOOD        Donec semper quam scelerisque tortor dictum               gravid...
Font Pairing               Consistent Header Font   GOOD        And also, we like to use a consistent font for body       ...
“… and fonts”
“Core Web Fonts”In Soviet Russia, we only have four different shirts.
@font-face4   3.5   10   3.1      4                     (EOT only)
TypeKit                    hosted, paidhttp://typekit.comGoogle                hosted, freehttp://code.google.com/webfonts...
typography       of                        stufflots             other            and      fonts
webtypography.net   learn you some etiquette.
Designing for the Web            free to read online   http://designingfortheweb.co.uk/book/index.php
go make something      (beautiful).
Thanks!    Idan Gazit      @idangazitPresented at TLV Night Owls      13th January 2011
Web typography
Web typography
Web typography
Web typography
Web typography
Web typography
Web typography
Web typography
Web typography
Upcoming SlideShare
Loading in...5
×

Web typography

2,463

Published on

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,463
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
87
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Web typography"

  1. 1. Handglovery typography & the modern web looking back, looking forward
  2. 2. ig
  3. 3. ty·pog·ra·phy (noun)
  4. 4. OMG I CAN USE MANY FONTZ?!?!11!one!? http://flic.kr/p/7HSzyo
  5. 5. typography ≠ fonts
  6. 6. typography fonts
  7. 7. typography of stufflots other fonts
  8. 8. typography of stufflots other and fonts
  9. 9. Presenting TextualInformation to an Audience
  10. 10. Web design is 95% Typographyhttp://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/
  11. 11. 2 23
  12. 12. 2 23
  13. 13. 2 23
  14. 14. 2 23
  15. 15. http://retinart.net/graphic-design/secret-law-of-page-harmony/
  16. 16. φphi, the golden ratio ~1.618 : 1
  17. 17. Gutenberg 1436 A.D. http://www.flickr.com/photos/nicksherman/3770659985
  18. 18. 2 23
  19. 19. http://flic.kr/p/6pRW4M
  20. 20. 960http://960.gs
  21. 21. the typographical scale
  22. 22. Vertical Rhythymhttp://24ways.org/2006/compose-to-a-vertical-rhythm
  23. 23. Leading Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. GOOD Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. BAD Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis.
  24. 24. Measure Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque GOOD consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo BAD lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur q neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea
  25. 25. Font Size Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. GOOD Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque BAD consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst.
  26. 26. http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
  27. 27. Font Pairing Once Upon A Time GOOD Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio. Once Upon A Time BAD Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio.
  28. 28. Font Pairing Consistent Header Font GOOD And also, we like to use a consistent font for body text; studies show that consistency aids users in navigating your site and understanding content. OMG I LOVE FONTS BAD Especially COMIC SANS! It’s the awesomest font ever made by any font designer in the whole wide world. I use it for every single site I make.
  29. 29. “… and fonts”
  30. 30. “Core Web Fonts”In Soviet Russia, we only have four different shirts.
  31. 31. @font-face4 3.5 10 3.1 4 (EOT only)
  32. 32. TypeKit hosted, paidhttp://typekit.comGoogle hosted, freehttp://code.google.com/webfonts/FontSquirrel DIY, freehttp://fontsquirrel.com/and many more…
  33. 33. typography of stufflots other and fonts
  34. 34. webtypography.net learn you some etiquette.
  35. 35. Designing for the Web free to read online http://designingfortheweb.co.uk/book/index.php
  36. 36. go make something (beautiful).
  37. 37. Thanks! Idan Gazit @idangazitPresented at TLV Night Owls 13th January 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×