Variable fonts, explained for designers

Variable fonts are font files that hold a continuous range of styles rather than a fixed set. Instead of separate files for Regular, Medium, Semibold and Bold, one variable file contains every weight between its lightest and heaviest, and often other ranges too, such as width or optical size. You choose any point along each range, called an axis, so a headline can sit at weight 680 and a caption at 430 if that is what reads best.

The format arrived as part of the OpenType specification in 2016 and is now supported by every current major browser and the main design tools. This guide covers what the axes do, when variable fonts are worth using, and how to set them up in CSS. For the bigger picture of choosing type, see typography basics and brand fonts.

Variable font axes and what each one does

An axis is a design dimension the type designer has drawn at its extremes; the font interpolates everything in between. Five axes are registered in the OpenType specification and have standard four-letter tags. Type designers can add their own custom axes, which are written in capitals.

Custom axes are where fonts get personality. Roboto Flex has a grade axis (GRAD) that changes stroke weight without changing letter width. Fraunces has SOFT for rounder terminals and WONK for its quirkier letterforms. Recursive has MONO and CASL axes that move it from sans to monospaced and from linear to casual. You can explore all of them on Google Fonts, which lets you filter for variable families.

Why optical size matters most

Weight gets the attention, but optical size is often the most useful axis. Metal type was cut separately for each size: small sizes had sturdier strokes, larger x-heights and looser spacing; large sizes were finer, with more contrast and tighter spacing. Digital fonts lost that when one outline was scaled to every size. An opsz axis brings it back.

With font-optical-sizing: auto (the default in browsers), a font with an opsz axis adjusts itself to the font size you set. You don't need to do anything except choose a font that has the axis. This is especially helpful on designs with a big headline and small supporting text in one family, which is most social posts and landing pages.

When variable fonts are worth using

File size is the honest trade-off. A variable file carries the data for every style, so it is usually larger than one static weight but smaller than several. If a site loads Regular and Bold only, two static files may well be lighter. If it loads four weights and an italic, one variable file usually wins, and you gain every weight in between for free.

In-between weights are more useful than they sound. Light text on a dark or colourful ground looks heavier than the same weight on white, so you might set white text on a gradient at 460 instead of 500 to match a dark-on-light version optically. The effect is subtle but it is what makes a type system feel tuned. Text on a gradient explains the wider legibility problem.

How to use variable fonts in CSS

Declare the font once with a range for each axis, then use normal properties like font-weight and font-stretch. Reach for font-variation-settings only for custom axes, because it overrides every axis at once and is not inherited in a friendly way. MDN's variable fonts guide covers the details.

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-variable.woff2") format("woff2");
  font-weight: 100 900;   /* the wght range in the file */
  font-stretch: 75% 125%; /* the wdth range, if it has one */
  font-display: swap;
}

body {
  font-family: "Brand Sans", system-ui, sans-serif;
  font-weight: 420;
  font-optical-sizing: auto;
}

h1 {
  font-weight: 720;
  font-stretch: 90%;
}

.on-dark {
  font-weight: 390; /* light on dark reads heavier */
}

/* Custom axes go through font-variation-settings. */
.soft {
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

Setting up a variable type system

1. 1

   Check the axes

   Open the font's specimen page and note every axis and its range. Confirm the languages and characters you need are included in the variable version.

2. 2

   Define roles, not weights

   Decide weights per role: body, emphasis, subheading, headline, label. A system of five tuned values beats nine standard ones used at random.

3. 3

   Tune for grounds

   Create a slightly lighter weight for light-on-dark text and check both against each other at real size.

4. 4

   Let optical size work

   Keep font-optical-sizing: auto unless you have a reason to fix it, and check headlines and captions side by side.

5. 5

   Write it down

   Record the font file, axis ranges and every role's values in your brand style guide, so nobody rebuilds them from memory.

Variable fonts reward restraint. The point is not to use every value but to pick the exact few that make your type read well everywhere it appears, from a 16 px paragraph to a 200 px display headline.