Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Line breaking, justification, and variable fonts

Bram Stein
March 09, 2018

Line breaking, justification, and variable fonts

A look at line breaking and justification, and how variable fonts will improve justified text.

Presented at Robothon Conference 2018.

Bram Stein

March 09, 2018
Tweet

More Decks by Bram Stein

Other Decks in Design

Transcript

  1. Line Breaking,
    Justification,
    and Variable Fonts
    @bram_stein | Robothon 2018

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. n
    A apple a day kee

    View Slide

  8. View Slide

  9. n
    A

    View Slide

  10. n
    A apple

    View Slide

  11. n
    A apple a

    View Slide

  12. n
    A apple a d y
    a

    View Slide

  13. n
    A apple a

    View Slide

  14. n
    A apple a
    d y
    a

    View Slide

  15. n
    A apple a
    d y
    a keeps

    View Slide

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

    View Slide

  17. n
    A apple a
    d y
    a keeps

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. r
    A ppl
    da eeps
    th octo
    aw
    d
    k
    n e a
    .
    a
    y
    a
    y
    e

    View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. 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 has seen so much, was…

    View Slide

  33. 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 has seen so much, was…
    Line 1

    View Slide

  34. 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 has seen so much, was…
    Line 1

    View Slide

  35. 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 has seen so much, was…
    Line 1
    Line 2

    View Slide

  36. 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 has seen so much, was…
    Line 1
    Line 2

    View Slide

  37. 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 has seen so much, was…
    Line 1
    Line 2
    Line 3

    View Slide

  38. View Slide

  39. hy•phen•a•tion

    View Slide

  40. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho

    View Slide

  41. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1

    View Slide

  42. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1

    View Slide

  43. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1
    Line 2

    View Slide

  44. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1
    Line 2
    Line 3

    View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. times when wishing still worked, there lived a
    king whose daughters were all beautiful; and
    the youngest was so beautiful that the sun itself,

    View Slide

  50. times when wishing still worked, there lived a
    king whose daughters were all beautiful; and
    the youngest was so beautiful that the sun
    itself,

    View Slide

  51. times when wishing still worked, there lived a
    king whose daughters were all beautiful; and
    the youngest was so beautiful that the sun itself,

    View Slide

  52. times when wishing still worked, there lived a
    king whose daughters were all beautiful; and
    the youngest was so beautiful that the sun itself,
    which has seen so much, was astonished
    whenever it shone in her face. Close by the
    king’s castle lay a great dark forest, and under an

    View Slide

  53. times when wishing still worked, there lived a
    king whose daughters were all beautiful; and
    the youngest was so beautiful that the sun itself,
    which has seen so much, was astonished
    whenever it shone in her face. Close by the
    king’s castle lay a great dark forest, and under
    an old lime-tree in the forest was a well, and
    when

    View Slide

  54. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1

    View Slide

  55. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1
    Line 1.1

    View Slide

  56. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1
    Line 1.1

    View Slide

  57. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1
    Line 1.1
    Line 2

    View Slide

  58. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1
    Line 1.1
    Line 2.1
    Line 2

    View Slide

  59. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1
    Line 1.1
    Line 2.1
    Line 2

    View Slide

  60. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1
    Line 1.1
    Line 2.1
    Line 2
    Line 3

    View Slide

  61. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1
    Line 1.1
    Line 2.1
    Line 2
    Line 3
    Line 3.1

    View Slide

  62. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1
    Line 1.1
    Line 2.1
    Line 2
    Line 3
    Line 3.1
    Line 3.2

    View Slide

  63. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1
    Line 1.1
    Line 2.1
    Line 2
    Line 3
    Line 3.1
    Line 3.2
    Line 3.3

    View Slide

  64. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1
    Line 1.1
    Line 2.1
    Line 2
    Line 3
    Line 3.1
    Line 3.2
    Line 3.3
    Line 3.4

    View Slide

  65. wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it sho
    Line 1
    Line 1.1
    Line 2.1
    Line 2
    Line 3
    Line 3.1
    Line 3.2
    Line 3.3
    Line 3.4

    View Slide

  66. View Slide

  67. 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. • Try with more variable fonts
    • “wdth” axis that goes to extended
    • Figure out percentages
    • Smarter consecutive lines
    Next steps

    View Slide

  80. Fin
    Fonts in use:
    Myriad by Carol Twombly and Robert Slimbach
    Leonardo Fascia by Quentin Schmerber
    Source Code Pro by Paul D. Hunt
    Acumin by Robert Slimbach

    View Slide