Better Products Through Typography

0d877f80c535471ede57c7a4c0f487de?s=47 Idan Gazit
August 13, 2012

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.

0d877f80c535471ede57c7a4c0f487de?s=128

Idan Gazit

August 13, 2012
Tweet

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