Skip to content
UX Atlas
UI foundationCraft conventionIntermediate

Variable Fonts

One file containing a continuous range of weights and widths, usually smaller than the static weights it replaces.

Definition

A variable font is a single font file that contains a continuous design space along one or more axes, such as weight, width and optical size. Any instance along an axis can be rendered without loading an additional file.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Common axes
  3. Practical benefits
  4. In practice
  5. Sources
  6. Continue from here

Common axes

AxisTagWhat it controls
WeightwghtStroke thickness, typically 100 to 900.
WidthwdthHorizontal proportion, useful for fitting text into constrained space.
Optical sizeopszAdjusts contrast and spacing for the intended rendering size.
SlantslntAngle of oblique, as a continuous value.
ItalicitalSwitches to true italic letterforms, which is not the same as slant.

Practical benefits

  • Usually a smaller total payload than three or four static weights, and one request instead of several.
  • Fluid weight interpolation in responsive typography, so heading weight can scale with viewport.
  • Optical size support, where available, genuinely improves rendering at both small and large sizes.
  • Fine-grained weight tuning for dark mode without shipping extra files.

In practice

Weight that responds to viewport

Responsive typography

Slightly reducing heading weight as the viewport narrows keeps optical weight consistent when the type also shrinks. Doing this with static fonts would require additional files.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.