Variable Fonts Explained: One File, Every Weight

A variable font is a single font file that contains a continuous range of styles — weight, width, slant, and sometimes custom axes — instead of shipping a separate file for each one. Rather than loading Regular.woff2, Bold.woff2, and SemiBold.woff2 as three separate downloads, you load one variable font file and pick any point along its axes with CSS, including values no static font family ever shipped, like a weight of 550.

What makes a font “variable”

A traditional font family is a fixed set of discrete files: one for regular, one for bold, maybe one for light and one for black. If you wanted a weight between regular and bold, you were out of luck unless the type foundry had shipped one. A variable font instead defines its glyphs as interpolation between master shapes along one or more numeric axes, so any value within the supported range produces a valid, properly hinted rendering of the glyph — not just a synthetically bolded version of the regular weight.

This is a genuine engineering shift, not just a packaging trick: the font’s outlines are mathematically defined to interpolate smoothly, so a weight of 463 looks like a real intermediate design, not an approximation.

Variation axes: weight, width, slant, and custom ones

The OpenType specification defines several standard, registered axes, referenced by four-letter tags:

• wght — weight, from thin to black, the most commonly used axis.
• wdth — width, from condensed to expanded.
• slnt — slant angle, for an oblique style distinct from a true italic.
• ital — a toggle or range for a true italic design.
• opsz — optical size, subtly adjusting stroke contrast and spacing for the font’s intended display size (small text needs different proportions than a large headline to stay legible).

Type designers can also define arbitrary custom axes beyond these five — a grade axis that adjusts stroke weight without changing overall metrics, for instance — though support for anything outside the registered axes depends entirely on what the specific font ships.

Using font-variation-settings and CSS

Modern CSS exposes the common axes through ordinary properties you already know: font-weight: 550 and font-stretch: 80% work directly against a variable font’s wght and wdth axes without any special syntax, as long as the font file declares support for that range. For axes without a dedicated shorthand — or custom ones a specific font defines — font-variation-settings gives direct access:

h1 {
  font-variation-settings: "wght" 620, "opsz" 48;
}

Because font-weight now accepts arbitrary numbers rather than just the historical steps of 100 through 900, it pairs naturally with clamp() and viewport-relative units to make weight itself fluid — text that gets both larger and subtly heavier as the viewport grows, without a single media query.

Variable fonts vs static font families

	Static font family	Variable font
Files needed	One per style (weight/width/style)	One file, all styles
Total download	Scales with styles used	Fixed, regardless of styles used
Intermediate values	Not possible	Any value within the axis range
Animation	Can’t interpolate between files	Can animate font-variation-settings
Browser support	Universal	Broadly supported in modern browsers

Performance payoff

The performance case for variable fonts is straightforward: if a design uses regular, medium, semibold, and bold weights of the same family, that’s traditionally four separate HTTP requests and four separate font files parsed and loaded, each contributing to render-blocking behavior if not handled carefully. A single variable font file replacing all four is often smaller in total than the four static files combined, and it’s exactly one request instead of four — fewer round trips, less contention with other critical resources during page load, which is the kind of change that shows up directly in Core Web Vitals metrics tied to render timing.

The trade-off is that a variable font file supporting many axes can be larger than any single static weight on its own — so if a design genuinely only ever uses one weight, a static font for that single style can still be the smaller download. The win compounds as the number of styles used goes up.

Pairing with fluid typography

Variable fonts and fluid typography solve complementary problems: clamp()-based fluid type scales font size smoothly across viewport widths, while a variable font lets weight, width, or optical size scale right alongside it. A headline can get both larger and proportionally bolder as the viewport widens, using custom properties to define the axis values once and reference them consistently across a design system, rather than hardcoding font-variation-settings in every rule that needs it.

The takeaway

A variable font trades one larger file for the ability to hit any point along its weight, width, and slant axes — accessed through ordinary properties like font-weight and font-stretch, or font-variation-settings for anything beyond those. That collapses what used to be several separate font requests into one, and it opens up fluid, animatable typography that a fixed set of static weights simply can’t express.