Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Better Products Through Typography

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.

Idan Gazit

August 13, 2012
Tweet

More Decks by Idan Gazit

Other Decks in Design

Transcript

  1. typo
    graphy
    r ctic l ri er for eo le ki thi s

    View Slide

  2. djangoproject.com
    skillsapp.com

    View Slide

  3. http://commons.wikimedia.org/wiki/File:Lateral_head_angiogram.jpg

    View Slide

  4. View Slide

  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.

    View Slide

  6. abcdefghijklmnopqrstuvwxyz
    Georgia
    abcdefghijklmnopqrstuvwxyz
    Helvetica
    abcdefghijklmnopqrstuvwxyz
    Trebuchet
    abcdefghijklmnopqrstuvwxyz
    Comic Sans
    abcdefghijklmnopqrstuvwxyz
    Baskerville

    View Slide

  7. 1.5%
    http://cl.ly/0D2R0b30412R
    Baskerville had a
    “agreement” advantage

    View Slide

  8. 682
    http://cl.ly/0D2R0b30412R
    with a sample size of 45,524 that’s
    more people who are convinced

    View Slide

  9. SCIENCE
    it works, bitches
    http://xkcd.com/54/

    View Slide

  10. the art and science of
    presenting textual
    information

    View Slide

  11. http://flic.kr/p/6M3YRd

    View Slide

  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.

    View Slide

  13. Oliver Reichenstein, iA
    Web Design is 95% Typography bit.ly/wd95type
    100% Easy-to-Read Standard bit.ly/100e2r

    View Slide

  14. for
    Legibility
    for
    Beauty

    View Slide

  15. for
    Legibility
    for
    Beauty
    for
    Practicality

    View Slide

  16. http://flic.kr/p/72sx9H

    View Slide

  17. View Slide

  18. http://flic.kr/p/aqdKUb

    View Slide

  19. &
    micro
    macro

    View Slide

  20. &
    micro
    macro

    View Slide

  21. phi, the golden ratio
    1.618 : 1
    φ

    View Slide

  22. A + B
    A B

    View Slide

  23. A + B A
    B
    A is to
    AS
    is to
    1
    1.618
    1
    1.618

    View Slide

  24. http://flic.kr/p/4EqibM

    View Slide

  25. 2
    2
    3

    View Slide

  26. 2
    2
    3

    View Slide

  27. 2
    2
    3

    View Slide

  28. 2
    2
    3

    View Slide

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

    View Slide

  30. View Slide

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

    View Slide

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

    View Slide

  33. View Slide

  34. 2
    3
    2

    View Slide

  35. View Slide

  36. size
    measure
    leading
    the three primary factors of legibility are

    View Slide

  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

    View Slide

  38. size

    View Slide

  39. M
    1 em

    View Slide

  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

    View Slide

  41. M
    M
    The quick brown fox jumps over a lazy dog.
    The quick brown fox jumps over a lazy dog.
    TIMES
    GEORGIA

    View Slide

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

    View Slide

  43. measure

    View Slide

  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.

    View Slide

  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)

    View Slide

  46. PRO TIPS
    Stick to a measure of about
    66
    characters (~33em)

    View Slide

  47. http://flic.kr/p/6K4YWb

    View Slide

  48. leading

    View Slide

  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.

    View Slide

  50. PRO TIPS
    Body text should have about
    1.3–1.6em
    of leading

    View Slide

  51. PRO TIPS
    longer lines need
    more
    leading

    View Slide

  52. WAVE

    View Slide

  53. WAVE
    WAVE
    WAVE
    WAVE

    View Slide

  54. WAVE
    WAVE
    WAVE
    WAVE

    View Slide

  55. PRO TIPS
    really large text usually needs to be
    hand-kerned
    to look good

    View Slide

  56. &
    micro
    macro

    View Slide

  57. http://flic.kr/p/5vwCoW

    View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. Serif
    versus
    Sans-Serif

    View Slide

  63. q 2
    A q 2
    A
    serif
    sans-serif

    View Slide

  64. serif
    sans-serif
    q 2
    A q 2
    A

    View Slide

  65. G R
    A
    G R
    A
    G R
    A

    View Slide

  66. but
    what
    about
    fonts?

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  70. PRO TIPS
    choose at most
    one or two
    typefaces

    View Slide

  71. PRO TIPS
    pair for
    contrast
    too similar isn’t good

    View Slide

  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.

    View Slide

  73. PRO TIPS
    use a
    serif
    for body or “running” text

    View Slide

  74. PRO TIPS
    use a
    sans-serif
    for titles or “display” text

    View Slide

  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/

    View Slide

  76. A few examples
    in action

    View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  80. View Slide

  81. View Slide

  82. View Slide

  83. Contrast

    View Slide

  84. Contrast

    View Slide

  85. Contrast

    View Slide

  86. View Slide

  87. View Slide

  88. go ahead
    make something
    beautiful

    View Slide

  89. @idangazit

    View Slide