Variable font
A variable font is one file that behaves like many. Instead of shipping a regular, medium, bold, and black weight as separate files, you ship one variable file with a weight axis that can slide continuously from 100 to 900. The same idea applies to width, slant, optical size, and custom brand-defined axes.
For performance, variable fonts are a straight win. One request, one file, less bytes, fewer layout shifts. For design, they unlock type that behaves. A wordmark can subtly widen on load. A heading can shift weight on scroll. A nav can compress on hover. Type becomes an interactive element of the identity, not a frozen asset.
The 2026 rule: pick one axis, tie it to a signal the reader can feel (scroll, hover, focus), and do not animate on time alone. Variable axes are a language for state, not a fidget toy.
Read the full guide
Related terms