Web typography

Text-only Preview

  1. Handglovery typography & the modern web looking back, looking forward
  2. ig
  3. ty·pog·ra·phy (noun)
  4. OMG I CAN USE MANY FONTZ?!?!11!one!? http://flic.kr/p/7HSzyo
  5. typography ? fonts
  6. typography fonts
  7. typography of stufflots other fonts
  8. typography of stufflots other and fonts
  9. Presenting TextualInformation to an Audience
  10. Web design is 95% Typographyhttp://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/
  11. 2 23
  12. 2 23
  13. 2 23
  14. 2 23
  15. http://retinart.net/graphic-design/secret-law-of-page-harmony/
  16. ?phi, the golden ratio ~1.618 : 1
  17. Gutenberg 1436 A.D. http://www.flickr.com/photos/nicksherman/3770659985
  18. 2 23
  19. http://flic.kr/p/6pRW4M
  20. 960http://960.gs
  21. the typographical scale
  22. Vertical Rhythymhttp://24ways.org/2006/compose-to-a-vertical-rhythm
  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. 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. 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. http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/
  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. 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. “… and fonts”
  30. “Core Web Fonts”In Soviet Russia, we only have four different shirts.
  31. @font-face4 3.5 10 3.1 4 (EOT only)
  32. TypeKit hosted, paidhttp://typekit.comGoogle hosted, freehttp://code.google.com/webfonts/FontSquirrel DIY, freehttp://fontsquirrel.com/and many more…
  33. typography of stufflots other and fonts
  34. webtypography.net learn you some etiquette.
  35. Designing for the Web free to read online http://designingfortheweb.co.uk/book/index.php
  36. go make something (beautiful).
  37. Thanks! Idan Gazit @idangazitPresented at TLV Night Owls 13th January 2011