Better Products Through Typography

Whether you are building products for the screen or for print, type is often the main channel of communication between your product and your users. Modern typography has a rich history dating back to the invention of movable type in 1450 A.D., but many lessons were lost when type made the jump to the screen.

The talk is a mix of theory and practical advice on using type to direct and delight users' brains.

Presented at Microsoft's ThinkNext Academy in Israel, August 13th 2012.

Transcript

1. typo graphy r ctic l ri er for eo le ki thi s
2. djangoproject.com skillsapp.com
3. http://commons.wikimedia.org/wiki/File:Lateral_head_angiogram.jpg
5. Daniel Kahneman The general principle is that anything you can do to reduce cognitive strain will help you [be persuasive], so you should first maximize legibility.
6. abcdefghijklmnopqrstuvwxyz Georgia abcdefghijklmnopqrstuvwxyz Helvetica abcdefghijklmnopqrstuvwxyz Trebuchet abcdefghijklmnopqrstuvwxyz Comic Sans abcdefghijklmnopqrstuvwxyz Baskerville
7. 1.5% http://cl.ly/0D2R0b30412R Baskerville had a “agreement” advantage
8. 682 http://cl.ly/0D2R0b30412R with a sample size of 45,524 that’s more people who are convinced
9. SCIENCE it works, bitches http://xkcd.com/54/
10. the art and science of presenting textual information
11. http://flic.kr/p/6M3YRd
12. Philip Johnson All architecture is shelter, all great architecture is the design of space that contains, cuddles, exalts, or stimulates the persons in that space.
13. Oliver Reichenstein, iA Web Design is 95% Typography bit.ly/wd95type 100% Easy-to-Read Standard bit.ly/100e2r
14. for Legibility for Beauty
15. for Legibility for Beauty for Practicality
16. http://flic.kr/p/72sx9H
18. http://flic.kr/p/aqdKUb
19. & micro macro
20. & micro macro
21. phi, the golden ratio 1.618 : 1 φ
22. A + B A B
23. A + B A B A is to AS is to 1 1.618 1 1.618
24. http://flic.kr/p/4EqibM
25. 2 2 3
26. 2 2 3
27. 2 2 3
28. 2 2 3
29. http://retinart.net/graphic-design/secret-law-of-page-harmony/
31. http://flic.kr/p/2pgYeH GUT ENB ERG h 1436 A.D. g
32. http://flic.kr/p/eT6WG
34. 2 3 2
36. size measure leading the three primary factors of legibility are
37. size measure leading Aa The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost The path of the righteous man is beset on all sides by t selfish and the tyranny of evil men. Blessed is he who, charity and good will, shepherds the weak through the for he is truly his brother's keeper and the finder of los
38. size
39. M 1 em
40. the typographical scale a a a a a a a a a a a a a a a a a 6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72 96 +1 +2 +3 +12
41. M M The quick brown fox jumps over a lazy dog. The quick brown fox jumps over a lazy dog. TIMES GEORGIA
42. http://www.wilsonminer.com/posts/2008/oct/20/relative-
43. measure
44. GOOD BAD Well, the way they make shows is, they make one show. That show’s called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they’re going to make more shows. Some pilots get picked and become television programs. Some don’t, become nothing. She starred in one of the ones that became nothing. Well, the way they make shows is, they make one show. That show’s called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they’re going to make more shows. Some pilots get picked and become television programs. Some don’t, become nothing. She starred in one of the ones that became nothing.
45. Well, the way they make shows is, they make one show. That show’s called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they’re going to make more shows. Some pilots get picked and become television programs. Some don’t, become nothing. She starred in one of the ones that became nothing. Saccade (Eye Movement)
46. PRO TIPS Stick to a measure of about 66 characters (~33em)
47. http://flic.kr/p/6K4YWb
48. leading
49. GOOD BAD Well, the way they make shows is, they make one show. That show’s called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they’re going to make more shows. Some pilots get picked and become television programs. Some don’t, become nothing. She starred in one of the ones that became nothing. Well, the way they make shows is, they make one show. That show’s called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they’re going to make more shows. Some pilots get picked and become television programs. Some don’t, become nothing. She starred in one of the ones that became nothing.
50. PRO TIPS Body text should have about 1.3–1.6em of leading
51. PRO TIPS longer lines need more leading
52. WAVE
53. WAVE WAVE WAVE WAVE
54. WAVE WAVE WAVE WAVE
55. PRO TIPS really large text usually needs to be hand-kerned to look good
56. & micro macro
57. http://flic.kr/p/5vwCoW
62. Serif versus Sans-Serif
63. q 2 A q 2 A serif sans-serif
64. serif sans-serif q 2 A q 2 A
65. G R A G R A G R A
66. but what about fonts?
67. The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. The path of the righteous man is beset on all sides by the iniquities of the sel sh and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the nder of lost children.
68. GOOD BAD Jackdaws Love My Quartz Sphinx The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. by Stiv Hamburger Jackdaws Love My Quartz Sphinx The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. by Stiv Hamburger
69. GOOD BAD Jackdaws Love My Quartz Sphinx The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. by Stiv Hamburger J ckd ws Love My Qu rtz S hi x The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. by Stiv Hamburger
70. PRO TIPS choose at most one or two typefaces
71. PRO TIPS pair for contrast too similar isn’t good
72. GOOD BAD Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus. Integer gravida tempor metus eget condimentum. Integer eget iaculis tortor. Nunc sed ligula sed augue rutrum ultrices eget nec odio. Morbi rhoncus, sem laoreet tempus pulvinar, leo diam varius nisi, sed accumsan ligula urna sed felis. Mauris molestie augue sed nunc adipiscing et pharetra ligula suscipit. In euismod lectus ac sapien fringilla ut eleifend lacus venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus. Integer gravida tempor metus eget condimentum. Integer eget iaculis tortor. Nunc sed ligula sed augue rutrum ultrices eget nec odio. Morbi rhoncus, sem laoreet tempus pulvinar, leo diam varius nisi, sed accumsan ligula urna sed felis. Mauris molestie augue sed nunc adipiscing et pharetra ligula suscipit. In euismod lectus ac sapien fringilla ut eleifend lacus venenatis.
73. PRO TIPS use a serif for body or “running” text
74. PRO TIPS use a sans-serif for titles or “display” text
75. PRO TIPS mostly a matter of convention and expectations http://www.useit.com/alertbox/web-typography.html http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/
76. A few examples in action
83. Contrast
84. Contrast
85. Contrast
88. go ahead make something beautiful
89. @idangazit