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. Variable Fonts @bram_stein

  2. Ag Ag Ag Ag Ag Ag Ag Ag Ag Ag

    Ag Ag Regular Fonts Variable Fonts
  3. None
  4. None
  5. None
  6. None
  7. e

  8. eeeeee

  9. eeeeeee ee

  10. mmmmm eeee e ee ee f f k k ee

    Width Weight Italic Slant Optical size "wdth" "wght" "ital" "slnt" “opsz"
  11. None
  12. None
  13. Mandy Michael — https://codepen.io/mandymichael/pen/YYaWop

  14. Mandy Michael — https://codepen.io/mandymichael/pen/dJZQaz

  15. Isabel Lee —https://twitter.com/isabellea95/

  16. Tom Lokhorst —https://twitter.com/tomlokhorst/

  17. None
  18. None
  19. Toshi Omagari — http://tosche.net/AnimatedPixelatedVF/

  20. Andrew Johnson — https://twitter.com/Aetherpoint/

  21. None
  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; }
  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; }
  24. body { font-family: Acumin, sans-serif; } @supports (font-variation-settings: normal) {

    body { font-family: Acumin Variable, sans-serif; } }
  25. body { font-family: Acumin, sans-serif; } @supports (font-variation-settings: normal) {

    body { font-family: Acumin Variable, sans-serif; } }
  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
  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
  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
  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
  30. font-variation-settings: normal; font-variation-settings: “SKLD” 600; font-variation-settings: “SKLD” 600, “BLDB” 670;

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

    @keyframes changeweight { from { font-weight: 1; } to { font-weight: 999; } }
  32. Roel Nieskens —https://github.com/RoelN/Color-Variable-Emoji font-variation-settings: “crap” 800;

  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
  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.
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. Acumin Pro 3.9Mb Acumin Pro Variable 270 Kb Ag Ag

    Ag Ag … Ag Ag Ag Ag Ag Ag Ag
  50. Exchange (regular, italic, bold) Brandon Text (regular, italic, bold) Oxide

    Solid (regular) Ambroise Francois (medium) Proxima Nova (thin, regular, bold)
  51. Exchange (regular, italic, bold) Brandon Text (regular, italic, bold) Oxide

    Solid (regular) Ambroise Francois (medium) Proxima Nova (thin, regular, bold)
  52. None
  53. THE END Karmina Sans • Acumin Pro • Fit •

    Source Code Pro @bram_stein
  54. RESOURCES http://axis-praxis.org/ https://v-fonts.com/ http://play.typedetail.com/