Skip to content
UX Atlas
Plate FND·037 · UI foundationGrid D1 · Rev. 2026-08-14

Variable Fonts

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

UI foundationCraft conventionIntermediate

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 plate
  1. 1Definition
  2. 2Common axes
  3. 3Practical benefits
  4. 4Using them without losing control
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Choosing between static and variable font delivery.
  • Optimising font loading performance.
  • Building fluid responsive typography.
  • The product needs several weights, or optical sizing across a wide range of type sizes.

Common mistakes

  • Exposing the full axis range in a design system.
  • Assuming variable is always smaller. Verify against the weights you actually use.
  • Forgetting a static fallback for environments that need one.

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.

Using them without losing control

Do

  • Expose named instances as tokens, so components cannot invent weights.
  • Subset aggressively. A variable font that ships every script is not lighter than static cuts.
  • Use the optical size axis where the typeface has one. It is the axis with the most visible benefit.
  • Provide a static fallback for anything that must render before the font loads.

Do not

  • Animate a weight axis on scroll and call it motion design.
  • Let arbitrary axis values appear in component styles.
  • Assume one variable file always beats two static weights on total bytes.

In practice

  1. i.

    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.

  2. ii.

    Constraining the axes

    Why tokens still matter

    A continuous weight axis means any of nine hundred values is available, which in practice means eleven turn up across a codebase. Naming four and forbidding the rest is what keeps the system a system.

Local chart

FND·037 · Region II · Grid D1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Variable FontTERM·064 · SHORT DEFINITIONDesign TokensSYS·001 · RELATED CONCEPTFont SelectionFND·030 · RELATED CONCEPTFont WeightFND·033 · RELATED CONCEPTPerformance as User ExperienceFND·054 · RELATED CONCEPTResponsive TypographyFND·038 · RELATED CONCEPTType ScaleFND·031 · RELATED CONCEPT

Sources

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

  1. [1]

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.