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