A variable font stores a whole family as one file with adjustable axes. Instead of shipping Regular, Medium, Bold and Black separately, you ship one font and pick any value along the weight axis.
The axes you'll meet most
- Weight (wght): thin to black, in any step you like.
- Width (wdth): condensed to extended, great for fitting headlines.
- Optical size (opsz): subtle shape changes so small text stays open and big text stays tight.
- Slant or italic (slnt, ital): angle without swapping files.
Why it matters on the web
Fewer files usually means fewer requests. More importantly, you stop rationing weights. Use 560 for a UI label if 500 feels thin and 600 feels heavy. Pair width with container queries and a headline can condense itself instead of wrapping onto an awkward second line.
Why it matters in motion
Axes can be animated. A weight shift on hover, a width stretch on scroll, a pulse on a loading state: all without the jump you get swapping between two separate fonts. Keep it subtle; type that never sits still is tiring to read.
A sensible default
Pick one variable family for display and one for text. Set a clear scale, choose three or four weights you actually use, and let the in-between values solve problems as they come up rather than becoming the design.