Are variable fonts the future of web typography?

A6ab7669f1496fb8df8197f55ec6f390?s=47 Bram Stein
September 21, 2018

Are variable fonts the future of web typography?

You may have heard about variable fonts and how amazing they are (or not, in which case you should attend this talk!). But what exactly are variable fonts, and why are so many people excited about them? Is it because they offer exciting new ways to animate type? Or to endlessly tweak your typography? Or are they the answer to all your web font performance problems? Let’s find out!

A6ab7669f1496fb8df8197f55ec6f390?s=128

Bram Stein

September 21, 2018
Tweet

Transcript

  1. 2.

    Ag Ag Ag Ag Ag Ag Ag Ag Ag Ag

    Ag Ag Regular Fonts Variable Fonts
  2. 3.
  3. 4.
  4. 5.
  5. 6.
  6. 7.

    e

  7. 8.
  8. 10.

    mmmmm eeee e ee ee f f k k ee

    Width Weight Italic Slant Optical size "wdth" "wght" "ital" "slnt" “opsz"
  9. 11.
  10. 12.
  11. 17.
  12. 18.
  13. 21.
  14. 22.

    @font-face { font-family: Acumin; src: url(acumin.woff2) format(“woff2”); font-weight: 400; }

    … @font-face { font-family: AcuminVF; src: url(acumin-variable.woff2) format(“woff2”); font-weight: 1 999; }
  15. 23.

    @font-face { font-family: Acumin; src: url(acumin.woff2) format(“woff2”); font-weight: 400; }

    … @font-face { font-family: Acumin Variable; src: url(acumin-variable.woff2) format(“woff2”); font-weight: 1 999; }
  16. 24.
  17. 25.
  18. 26.

    Ag Regular Fonts Variable Fonts font-weight: 300 font-weight: 400 font-weight:

    600 font-weight: 700 font-weight: 800 font-weight: 900 Ag Ag Ag Ag Ag Ag Ag Ag Ag Ag Ag font-weight: 300 font-weight: 400 font-weight: 600 font-weight: 700 font-weight: 800 font-weight: 900
  19. 27.

    Ag Regular Fonts Variable Fonts font-weight: 300 font-weight: 400 font-weight:

    600 font-weight: 700 font-weight: 800 font-weight: 900 Ag Ag Ag Ag Ag Ag Ag Ag Ag Ag Ag font-weight: 300 font-weight: 400 font-weight: 600 font-weight: 700 font-weight: 800 font-weight: 900 font-weight: 250
  20. 28.

    Ag Regular Fonts Variable Fonts font-weight: 300 font-weight: 400 font-weight:

    600 font-weight: 700 font-weight: 800 font-weight: 900 Ag Ag Ag Ag Ag Ag Ag Ag Ag Ag Ag font-weight: 300 font-weight: 400 font-weight: 600 font-weight: 700 font-weight: 800 font-weight: 900 font-weight: 200 font-weight: 487
  21. 29.

    font-weight: [number]; font-stretch: [normal | ultra-condensed | extra-condensed | condensed

    | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>]; font-style: [normal | oblique | italic | <angle>]; font-optical-sizing: [auto|none]; Width Weight Italic/Slant Optical size
  22. 31.

    h1 { font-weight: 1; animation: 3s infinite alternate changeWeight; }

    @keyframes changeweight { from { font-weight: 1; } to { font-weight: 999; } }
  23. 33.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac

    dictum enim, vel convallis velit. Duis gravida, ex vitae ornare blandit, purus augue molestie ipsum, in ultrices ex lectus eget mi. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla cursus sed mauris vulputate fermentum. Fusce eget erat tristique eros placerat malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac dictum enim, vel convallis velit. Duis gravida, ex vitae ornare blandit, purus augue molestie ipsum, in ultrices ex lectus eget mi. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla cursus sed mauris vulputate fermentum. Fusce eget erat tristique eros placerat malesuada. Lorem ipsum Lorem ipsum
  24. 34.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac

    dictum enim, vel convallis velit. Duis gravida, ex vitae ornare blandit, purus augue molestie ipsum, in ultrices ex lectus eget mi. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla cursus sed mauris vulputate fermentum. Fusce eget erat tristique eros placerat malesuada. Lorem ipsum Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac dictum enim, vel convallis velit. Duis gravida, ex vitae ornare blandit, purus augue molestie ipsum, in ultrices ex lectus eget mi. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla cursus sed mauris vulputate fermentum. Fusce eget erat tristique eros placerat malesuada.
  25. 35.
  26. 36.
  27. 37.
  28. 38.
  29. 39.
  30. 40.
  31. 41.
  32. 42.
  33. 43.
  34. 44.
  35. 45.
  36. 46.
  37. 47.
  38. 48.
  39. 49.

    Acumin Pro 3.9Mb Acumin Pro Variable 270 Kb Ag Ag

    Ag Ag … Ag Ag Ag Ag Ag Ag Ag
  40. 50.

    Exchange (regular, italic, bold) Brandon Text (regular, italic, bold) Oxide

    Solid (regular) Ambroise Francois (medium) Proxima Nova (thin, regular, bold)
  41. 51.

    Exchange (regular, italic, bold) Brandon Text (regular, italic, bold) Oxide

    Solid (regular) Ambroise Francois (medium) Proxima Nova (thin, regular, bold)
  42. 52.
  43. 53.