Pro Yearly is on sale from $80 to $50! »

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

    baseline kerning x-height
  2. None
  3. None
  4. 1978 2005

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

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

  7. None
  8. Manual Automated Design

  9. It looks like you’re trying to design something. Have you

    considered using Comic Sans?
  10. None
  11. None
  12. a a a Acumin Pro Madre Script Futura PT

  13. a

  14. a

  15. None
  16. Type

  17. aexpd x-height

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

  21. None
  22. n A

  23. n A apple

  24. n A apple a

  25. n A apple a d y a

  26. n A apple a

  27. n A apple a d y a

  28. n A apple a d y a keeps

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

    h
  30. n A apple a d y a keeps

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

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

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

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

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

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

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

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

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

    h octor away. k d
  40. None
  41. 1. Typeface 2. Font size 3. Line length (measure) 4.

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

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

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

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

  49. None
  50. None
  51. 1. Typeface 2. Font size 3. Line length (measure) 4.

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

  59. x x

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

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

    Line height (leading) 5. Typesetting
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. https://bramstein.com/typography-inspector

  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.