Variable font

A variable font stores a range of design variations in one font file, controlled through axes such as weight or width.

See real examples ↓
Geist specimen

What it means

An axis is a dimension of variation supported by that particular font. Not every variable font has the same axes or range. A family may offer a weight axis without width, and upright and italic designs may still be delivered separately. Check the foundry documentation before designing around an adjustment.

Use it in practice

Choose a small set of purposeful styles from the available range. Use intermediate weights when they solve a real contrast or hierarchy problem.

Watch out for

One variable file is not automatically lighter than the few static files your page needs. Compare the actual files and avoid unnecessary variants.

From the collection

These websites credit Geist, a family available in variable form. A credit does not establish which file format or axis settings the site uses.