Better Products Through Typography

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

4. None

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

17. None

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/

30. None

31. http://flic.kr/p/2pgYeH GUT ENB ERG h 1436 A.D. g

32. http://flic.kr/p/eT6WG

33. None

34. 2 3 2

35. None

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

58. None
59. None
60. None
61. None

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

77. None
78. None
79. None
80. None
81. None
82. None

83. Contrast

84. Contrast

85. Contrast

86. None
87. None

88. go ahead make something beautiful

89. @idangazit