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. @bram_stein the SCIENCE typography of 2em glyph box 0.5em 0.5em

    baseline kerning x-height
  2. None
  3. None
  4. None
  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
  6. 1978 2005

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

    not a good platform for high quality typography.
  8. None
  9. ¯\_(ツ)_/¯ JavaScript

  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
  11. None
  12. Fill-in-the-gaps Automated Design

  13. Fill-in-the-gaps Automated Design

  14. Fill-in-the-gaps Automated Design

  15. None
  16. None
  17. Fill-in-the-gaps Automated Design

  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. a a a Acumin Pro Madre Script Futura PT

  25. a

  26. a

  27. None
  28. Type

  29. aexpd

  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
  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
  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
  33. n A apple a day kee

  34. None
  35. None
  36. n A

  37. n A apple

  38. n A apple a

  39. n A apple a d y a

  40. n A apple a

  41. n A apple a d y a

  42. n A apple a d y a keeps

  43. n A apple a d y a keeps t e

    h
  44. n A apple a d y a keeps

  45. n A apple a d y a keeps t e

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

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

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

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

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

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

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

    doctor away. A
  53. n A apple a d y a eeps t e

    h octor away. k d
  54. n A apple a d y a keeps t e

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

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

    h doctor away.
  57. None
  58. 1. Typeface 2. Font size 3. Line length (measure) 4.

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

    Line height (leading) 5. Typesetting
  61. http://sizecalc.com/

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

    Line height (leading) 5. Typesetting
  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
  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
  65. Characters per line 0 100 66

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

    Line height (leading) 5. Typesetting
  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
  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
  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
  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
  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
  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
  73. x x

  74. x x

  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
  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)
  77. Line height (normalised) 0 4 1.3

  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
  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
  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
  81. 1. Typeface 2. Font size 3. Line length (measure) 4.

    Line height (leading) 5. Typesetting
  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. None
  89. None
  90. Typographic pressure exists when text is set in a sub-optimal

    way. Pressure increases and decreases with distance from the ideal setting.
  91. None
  92. None
  93. None
  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.