The Science of Typography - DIBI

This is going to be weird. You’ve probably heard about applications that automatically design websites. Are they a good thing? Can we learn something from these applications and create a tool that helps designers, instead of replacing them? This talk explores what happens when you apply algorithms and math to typography.

Transcript

1. @bram_stein
   the
   SCIENCE
   typography
   of 2em
   glyph box
   0.5em
   0.5em
   baseline
   kerning
   x-height
   

   View Slide

2. View Slide

3. View Slide

4. 1978 2005
   

   View Slide

5. The web was (and to a large extend still is) not
   a good platform for high quality typography.
   

   View Slide

6. ¯\_(ツ)_/¯
   JavaScript
   

   View Slide

7. View Slide

8. Manual Automated Design
   

   View Slide

9. It looks like you’re trying to
   design something. Have
   you considered using
   Comic Sans?
   

   View Slide

10. View Slide

11. View Slide

12. a a
    a
    Acumin Pro Madre Script Futura PT
    

    View Slide

13. a
    

    View Slide

14. a
    

    View Slide

15. View Slide

16. Type
    

    View Slide

17. aexpd x-height
    

    View Slide

18. a a
    a
    In olden times when wishing
    still helped one, there lived a
    king whose daughters were
    all beautiful, but the
    youngest was so beautiful
    that the sun itself, which has
    seen so much, was
    astonished whenever it
    shone in her face.
    In olden times when wishing
    still helped one, there lived a
    king whose daughters were
    all beautiful, but the youngest
    was so beautiful that the sun
    itself, which has seen so
    much, was astonished
    whenever it shone in her
    face.
    In olden times when
    wishing still helped one,
    there lived a king whose
    daughters were all
    beautiful, but the youngest
    was so beautiful that the
    sun itself, which has seen
    so much, was astonished
    whenever it shone in her
    face.
    Geogrotesque Gill Sans Arial
    

    View Slide

19. a a
    a
    In olden times when wishing
    still helped one, there lived a
    king whose daughters were
    all beautiful, but the
    youngest was so beautiful
    that the sun itself, which has
    seen so much, was
    astonished whenever it
    shone in her face.
    In olden times when
    wishing still helped one,
    there lived a king whose
    daughters were all beautiful,
    but the youngest was so
    beautiful that the sun itself,
    which has seen so much,
    was astonished whenever it
    shone in her face.
    In olden times when wishing
    still helped one, there lived a
    king whose daughters were
    all beautiful, but the
    youngest was so beautiful
    that the sun itself, which has
    seen so much, was
    astonished whenever it
    shone in her face.
    +7% -8%
    Geogrotesque Gill Sans Arial
    

    View Slide

20. n
    A apple a day kee
    

    View Slide

21. View Slide

22. n
    A
    

    View Slide

23. n
    A apple
    

    View Slide

24. n
    A apple a
    

    View Slide

25. n
    A apple a d y
    a
    

    View Slide

26. n
    A apple a
    

    View Slide

27. n
    A apple a
    d y
    a
    

    View Slide

28. n
    A apple a
    d y
    a keeps
    

    View Slide

29. n
    A apple a
    d y
    a keeps t e
    h
    

    View Slide

30. n
    A apple a
    d y
    a keeps
    

    View Slide

31. n
    A apple a
    d y
    a keeps
    t e
    h
    

    View Slide

32. n
    A apple a
    d y
    a keeps
    t e
    h doctor
    

    View Slide

33. n
    A apple a
    d y
    a keeps
    t e
    h doctor away.
    

    View Slide

34. n
    A apple a
    d y
    a keeps
    t e
    h doctor
    

    View Slide

35. n
    A apple a
    d y
    a keeps
    t e
    h doctor
    away.
    

    View Slide

36. n
    A apple a
    d y
    a keeps
    t e
    h doctor
    away.
    

    View Slide

37. n
    A apple a
    d y
    a keeps
    t e
    h doctor
    away.
    

    View Slide

38. n apple a
    d y
    a keeps
    t e
    h doctor
    away.
    A
    

    View Slide

39. n
    A apple a
    d y
    a eeps
    t e
    h octor
    away.
    k
    d
    

    View Slide

40. View Slide

41. 1. Typeface
    2. Font size
    3. Line length (measure)
    4. Line height (leading)
    5. Typesetting
    

    View Slide

42. View Slide

43. 1. Typeface
    2. Font size
    3. Line length (measure)
    4. Line height (leading)
    5. Typesetting
    

    View Slide

44. http://sizecalc.com/
    

    View Slide

45. 1. Typeface
    2. Font size
    3. Line length (measure)
    4. Line height (leading)
    5. Typesetting
    

    View Slide

46. Anything from 45 to 75 characters is widely
    regarded as a satisfactory length of line […]
    The 66-character line (counting both letters
    and spaces) is widely regarded as ideal.
    Robert Bringhurst
    

    View Slide

47. Imagine a vast sheet of paper on which straight Lines, Triangles,
    Squares, Pentagons, Hexagons, and other figures, instead of
    remaining fixed in their places, move freely about, on or in the
    surface, but without the power of rising above or sinking below
    it, very much like shadows — only hard and with luminous
    edges — and you will then have a pretty correct notion of my
    country and countrymen.
    Imagine a vast sheet of paper on which straight Lines, Triangles, Squares, Pentagons, Hexagons,
    and other figures, instead of remaining fixed in their places, move freely about, on or in the
    surface, but without the power of rising above or sinking below it, very much like shadows — only
    hard and with luminous edges — and you will then have a pretty correct notion of my country and
    countrymen.
    Imagine a vast
    sheet of paper on
    which straight
    Lines, Triangles,
    Squares,
    Pentagons,
    Hexagons, and
    other figures,
    instead of
    CPL: 100
    CPL: 66
    CPL: 20
    

    View Slide

48. Characters per line
    0 100
    66
    

    View Slide

49. View Slide

50. View Slide

51. 1. Typeface
    2. Font size
    3. Line length (measure)
    4. Line height (leading)
    5. Typesetting
    

    View Slide

52. Longer measures need more lead than short
    ones. Dark faces need more lead than light
    ones. Large-bodied faces need more lead than
    light-bodied ones.
    Robert Bringhurst
    

    View Slide

53. Longer measures need more lead than short
    ones. Dark faces need more lead than light
    ones. Large-bodied faces need more lead than
    light-bodied ones.
    Robert Bringhurst
    

    View Slide

54. Imagine a vast sheet of paper on which straight Lines,
    Triangles, Squares, Pentagons, Hexagons, and other figures,
    instead of remaining fixed in their places, move freely about,
    on or in the surface, but without the power of rising above or
    sinking below it, very much like shadows — only hard and
    with luminous edges — and you will then have a pretty
    correct notion of my country and countrymen.
    Imagine a vast sheet of paper on which straight Lines, Triangles, Squares, Pentagons,
    Hexagons, and other figures, instead of remaining fixed in their places, move freely
    about, on or in the surface, but without the power of rising above or sinking below it,
    very much like shadows — only hard and with luminous edges — and you will then
    have a pretty correct notion of my country and countrymen.
    Imagine a vast sheet of paper on
    which straight Lines, Triangles,
    Squares, Pentagons, Hexagons, and
    other figures, instead of remaining
    fixed in their places, move freely
    about, on or in the surface, but
    without the power of rising above
    or sinking below it, very much like
    Line height: 1.4
    Line height: 1.3
    Line height: 1.2
    

    View Slide

55. Longer measures need more lead than short
    ones. Dark faces need more lead than light
    ones. Large-bodied faces need more lead than
    light-bodied ones.
    Robert Bringhurst
    

    View Slide

56. Imagine a vast sheet of paper on
    which straight Lines, Triangles,
    Squares, Pentagons, Hexagons,
    and other figures, instead of
    remaining fixed in their places,
    move freely about, on or in the
    surface, but without the power
    of rising above or sinking below
    it, very much like shadows —
    only hard and with luminous
    edges — and you will then have
    a pretty correct notion of my
    country and countrymen.
    Line height: 1.2 Line height: 1.4
    Line height: 1 Line height: 1.6
    Imagine a vast sheet of paper on
    which straight Lines, Triangles,
    Squares, Pentagons, Hexagons,
    and other figures, instead of
    remaining fixed in their places,
    move freely about, on or in the
    surface, but without the power
    of rising above or sinking below
    it, very much like shadows —
    only hard and with luminous
    edges — and you will then have
    a pretty correct notion of my
    country and countrymen.
    Imagine a vast sheet of paper on
    which straight Lines, Triangles,
    Squares, Pentagons, Hexagons,
    and other figures, instead of
    remaining fixed in their places,
    move freely about, on or in the
    surface, but without the power
    of rising above or sinking below
    it, very much like shadows —
    only hard and with luminous
    edges — and you will then have
    a pretty correct notion of my
    country and countrymen.
    Imagine a vast sheet of paper on
    which straight Lines, Triangles,
    Squares, Pentagons, Hexagons,
    and other figures, instead of
    remaining fixed in their places,
    move freely about, on or in the
    surface, but without the power
    of rising above or sinking below
    it, very much like shadows —
    only hard and with luminous
    edges — and you will then have
    a pretty correct notion of my
    country and countrymen.
    Imagine a vast sheet of paper on
    which straight Lines, Triangles,
    Squares, Pentagons, Hexagons,
    and other figures, instead of
    remaining fixed in their places,
    move freely about, on or in the
    surface, but without the power
    of rising above or sinking below
    it, very much like shadows —
    only hard and with luminous
    edges — and you will then have
    a pretty correct notion of my
    country and countrymen.
    Line height: 1.8
    

    View Slide

57. Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Line height: 1.2 Line height: 1.4
    Line height: 1 Line height: 1.6
    Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Line height: 1.8
    

    View Slide

58. x x
    

    View Slide

59. x x
    

    View Slide

60. Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Line height: 1.2 Line height: 1.4
    Line height: 1 Line height: 1.6
    Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Line height: 1.8
    

    View Slide

61. Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Line height: 1.2 Line height: 1.4
    Line height: 1 Line height: 1.6
    Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Imagine a vast sheet of paper
    on which straight Lines,
    Triangles, Squares,
    Pentagons, Hexagons, and
    other figures, instead of
    remaining fixed in their
    places, move freely about, on
    or in the surface, but without
    the power of rising above or
    sinking below it, very much
    like shadows — only hard
    and with luminous edges —
    and you will then have a
    pretty correct notion of my
    country and countrymen.
    Line height: 1.8
    (1)
    (1.1)
    (1.2)
    (1.3)
    (1.4)
    

    View Slide

62. Line height (normalised)
    0 4
    1.3
    

    View Slide

63. View Slide

64. Longer measures need more lead than short
    ones. Dark faces need more lead than light
    ones. Large-bodied faces need more lead than
    light-bodied ones.
    Robert Bringhurst
    

    View Slide

65. Imagine a vast sheet of paper on which straight Lines,
    Triangles, Squares, Pentagons, Hexagons, and other
    figures, instead of remaining fixed in their places,
    move freely about, on or in the surface, but without
    the power of rising above or sinking below it, very
    much like shadows — only hard and with luminous
    edges — and you will then have a pretty correct notion
    of my country and countrymen.
    Imagine a vast sheet of paper on which straight Lines,
    Triangles, Squares, Pentagons, Hexagons, and other
    figures, instead of remaining fixed in their places, move
    freely about, on or in the surface, but without the power
    of rising above or sinking below it, very much like
    shadows — only hard and with luminous edges — and
    you will then have a pretty correct notion of my country
    and countrymen.
    Imagine a vast sheet of paper on which straight Lines,
    Triangles, Squares, Pentagons, Hexagons, and other
    figures, instead of remaining fixed in their places, move
    freely about, on or in the surface, but without the power
    of rising above or sinking below it, very much like
    shadows — only hard and with luminous edges — and
    you will then have a pretty correct notion of my country
    and countrymen.
    Line height: 1 Line height: 1 Line height: 1
    

    View Slide

66. Imagine a vast sheet of paper on which straight Lines,
    Triangles, Squares, Pentagons, Hexagons, and other
    figures, instead of remaining fixed in their places,
    move freely about, on or in the surface, but without
    the power of rising above or sinking below it, very
    much like shadows — only hard and with luminous
    edges — and you will then have a pretty correct notion
    of my country and countrymen.
    Imagine a vast sheet of paper on which straight Lines,
    Triangles, Squares, Pentagons, Hexagons, and other
    figures, instead of remaining fixed in their places, move
    freely about, on or in the surface, but without the power
    of rising above or sinking below it, very much like
    shadows — only hard and with luminous edges — and
    you will then have a pretty correct notion of my country
    and countrymen.
    Imagine a vast sheet of paper on which straight Lines,
    Triangles, Squares, Pentagons, Hexagons, and other
    figures, instead of remaining fixed in their places, move
    freely about, on or in the surface, but without the power
    of rising above or sinking below it, very much like
    shadows — only hard and with luminous edges — and
    you will then have a pretty correct notion of my country
    and countrymen.
    Line height: 1.2 Line height: 1.3 Line height: 1.4
    

    View Slide

67. 1. Typeface
    2. Font size
    3. Line length (measure)
    4. Line height (leading)
    5. Typesetting
    

    View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. https://bramstein.com/typography-inspector
    

    View Slide

80. the
    SCIENCE
    typography
    of 2em
    glyph box
    0.5em
    0.5em
    baseline
    kerning
    x-height
    @bram_stein
    https://www.bramstein.com/
    Set in Acumin by Robert Slimbach
    “Metal Movable Type” by Willi Heidelbach
    Thank you.
    

    View Slide