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
stuff
lots
other
fonts

8. typography
of
stuff
lots
other
and fonts

9. Presenting Textual
Information
to an
Audience

10. Web design is 95%
Typography
http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/

11. 2 2
3

12. 2 2
3

13. 2 2
3

14. 2 2
3

15. http://retinart.net/graphic-design/secret-law-of-page-harmony/

16. φ
phi, the golden ratio
~1.618 : 1

18. Gutenberg
1436 A.D.
http://www.flickr.com/photos/nicksherman/3770659985

20. 2 2
3

25. http://flic.kr/p/6pRW4M

26. 960
http://960.gs

27. the typographical scale

28. Vertical Rhythym
http://24ways.org/2006/compose-to-a-vertical-rhythm

32. 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.

33. 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

34. 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.

35. http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

36. 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.

37. 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.

38. “… and fonts”

39. “Core Web Fonts”
In Soviet Russia, we only have four different shirts.

40. @font-face
4 3.5 10 3.1 4
(EOT only)

41. TypeKit hosted, paid
http://typekit.com
Google hosted, free
http://code.google.com/webfonts/
FontSquirrel DIY, free
http://fontsquirrel.com/
and many more…

42. typography
of
stuff
lots
other
and fonts

43. webtypography.net
learn you some etiquette.

44. Designing for the Web
free to read online
http://designingfortheweb.co.uk/book/index.php

45. go make something
(beautiful).

46. Thanks!
Idan Gazit
@idangazit
Presented at TLV Night Owls
13th January 2011