What Is a Variable Font, and Should You Use One?

What it is

A conventional font family ships as separate files: Regular, Italic, Bold, Bold Italic, perhaps Light, Medium and Black. Each is a fixed design. Use four weights and the browser downloads four files.

A variable font is one file that describes how the design changes along one or more axes and lets the browser render any point in between. Ask for weight 437 and you get weight 437. The standard, OpenType Font Variations, arrived in 2016; support in all major browsers has been complete since 2018.

The axes

Every variable font defines its own axes. The five registered ones:

• Weight (wght), typically 100 to 900. The most common axis and the one most sites use.
• Width (wdth), from condensed to extended.
• Slant (slnt), an oblique angle; distinct from italic, which is a different design.
• Italic (ital), a switch between upright and italic where the font includes both.
• Optical size (opsz), which adjusts letterforms for small or large sizes: finer details and tighter spacing at display sizes, sturdier strokes and looser spacing at text sizes. Browsers can apply this automatically.

Fonts can also define custom axes, from grade (weight change without width change, useful for dark mode) to more playful parameters. A font's specimen page lists what it offers.

Why use one

Fewer, smaller files. A family used at four weights might be four files of 30–50 KB each as static WOFF2. The variable version is often one file of 60–100 KB. Fewer requests, less total weight, and one thing to preload. This is the font performance argument, and for sites using several weights it is decisive.

Any weight, exactly. A design system that wants headings at 650 rather than 600 or 700 can have it. Weight can be tuned per size in the type scale rather than snapped to what the foundry shipped.

Responsive typography. Width can narrow on small screens so headlines fit without shrinking; weight can increase slightly for light-on-dark text; optical size can adjust as the font scales. These are typographic refinements that were impractical with static files.

Animation and interaction. Weight or width can transition smoothly on hover or scroll, since the values are continuous. Used sparingly, it is a distinctive effect; used freely, it is a gimmick.

The CSS

Declare the font once with the ranges it supports:

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

Then use font-weight with any value in the range, and font-stretch for width. For other axes, font-variation-settings: "opsz" 32, "slnt" -10; sets them directly, though the higher-level properties are preferred where they exist because they interact correctly with inheritance. For italics, either use a font with an ital axis or load a separate italic variable file.

Subsetting still applies: a variable font with every glyph for every script is large, and a tool that strips unused characters brings it down substantially.

When a static font is still better

Only one or two styles. A site using Regular and Bold alone downloads two small static files, often smaller in total than the variable file, which carries the whole range whether used or not.

A font with no variable version. Many typefaces, particularly older and more traditional ones, do not exist as variable fonts, and the static version is the design you chose.

Very old browsers or email. Variable fonts do not work in some legacy contexts and in most email clients, where system fonts should be used anyway.

Licensing. Some foundries license variable and static versions differently; check before assuming the variable file is included.

Design discipline. Infinite weights invite inconsistency. A team with a variable font still needs a small, named set of weights in the design system, or every component ends up at a slightly different value.

Practical setup

Start from the foundry or Google Fonts variable file, subset it to the scripts the site uses, and check the resulting size against the static files it replaces. Preload the file if the first screen uses it, since one file is easier to prioritise than several. Define the weights the design actually uses as named tokens, such as regular 400, medium 500 and semibold 600, and use those names in components rather than raw numbers, so the flexibility of the format does not become inconsistency in the product.

The decision

If the design uses three or more weights, or would benefit from fluid weight, width or optical sizing, and the typeface has a variable version, use it: it is smaller, more capable, and universally supported. If the design uses one or two weights, or the typeface has no variable version, static files remain perfectly good. Either way, self-host, subset, preload the first-screen file, and define the weights you use as tokens. Our guide to choosing typography for a product covers the wider decision; if you would like a review of a site's font loading and weights, book a call.

Common questions