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
   

   View Slide

2. Ag
   Ag
   Ag
   Ag Ag Ag
   Ag Ag
   Ag Ag Ag
   Ag
   Regular Fonts Variable Fonts
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. e
   

   View Slide

8. eeeeee
   

   View Slide

9. eeeeeee
   ee
   

   View Slide

10. mmmmm
    eeee e ee
    ee
    f f
    k
    k
    ee
    Width
    Weight
    Italic
    Slant
    Optical size
    "wdth"
    "wght"
    "ital"
    "slnt"
    “opsz"
    

    View Slide

11. View Slide

12. View Slide

13. Mandy Michael — https://codepen.io/mandymichael/pen/YYaWop
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. View Slide

18. View Slide

19. Toshi Omagari — http://tosche.net/AnimatedPixelatedVF/
    

    View Slide

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

    View Slide

21. View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

29. font-weight: [number];
    font-stretch: [normal | ultra-condensed | extra-condensed |
    condensed | semi-condensed | semi-expanded | expanded |
    extra-expanded | ultra-expanded | ];
    font-style: [normal | oblique | italic | ];
    font-optical-sizing: [auto|none];
    Width
    Weight
    Italic/Slant
    Optical size
    

    View Slide

30. font-variation-settings: normal;
    font-variation-settings: “SKLD” 600;
    font-variation-settings: “SKLD” 600,
    “BLDB” 670;
    

    View Slide

31. h1 {
    font-weight: 1;
    animation: 3s infinite alternate changeWeight;
    }
    @keyframes changeweight {
    from {
    font-weight: 1;
    }
    to {
    font-weight: 999;
    }
    }
    

    View Slide

32. Roel Nieskens —https://github.com/RoelN/Color-Variable-Emoji
    font-variation-settings: “crap” 800;
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. Acumin Pro
    3.9Mb
    Acumin Pro Variable
    270 Kb
    Ag
    Ag
    Ag Ag …
    Ag Ag Ag
    Ag Ag Ag
    Ag
    

    View Slide

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

    View Slide

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

    View Slide

52. View Slide

53. THE END
    Karmina Sans • Acumin Pro • Fit • Source Code Pro
    @bram_stein
    

    View Slide

54. RESOURCES
    http://axis-praxis.org/
    https://v-fonts.com/
    http://play.typedetail.com/
    

    View Slide