Articles · Technology · 23 February 2026 · 9 min read

Variable Fonts Explained

A traditional font family ships as a folder of separate files: Regular, Italic, Bold, Bold Italic, maybe a dozen more. A variable font ships as one file that contains them all — plus every style in between. Here's how that works, why it matters for the web, and how to actually use one.

The one-sentence version

A variable font stores one set of outlines plus instructions ("deltas") for how the points of every glyph move as you slide along one or more design axes — weight, width, slant, and so on — letting the renderer generate any intermediate style on the fly.

The technology arrived in 2016 as part of OpenType 1.8, backed jointly by Adobe, Apple, Google, and Microsoft — a rare four-way agreement that guaranteed browser support, which is now universal in modern browsers. The idea itself is older: it revives Apple's 1990s TrueType GX variations and the spirit of Adobe's Multiple Master fonts, both of which were ahead of their infrastructure.

Axes: the vocabulary of variation

Five registered axes have standardised four-letter tags and CSS-friendly behaviour:

  • wght — Weight, mapped to font-weight (typically 100–900, but any range the designer chooses).
  • wdth — Width, mapped to font-stretch (condensed through expanded).
  • ital — Italic, a switch between roman and italic forms.
  • slnt — Slant, a continuous oblique angle.
  • opsz — Optical size, subtly redrawing letterforms for the size they're displayed at: sturdier and more open at caption sizes, higher-contrast and tighter at display sizes. This one, largely lost since metal type, is quietly the most beautiful thing variable fonts brought back.

Designers can also invent custom axes with uppercase tags. Fraunces — the serif in this site's own headings — exposes SOFT (how rounded the forms are) and WONK (whether quirky alternate letterforms appear). Others offer grade axes (weight change without width change, ideal for dark mode), or purely expressive ones. A font's axes are listed on its Google Fonts page under "Type tester", or inspectable at sites like Wakamai Fondue.

Using variable fonts in CSS

For registered axes, use the standard properties you already know — they now accept any value in the supported range:

h1 {
  font-weight: 640;        /* not just 400/700 — anything */
  font-stretch: 87%;        /* width axis */
}

For custom axes (or precise multi-axis control), use font-variation-settings:

h1 {
  font-variation-settings: "SOFT" 80, "WONK" 1;
}

Two practical warnings. First, font-variation-settings is low-level: it overrides rather than merges, so setting it in a child rule can silently reset axes set on the parent — prefer the standard properties wherever they exist. Second, when self-hosting, declare the range in @font-face so the browser knows what the file can do:

@font-face {
  font-family: "MyVariable";
  src: url("/fonts/myvariable.woff2") format("woff2");
  font-weight: 100 900;   /* a range, not a value */
  font-display: swap;
}

Google Fonts serves variable versions when you request a weight range in the URL ([email protected]) — details in our Google Fonts guide.

Why bother? The three real wins

1. Performance

One variable file is usually much smaller than the sum of the static files it replaces. A site using four weights plus italics might swap eight requests for one or two files — fewer round trips, one cache entry, no mid-page style pop-in as extra weights arrive late. (One file is often larger than any single static weight, though — more on that below.)

2. Design freedom

Weight 640 exists now. Type can respond to context: slightly heavier text in dark mode (grade), sturdier letterforms at small sizes (optical size), width that adapts to the viewport. Animation of axes is possible too — delightful in moderation, seasickness beyond it.

3. Fidelity

With every weight available, you stop compromising ("we only loaded Bold, so Semibold headings became Bold"). Design systems can specify exactly the emphasis they mean.

When a variable font is the wrong choice

  • You genuinely use one or two styles. A single static Regular is smaller than a variable file carrying a whole design space you'll never visit. Subset or use statics.
  • The variable version is second-rate. Some families' variable builds lag their static cuts in hinting or feature support. Test before committing.
  • Legacy environment constraints. Old office software, some PDF workflows, and certain embedded platforms still handle statics more predictably. (Every modern browser is fine.)

Where this is all heading

Variable fonts have crossed from novelty to default: most new releases on Google Fonts ship variable-first, operating systems use them for UI fonts, and design tools now expose axes directly. The interesting frontier is responsive typography in the full sense — type that adjusts optical size, grade, and width continuously to viewport, resolution, and theme, the way layouts already adjust. The technology is ready; the conventions are still being written, which makes right now a good moment to learn it. Start by opening a variable font's type tester, grabbing the weight slider, and watching a single file become a hundred fonts.