Variable Fonts in Production: A Field Report

Variable fonts shipped in all major browsers years ago. Most production codebases still use static fonts. Here's why — and what you're missing.

What a Variable Font Actually Is

A variable font is a single font file that contains the entire design space of a typeface — every weight, width, slant, and optical size — encoded as interpolation instructions. You get infinite variation from one file.

The file size savings are real. A family with 6 weights in static format might be 600KB. The variable equivalent: 200KB. One request. Instant switch.

The CSS You Need

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGrotesk-Variable.woff2') format('woff2');
  font-weight: 100 900;
}

.heading {
  font-variation-settings: 'wght' 350;
  transition: font-variation-settings 0.3s ease;
}

.heading:hover {
  font-variation-settings: 'wght' 700;
}

Axes Beyond Weight

Most developers stop at wght. The interesting territory starts after that:

• wdth — width, from condensed to expanded
• ital — italic as a continuous axis, not a toggle
• opsz — optical size, adjusting letterforms for display vs body
• Custom axes — type designers can define anything

Fraunces has a WONK axis. Input Mono has XHGT for x-height. These are design decisions encoded in math.

Performance Considerations

Subset your variable fonts. A full Latin variable font with all axes can exceed 400KB. Use unicode-range descriptors and subsetting tools (glyphhanger, pyftsubset) to strip unused glyphs. You rarely need the full character set for a marketing site.

The WeDesign Stack

We use Space Grotesk (variable) for UI, Cardo for editorial text, and JetBrains Mono for code. All served via next/font with display: swap. Zero layout shift, full variable axis access.

The investment is a one-time setup cost. The creative return is ongoing.