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

Are variable fonts the future of web typography?

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!

Bram Stein

September 21, 2018
Tweet

More Decks by Bram Stein

Other Decks in Programming

Transcript

  1. Variable Fonts
    @bram_stein

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. @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 full-size slide

  11. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide