The Science of Typography - DIBI

A6ab7669f1496fb8df8197f55ec6f390?s=47 Bram Stein
March 31, 2017

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.

A6ab7669f1496fb8df8197f55ec6f390?s=128

Bram Stein

March 31, 2017
Tweet

Transcript

  1. 2.
  2. 3.
  3. 5.

    The web was (and to a large extend still is)

    not a good platform for high quality typography.
  4. 7.
  5. 10.
  6. 11.
  7. 13.

    a

  8. 14.

    a

  9. 15.
  10. 16.
  11. 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
  12. 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
  13. 21.
  14. 22.

    n A

  15. 23.
  16. 33.
  17. 35.
  18. 36.
  19. 37.
  20. 38.
  21. 39.

    n A apple a d y a eeps t e

    h octor away. k d
  22. 40.
  23. 41.

    1. Typeface 2. Font size 3. Line length (measure) 4.

    Line height (leading) 5. Typesetting
  24. 42.
  25. 43.

    1. Typeface 2. Font size 3. Line length (measure) 4.

    Line height (leading) 5. Typesetting
  26. 45.

    1. Typeface 2. Font size 3. Line length (measure) 4.

    Line height (leading) 5. Typesetting
  27. 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
  28. 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
  29. 49.
  30. 50.
  31. 51.

    1. Typeface 2. Font size 3. Line length (measure) 4.

    Line height (leading) 5. Typesetting
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. 58.

    x x

  39. 59.

    x x

  40. 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
  41. 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)
  42. 63.
  43. 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
  44. 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
  45. 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
  46. 67.

    1. Typeface 2. Font size 3. Line length (measure) 4.

    Line height (leading) 5. Typesetting
  47. 68.
  48. 69.
  49. 70.
  50. 71.
  51. 72.
  52. 73.
  53. 74.
  54. 75.
  55. 76.
  56. 77.
  57. 78.
  58. 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.