Classic web fonts require a separate file per weight. Variable fonts bundle all weights and widths in a single file – often smaller than two static cuts combined. For design systems, variable fonts represent a paradigm shift: they enable typographic precision that would be impossible with static fonts, while simultaneously improving performance.

The Principle

A variable font contains not individual, fixed-defined font weights, but a continuous spectrum of typographic variations. Instead of loading separate files for Regular (400), Medium (500), Semibold (600), and Bold (700), a single file covers the entire range. The so-called design axes – Weight (wght), Width (wdth), Italic (ital), Slant (slnt), and Optical Size (opsz) – can be continuously controlled via CSS.

For design systems, this is particularly relevant: typographic hierarchies can be more finely graduated without loading additional files. A heading with font-weight: 630 is just as possible as a micro-adjustment of width for different language versions.

The Five Registered Axes

The OpenType standard defines five registered axes supported by all browsers:

Weight (wght) controls stroke thickness from Thin (100) to Black (900) – and theoretically beyond. Unlike static fonts, the value is not limited to the nine defined steps but freely selectable.

Width (wdth) controls the running width of letters. Values below 100% produce Condensed variants, above 100% Extended variants. Particularly useful for responsive typography, where headlines can become narrower on small viewports without reducing font size.

Italic (ital) switches between upright and italic variants. Unlike font-style: italic, this can result in true italic forms in variable fonts rather than mere obliquing.

Slant (slnt) controls the inclination of letters independently from the italic axis. Values from 0 to -20 degrees are typical.

Optical Size (opsz) adjusts the letter drawing to the display size. Small optical sizes have more open forms and stronger strokes for better readability; large optical sizes show finer details.

Beyond these, foundries can define custom axes – for serif contrast, roundness, or decorative elements. Inter, for example, offers a custom axis for optical size adjustment.

Performance Benefits

The performance gain is significant. A typical website loads four to six font weights – that means four to six HTTP requests and 150–300 KB of transfer volume. A variable font reduces this to one request and typically 80–120 KB for the same functionality. Combined with font subsetting, file sizes can be further reduced.

Metric
6 Static Fonts
1 Variable Font
Savings
HTTP Requests
6
1
–83%
Transfer volume
~250 KB
~100 KB
–60%
DNS lookups (external)
1–2
0 (self-hosted)
–100%
Render-blocking
Per file
Once
Significantly reduced
Caching
6 cache entries
1 cache entry
Simpler

This measurably impacts Core Web Vitals: fewer requests mean faster First Contentful Paint (FCP), and reduced font swaps improve Cumulative Layout Shift (CLS).

CSS Control

Variable fonts are controlled via CSS custom properties and the @font-face declaration with a font-weight range:

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

Axes can be accessed via the font-variation-settings property or via the corresponding CSS properties (font-weight, font-stretch, font-style). For registered axes, the CSS property method is preferable as it works better with CSS transitions and animations.

Integration into Design Tokens

Variable font axes can be directly mapped in a token architecture. Instead of individual token values for predefined weights, tokens can reference the entire axis and define named instances as semantic tokens:

{
  "font": {
    "weight": {
      "light": { "$value": 300, "$type": "fontWeight" },
      "regular": { "$value": 400, "$type": "fontWeight" },
      "medium": { "$value": 500, "$type": "fontWeight" },
      "semibold": { "$value": 600, "$type": "fontWeight" },
      "bold": { "$value": 700, "$type": "fontWeight" },
      "heading": { "$value": 650, "$type": "fontWeight" }
    }
  }
}

The token font.weight.heading with value 650 would not be representable with static fonts – it falls between Semibold (600) and Bold (700). Variable fonts enable this precision, and the token architecture makes it systematically usable.

Animations and Micro-Interactions

An often-overlooked advantage: variable font axes can be animated with CSS transitions. Hover effects that interpolate a navigation link’s weight from 400 to 600, or scroll-based weight changes in headlines, are technically trivial and performant since the browser calculates the interpolation natively – without loading additional font files.

Comparison: Static Fonts vs. Variable Fonts

Criterion
Static Fonts
Variable Fonts
Files for 6 weights
6 files (~250 KB)
1 file (~100 KB)
HTTP requests
6 requests
1 request
Weight graduation
Only predefined values (400, 700, etc.)
Continuous (1–999)
Design token integration
Token per weight
Tokens for axes + named instances
Browser support
100%
>96% (all modern browsers)
CSS animations
Not interpolatable
Continuously animatable
Subsetting possible
Yes, per file
Yes, one file
Width variations
Separate condensed files
Continuous via wdth axis

Key Takeaways

  • Variable fonts bundle all font weights in a single file and significantly reduce HTTP requests and transfer volume.
  • Five registered axes (Weight, Width, Italic, Slant, Optical Size) enable continuous typographic control via CSS.
  • Typographic variations can be controlled continuously – finer hierarchies without additional assets.
  • Variable font axes can be mapped as design tokens, enabling consistent control across platforms.
  • CSS transitions on font axes enable performant micro-interactions without additional font downloads.
  • Browser support exceeds 96% – all modern browsers fully support the format.
  • Combined with subsetting and self-hosting, variable fonts deliver the most performant and sovereign font strategy.