What are variable fonts and why should you use them?

A variable font is a single font file that contains a continuous range of styles instead of one fixed style. Where a traditional family ships separate files for Regular, Medium, Bold and so on, a variable font stores a set of master designs and lets the renderer interpolate between them along one or more axes, such as weight or width. You can then use any value along each axis, for example a weight of 450 or 640, not just the steps the designer exported. Variable fonts are part of the OpenType specification since version 1.8, and every current major browser supports them. You should use them because one file can replace several, they give you finer typographic control, and they make things like responsive weight changes and smooth animation possible.

Variable fonts change how you think about a type family. Instead of choosing from a menu of six or nine weights, you have a design space you can move through freely, and you often pay less in file size for the privilege. They aren't automatically the right choice for every project, though. In this article you'll learn how variable fonts work, what the standard axes are, how they compare with static fonts on performance, where to find good ones, and how to decide whether to switch.

How Variable Fonts Work

A type designer creating a variable font draws the same set of glyphs at the extremes of each axis. For a weight axis, that might be a Thin master and a Black master. Every glyph in every master must have compatible outlines, meaning the same number of points in the same order, so the software can blend between them.

When you request a weight of 500, the font engine calculates each point's position as a blend between the masters. The font can also include intermediate masters where a straight blend wouldn't look right, and it can define named instances, which are preset combinations such as "SemiBold" at weight 600. Named instances are what appear in a font menu in desktop software.

The key parts of a variable font file are:

• The fvar table: Lists the axes, their minimum, default and maximum values, and the named instances.
• The gvar table (TrueType outlines) or CFF2 table (PostScript outlines): Stores how each glyph's points move along each axis.
• The STAT table: Describes the style names so software can build sensible menus.
• The avar table (optional): Remaps axis values so that, for example, weight 500 lands at a visually even point between 400 and 600.

Because the shared glyph structure is stored once and only the differences are stored for each axis, a variable font is usually much smaller than the total size of the static files it replaces.

Registered and Custom Axes

Each axis has a four-character tag. The OpenType specification registers five standard axes, written in lowercase:

Tag	Axis	Typical range	CSS property that controls it
wght	Weight	100 to 900	font-weight
wdth	Width	75% to 125%	font-stretch
ital	Italic	0 or 1	font-style: italic
slnt	Slant	Often -15 to 0 degrees	font-style: oblique
opsz	Optical size	Varies, for example 8 to 144	font-optical-sizing

Not every font has every axis. Many variable fonts have only a weight axis, and some have weight plus width or optical size. Ranges vary too: a font might offer weights from 300 to 800 only.

Designers can also add custom axes, which are written in uppercase. Some well-known examples:

• Roboto Flex includes a grade axis (GRAD) that changes stroke thickness without changing the width of letters, plus several parametric axes for fine adjustments.
• Recursive has MONO to move between proportional and monospaced, and CASL to move from a linear to a casual, brush-like style.
• Fraunces has SOFT to round off corners and WONK to switch on its quirkier alternate shapes.

Custom axes are controlled in CSS with the low-level font-variation-settings property, because there's no dedicated property for them.

Inspecting a Font's Axes

You can list the axes in any variable font with the fontTools Python library:

pip install fonttools

from fontTools.ttLib import TTFont

font = TTFont("InterVariable.ttf")

for axis in font["fvar"].axes:
    print(axis.axisTag, axis.minValue, axis.defaultValue, axis.maxValue)

for instance in font["fvar"].instances:
    print(instance.coordinates)

For a font with weight and optical size axes, the first loop prints one line per axis with its range and default value. Browser-based tools such as Wakamai Fondue show the same information if you prefer not to install anything.

Variable Fonts and Performance

The performance case is real but depends on how many styles you use.

• Several weights: If your site uses regular, medium, semibold and bold, one variable file is almost always smaller than four static files, and it's one request instead of four.
• One or two weights: A single static Regular file is smaller than a variable file covering the whole weight range. If you only use 400 and 700, two subsetted static files may be lighter.
• Upright and italic: Most families ship italics as a second variable file, so a typical setup is two files: one roman, one italic.

The best way to decide is to measure. Compare the total WOFF2 size of the static files you actually use with the variable file, after subsetting both to the same character set:

pip install fonttools brotli

pyftsubset Inter-Variable.ttf --unicodes="U+0000-00FF,U+2000-206F" \
  --flavor=woff2 --output-file=inter-var-latin.woff2

ls -lh inter-var-latin.woff2 static/*.woff2

If you need only part of an axis, you can also cut the range down with the fontTools instancer, which reduces the file size further:

fonttools varLib.instancer Inter-Variable.ttf wght=400:700 -o Inter-400-700.ttf

The resulting font is still variable but only between weights 400 and 700. You can even "pin" an axis to a single value to make a static font:

fonttools varLib.instancer Inter-Variable.ttf wght=500 opsz=14 -o Inter-Medium-14.ttf

Why You Should Use Variable Fonts

Beyond file size, variable fonts give you capabilities static families can't match.

Precise Weight and Width

You aren't limited to 400 and 700. If 700 looks too heavy for a large heading but 600 is too light, use 650. If a narrow column needs slightly condensed text, use a width of 92% instead of switching to a separate condensed family.

Better Hierarchy With Fewer Fonts

Because you can tune weight and width finely, one variable family can cover headings, body text, captions and UI labels with clear distinctions between them. That often removes the need for a second family.

Responsive Typography

You can change weight or width at different screen sizes. Thin strokes that look elegant on a large desktop display can look weak on a small phone screen, so a slightly heavier weight on small screens often improves readability.

h1 {
  font-weight: 700;
}

@media (max-width: 40rem) {
  h1 {
    font-weight: 760;
    font-stretch: 90%;
  }
}

Adjusting for Dark Mode

Light text on a dark background tends to look bolder than dark text on a light background. With a grade axis, you can make strokes slightly thinner in dark mode without changing letter widths, so nothing reflows:

@media (prefers-color-scheme: dark) {
  body {
    font-variation-settings: "GRAD" -25;
  }
}

This only works with fonts that include a GRAD axis, such as Roboto Flex.

Smooth Animation

Because axes are continuous, you can transition between values. A button can gain weight smoothly on hover rather than jumping between two files. Use this sparingly, and respect users who prefer reduced motion.

Browser and Platform Support

All current versions of Chrome, Edge, Firefox and Safari support variable fonts in WOFF2 and TTF form, and have done for several years. Desktop operating systems also support them, so designers can use the same files in design tools. Very old browsers that don't support variable fonts will either show the default instance of the font or fall back to the next font in your stack, so content remains readable.

If you need to support an old environment, you can serve static fonts as a fallback using @supports:

@supports not (font-variation-settings: normal) {
  body {
    font-family: "Inter Static", Arial, sans-serif;
  }
}

In most projects today this is unnecessary.

Where to Find Variable Fonts

Many popular families are available as variable fonts:

• Google Fonts: Filter the catalogue by "Variable" to see families such as Inter, Roboto Flex, Source Sans 3, Source Serif 4, Fraunces, Recursive, Literata and Open Sans. The CSS2 API lets you request axis ranges, for example wght@300..800.
• Adobe Fonts: Includes variable versions of several families, listed with a variable tag in the catalogue.
• Type foundries: Many commercial foundries now ship variable versions alongside static files. Check that your licence covers web use of the variable file.
• Open-source projects: Families such as Inter publish variable files directly in their releases.

When Static Fonts Still Make Sense

Variable fonts aren't always the better choice:

• You only need one weight: A single static file will be smaller.
• Email: Most email clients don't load web fonts reliably, let alone variable ones.
• The variable version differs from the static one: Some families have slightly different spacing or features in their variable releases. Compare before swapping on an established brand.
• Strict file size budgets: On a page that must be as light as possible, a carefully subsetted static Regular may be the most efficient option.

How to Start Using Them

1. Audit your current fonts: List the families, weights and styles actually used in your CSS.
2. Check for a variable version: Look on Google Fonts, the foundry site or the project's releases.
3. Compare file sizes: Subset both options to the same characters and compare the total.
4. Update your @font-face rules: Declare weight and width ranges instead of single values.
5. Test rendering: Check headings, body text and bold text on Windows, macOS, Android and iOS.

For the CSS side of this, including how to declare ranges and control custom axes, see how to use variable fonts in CSS.

A minimal declaration looks like this:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", Arial, sans-serif;
  font-weight: 420;
}

---

FAQ: Variable Fonts

---

Conclusion

Variable fonts store a continuous design space in a single file, letting you use any value along axes such as weight, width, slant and optical size. They replace multiple static files with one request, give you fine control over hierarchy and responsiveness, and open up techniques like grade adjustments for dark mode and smooth weight transitions that static fonts can't do.

They're not a free win in every case. If you only need one weight, a static file can be lighter, and some contexts such as email don't benefit at all. Audit what you use, compare subsetted file sizes, and switch where the numbers and the design gains make sense, which for most sites using three or more styles of a family they will.