The Science of Typography

A6ab7669f1496fb8df8197f55ec6f390?s=47 Bram Stein
November 13, 2015

The Science of Typography

This is going to be a weird talk. You’ve probably all seen automated “design” software and algorithms come and go. They promise the sky but often restrict you and produce bland and generic results. Should you not use such software at all? What if there are tools that analyse and guide you to create better designs? This talk will explore typographic analysis and what we as designers can learn from math and computer science.

A6ab7669f1496fb8df8197f55ec6f390?s=128

Bram Stein

November 13, 2015
Tweet

Transcript

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

    In olden times when wishing still helped one, there lived

    a king whose daughters were all beautiful; and the youngest was so beautiful there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which… there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that the sun itself, which… In olden times when wishing still helped one, In olden times when wishing still helped one, there lived a king whose daughters were all there lived a king whose daughters were all beautiful In olden times when wishing still helped one, Hyphenation & Justification Math Typesetting Font design
  5. 7.

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

    not a good platform for high quality typography.
  6. 8.
  7. 10.

    Typeset A small and fast hyphenation engine written in JavaScript.

    Can be used in Node.js and the browser. github.com/bramstein/hypher Typeset is an implementation of the Knuth and Plass line breaking algorithm using JavaScript. github.com/bramstein/typeset Hypher Web Font Loader Web Font Loader gives you added control when using linked fonts via @font-face. github.com/typekit/webfontloader
  8. 11.
  9. 15.
  10. 16.
  11. 18.
  12. 19.
  13. 20.
  14. 21.
  15. 22.
  16. 23.
  17. 25.

    a

  18. 26.

    a

  19. 27.
  20. 28.
  21. 29.
  22. 30.

    Geogrotesque Gill Sans Arial 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. a a
  23. 31.

    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
  24. 32.

    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
  25. 34.
  26. 35.
  27. 36.

    n A

  28. 37.
  29. 47.
  30. 49.
  31. 50.
  32. 51.
  33. 52.
  34. 53.

    n A apple a d y a eeps t e

    h octor away. k d
  35. 54.
  36. 55.
  37. 56.
  38. 57.
  39. 58.

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

    Line height (leading) 5. Typesetting
  40. 59.
  41. 60.

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

    Line height (leading) 5. Typesetting
  42. 62.

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

    Line height (leading) 5. Typesetting
  43. 63.

    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
  44. 64.

    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
  45. 66.

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

    Line height (leading) 5. Typesetting
  46. 67.

    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
  47. 68.

    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
  48. 69.

    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
  49. 70.

    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
  50. 71.

    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
  51. 72.

    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
  52. 73.

    x x

  53. 74.

    x x

  54. 75.

    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
  55. 76.

    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)
  56. 78.

    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
  57. 79.

    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
  58. 80.

    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
  59. 81.

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

    Line height (leading) 5. Typesetting
  60. 82.
  61. 83.
  62. 84.
  63. 85.
  64. 86.
  65. 87.
  66. 88.
  67. 89.
  68. 90.

    Typographic pressure exists when text is set in a sub-optimal

    way. Pressure increases and decreases with distance from the ideal setting.
  69. 91.
  70. 92.
  71. 93.
  72. 94.

    the SCIENCE typography of 2em glyph box 0.5em 0.5em baseline

    kerning x-height Twitter: @bram_stein Set in Acumin by Robert Slimbach “Metal Movable Type” by Willi Heidelbach Thank you.