Variable fonts

Variable fonts

Traditionally each web font has had a single style. We’d typically need at least two web fonts – a regular and italic. We’d then want a bold version too, which would take us up to three web fonts, or four including bold italic. The number of fonts quickly balloon, which is problematic as they’re slow to load and delay the rendering of web pages. It’s these performance constraints that lead us to use fewer web fonts than we’d like to.

Enter variable fonts

Variable fonts allow a single font file to behave like a whole bunch. They can contain axes of variation for things we’d like to play around with like font weight, font width, slant, and optical size.

Variable fonts also allow font designers to expose custom axes of variation. Try out the custom axes on Buffalo Gals. Or play with the serifs on Amstelvar.

Performance

When we are using more than a couple of styles, using variable fonts gives us a smaller file size and faster download performance.

The reason for the savings is that fonts are stored as a set of mathematical curves. Variable fonts give you the ability to interpolate between two or more set of curves called masters and as a result generate a number of intermediate weights without storing additional data.

Mathieu Triay, who created the awesome variable font Marvin Visions.

I’m using IBM Plex Sans on this site, which contains axes for weight and width. I used the source code from Github to build a version of the font that doesn’t include the lighter font weights (100 up to 400). My version comes in at 21KB for the roman version and 25KB for the italic, making a 36KB total. A single regular woff2 web font for Plex Sans with the same set of glyphs would be 10KB or 11KB for the italic. Using three font weights would take us to 63KB, 75% larger than the variable font version. The more styles we use, the more the savings add up.

Typesetting

It’s usual for typesetters to make adjustments to type depending on its context. One example is tracking. If you have an optically small type style like for a caption or button, you open it up slightly to improve its legibility. A large type style like a display title is tightened so it’s not too loose. It’s small tweaks like these that add polish to design, and variable fonts give us more control than we’ve ever had before.

Some micro-adjustments we can make to our typography include:

  • changing the font-weight in light theme vs. dark theme so they look the same
  • condensing the font width on narrow viewports to fit more on a line
  • making smaller headings in our type scale slightly heavier so they stand out from the body text
  • changing the grade or weight based on ambient lighting conditions
  • using the optical size axis to make text legible at small sizes

Try adjusting the type on this page to see how it affects the legibility.

Finding and using variable fonts

Variable fonts already have excellent browser support, however, they are a relatively new technology and there aren’t all that many high-quality variable fonts around. v-fonts.com contains a directory of variable fonts, although most are low quality or experimental. Google fonts was recently updated to support variable fonts and contains 32 variable fonts to choose from at the time of writing. I like Work Sans, Public Sans and Literata.

More on variable fonts

Next

Surface Studio makes Microsoft’s mission make sense

Microsoft’s Surface Studio in desktop position