Variable fonts are fonts that hold a whole range of weights, widths and other styles in a single file, so a designer can pick any point along each range instead of choosing from a fixed list. They are a feature of the OpenType font format.
The idea sits within the larger subject of typography basics, and it changes how weight and width are chosen on screen, in layouts and in presentation mockups.
What a variable font is
MDN’s variable fonts guide describes them as an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style.
The OpenType specification states the principle plainly in its font variations overview: a variable font allows for continuous variation along some given design axis, such as weight. Continuous means the steps between Light and Bold are not fixed. Any value in between is a valid style.
A traditional family is a set of separate files. A variable family is a single file with defined ranges, and the familiar style names become named points on those ranges. In the words of the same specification, a font designer can pre-define certain instances to have particular names, so Light or Semibold still exist, but they are no longer the only options.
Axes and how they work
A variable font is built around axes. A weight axis runs from thin to heavy and a width axis from narrow to wide. The web.dev introduction to variable fonts explains that the font starts from a default style, usually the Regular, and connects it to other styles in a continuous range. Any one style along the range is called an instance.
The same article says there are five registered axes, which control known, predictable features of the font: weight, width, optical size, slant and italics. Each has a four-character lowercase tag used to set its value in CSS. Beyond those, a font can contain custom axes that control any design aspect the type designer wishes, and custom tags are always written in uppercase to tell them apart.
The axes on offer are the designer’s decision. As web.dev puts it, since the font developer defines which axes are available in a variable font, and which values they can have, it is essential to find out what each font offers. Some fonts offer a single weight axis and others offer many controls.
Italics and slant
Italic and slant behave differently. According to web.dev, some typefaces have Roman and Italic outlines that cannot be blended smoothly, so the italic axis toggles from Roman to Italic contours rather than interpolating between them. The slant axis, in contrast, simply tilts the regular style. Both are useful, and a family may include one, both or neither.
Optical size
The optical size axis changes letter shapes to suit the size they are set at, with fine detail for large text and sturdier forms for small text. The web.dev guide notes that the CSS property font-optical-sizing is set to auto by default, which makes the browser set the axis value based on the font-size.
Why they matter for file size
The practical case is the number of files. MDN notes that a typical body-copy setup needs at least four files: regular, italic, bold, and bold italic. Elsewhere, web.dev says that including only the Regular and Bold styles, plus their italic counterparts, can amount to 500 KB or more of font data.
MDN states that the single variable file would be larger than a single font, but in most cases smaller or about the same size as the 4 you might load for body copy, as the variable fonts guide puts it. The saving comes less from a smaller file than from fewer requests and from access to more styles at the same cost.
That second benefit is a design one. When each weight costs a download, designers tend to limit themselves to the few they can afford. A variable file removes that pressure, though it is larger than any single static font. Loading strategy then becomes the concern, covered in web font performance.
Using variable fonts in CSS
Variable fonts are loaded through the same @font-face rule as static web fonts, with a difference in how ranges are declared. The web.dev article explains that instead of telling the browser which specific weight a font provides, the rule now gives it the range of weights supported by the font.
For the two most common axes the existing properties do the work. The same article says the axes you can reliably set from CSS are the wght axis through font-weight, and the wdth axis through font-stretch. That means a heading can use a weight between the standard steps, or a layout can use a slightly narrower width for dense data, without any new syntax.
For everything else there is font-variation-settings. MDN’s page on font-variation-settings calls it a low-level mechanism and advises using it only when no basic properties exist to set those features. Custom axes always need it. The web.dev example is a grade axis: it changes the weight of the font without changing the widths, so line breaks do not change.
Support is not a concern for most projects. MDN lists the property as available across browsers since September 2018.
Design choices and cautions
More freedom brings more ways to go wrong. The web.dev authors warn that the danger with any new technology is possible misuse, and settings that are overly artistic or exploratory could also decrease legibility of the actual text. Expressive axis play suits a title, while body copy benefits from conventional settings.
A few habits keep variable type disciplined:
- Choose a small set of weights and widths for the system and name them, rather than picking a new value for each element.
- Use the optical size axis automatically wherever the font offers it.
- Test line breaks when weight or width changes, because wider letters reflow text.
- Keep expressive axis settings for display text.
Licensing also deserves attention. The terms for a variable font may differ from those for static files of the same family, so check how the licence describes a single file with many styles. The overview of font licensing explains how to read those terms and when to ask the rights holder.
Frequently asked questions
Are variable fonts the same as font families?
No. A family is a set of related styles. A variable font is one file that can contain many of those styles along continuous axes, with named instances for familiar styles such as Bold.
What does a registered axis mean?
It is an axis defined in the font specification with a known meaning and a lowercase four-character tag. Weight, width, optical size, slant and italics are the registered ones, and CSS can control some of them through ordinary properties.
Do variable fonts always make pages faster?
Not always. They reduce the number of files when several styles are needed, but a file with many axes can be large. Measure the actual font data for the styles a page uses before deciding.
Can any font be made variable?
No. The type designer decides which axes a variable font offers and which values they can take, so each font needs its documentation checked to see what it provides.
