Dynamic Typographic Systems with Variable Fonts

A presentation at DotCSS in in Paris, France by Jason Pamental

Modern developments in CSS make it easier than ever to create robust, scalable, elegant typographic systems on the web. Add variable fonts and the design, technical, and performance benefits are really exciting. We’ll look at how to combine them with other CSS capabilities like custom properties, calculations, and grid to create a whole new way to think about design and development. We’ll see how they work together by using some variable fonts in layouts that work across screen dimensions, accessibility needs, design requirements, and even network speeds—better than you thought possible.

I’ll also be showing the road ahead for web font performance with a sneak peak at what the W3C Web Font Working Group is researching, including a live demo of Google’s proof-of-concept showcasing the font serving speed increase potential.

[Note: the embedded presentation isn’t quite perfect in how it scales, but it’s at last mostly readable :)]

Resources

The following resources were mentioned during the presentation or are useful additional information.

  • An Introduction to Variable Fonts

    An introduction I wrote for the annual 24ways Web Design/Development ‘Advent Calendar’ site. It’s got loads of embedded examples and code too.

  • Web Typography News

    A weekly newsletter I publish with tips and resources about web typography.

  • Using variable fonts right: the latest word on the code

    The most up-to-date techniques, specs, and support for implementing variable fonts.

  • Faux Foundery

    Fascinating variable font solution to missing greek glyphs in web fonts.

  • Recursive variable font

    No, a font called Recursive. And it’s variable. By Stephen Nixon for Google Fonts. It’s lovely, and you should try it.

  • Intro to the Google Fonts APIv2 (beta)

    I wrote a bit about the new API and provide a bunch of sample bits. Very early, very beta, very awesome: serve variable fonts from Google.

  • Resources for learning typography

    I get asked a bit about where to go to start learning about typography, so I put together a collection of good books and resources to get you started.

  • Light mode and user preferences in the browser

    This was inspired by a discussion with Marcy Sutton, Val Head, and others about how to design for light modes, while still allowing the user to express a preference which can then override the general OS preference. I think it’s a useful pattern for other kinds of user preferences like ‘prefers reduced motion’ as well.

  • Ad Hoc Blog

    This is the first part of a redesign that I’ve been working on with Ad Hoc. Featuring two beautiful variable fonts and an entirely new design system that incorporates virtually all of the dynamic typographic techniques shown in this presentation.

  • Digging in to Dynamic Typography

    I wrote about these techniques in detail in my newsletter a little while back. Lots of details and links to more demo code.

  • Mandy Michael’s fluid font weight demo

    Mandy created a really great JS method for using JS with a CSS custom property to scale font weight based on viewport size. Will definitely be looking at adding this to future projects!

  • Google’s ‘Progressive Font Enrichment’ proof-of-concept demo

    This is the first exploration of what we’re working on in the W3C Web Fonts Working Group—which will lead to some truly revolutionary changes in how we serve fonts on the web.

  • IBM Plex Sans Variable

    Brand new! IBM has just released a 2-axis (width and weight) variable version of Plex Sans.

  • Remix of Jeffrey Zeldman’s Poynter Institute demo news typography

    This is my remix of Jeffrey Zeldman’s news typography demo that he created for the Poynter Institute, adding in a whole bunch of responsive typography and variable fonts.

  • Typetura.js

    Scott Kellum and Sal Hernandez’ fluid typesetting tool. Really interesting, and able to scale more than just type. Well worth a look!

  • Textblock.io from Glyphic

    Another Javascript tool for typesetting blocks of text from Theo Rosendorf and Glyphic.

  • Dark Mode in CSS

    Great run-down on different techniques for dealing with day/night modes on the web.

  • MDN Variable Fonts Guide

    I guide I wrote on the MDN site covering the basics of implementing variable fonts.

  • Variable Font Demos on CodePen

    A collection of demos I've created on CodePen for you to play with!

  • Variable Font resources on my site

    Lots of links, articles, books, talks and whatnot

  • Essay explaining variable fonts as a concept

    Good for less techy and more designy/brandy folks as well.

  • Firefox (font tools!!!)

    Explore the new fonts tab in the Firefox Dev Tools that will show you everything available in a given font (normal or variable, but let’s all agree that the variable ones are way cooler)

  • Avenir Next

    It's an earlier beta, but still an interesting experiment. Hoping a fuller release will be out by the end of the year.

  • Wentin's Font Playground

    Wentin is a designer/developer at Adobe, and she has pioneered some truly unique and compelling UI ideas for working with variable fonts. Really amazing stuff.

  • Cera Pro by Typemates

    (Variable font is a beta, but you should ask them about it and tell 'em I sent ya)

  • Wakamai Fondue (What Can My Font Do... get it?)

    Simple drag-and-drop web interface to discover all the features available in a given font file.

  • Axis Praxis

    The original variable fonts playground.

  • V-Fonts.com

    Nick Sherman's variable fonts catalog site

  • Roslindale by DJR

    David Jonathan Ross' design is what forms the primary typography for the talk and for my own site.

  • FF Meta from Monotype

    This is a fantastic typeface, and it was a real treat to design the demo page for it's introduction.

  • Amstelvar by Type Network

    One of the first variable fonts, and still one of the most compelling ones to showcase the breadth of possibilities.

  • W3C Github CSS Fonts Level 4 (variable fonts and other bits)

    Read up on the features and issues, provide feedback, and help shape the direction of the web

  • State of Georgia Board of Workers Compensation

    One of the first two sites launched with a typographic system like I’m showing here, using Source Serif Variable (where supported) and static web fonts where they aren’t. Fantastic dev implementation done by Lullabot.

  • State of Georgia ADA Coordinator’s Office

    One of the first two sites launched with a typographic system like I’m showing here, using Source Serif Variable (where supported) and static web fonts where they aren’t. Fantastic dev implementation done by Lullabot.

Code

The following code examples from the presentation can be tried out live.