Variable Font

Variable fonts load as a single file and expose one or more axes of variation. The weight axis is the most common; others include width, optical size, slant, and italic. In CSS, you control them via the font-variation-settings property. A font-weight of 500 sits at the midpoint of the weight axis; values between 100 and 900 give you continuous control rather than fixed steps. Test variable axes in the browser using the variable font tester.

Using font-weight values the font was not drawn for. Variable fonts accept any numeric value within the axis range, but the letterforms are only optimised for specific regions. A value of 347 might produce ugly intermediates if the font was not designed for fine-grained variation.

Forgetting to enable optical sizing. The opsz axis is set automatically with font-optical-sizing: auto. Without it, a font designed for text sizes renders with display-optimised details and vice versa.

A variable font packs a whole design space into one file, and the axes are the knobs. The most common is wght, a continuous weight axis that replaces the old fixed set of 100 to 900 steps. Beyond that come wdth for width, opsz for optical size, slnt for slant, and ital for switching into true italics. One axis is already enough to replace several static files; two or three cover most interface needs.

The payoff is fewer round trips and smoother transitions: you can animate weight between states, or step through intermediate weights that static fonts never shipped. The tradeoff is that the font file is heavier than any single static weight, so subset what you actually use. The variable font tester lets you drag every axis a family exposes, and the font inspector shows which axes a given file supports before you wire it into CSS.