Variable Fonts Explained: One File, Infinite Weights

A variable font is a single file that contains a continuous range of a typeface — every weight from thin to black, and often width and slant too — instead of one file per style. It's one of the most useful font innovations of the last decade.

How they work

Instead of storing fixed styles, a variable font stores "axes" of variation. The most common is weight, but fonts can expose width, optical size, slant, and custom axes. You request any point along an axis — say, a weight of 537 — and the font renders it.

Why it matters on the web

• Smaller downloads: one file can replace five or more separate weight files.
• Design flexibility: you're no longer limited to the handful of preset weights a family ships.
• Smooth animation: weight and width can be animated fluidly in CSS.

Using one in CSS

font-variation-settings: "wght" 537;
/* or simply */
font-weight: 537;

Browser support is excellent across modern browsers. For a site that uses several weights of one family, a variable font is usually the most efficient choice available.