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!

Transcript

1. Variable Fonts @bram_stein
2. Ag Ag Ag Ag Ag Ag Ag Ag Ag Ag Ag Ag Regular Fonts Variable Fonts
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"
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/
19. Toshi Omagari — http://tosche.net/AnimatedPixelatedVF/
20. Andrew Johnson — https://twitter.com/Aetherpoint/
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.
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)
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/