typography

Variable font

A font file that exposes one or more axes (weight, width, slant, optical size, or custom) that can shift at runtime without loading additional files.

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.

Learn more in our full guide: Read the article

Related Terms