How it works
The font stores the outlines of its extremes (for example thin and black) and smoothly blends between them along an axis. Common axes are weight (wght), width (wdth), slant and optical size (opsz). Some fonts add creative axes of their own.
Why use one
- One file instead of many, so websites load fewer requests.
- Any weight you like, such as 450 or 650, for precise hierarchy.
- Smooth animation between weights for interactive design.
Popular free variable fonts
Using a variable font in CSS
Load it once with @font-face and a weight range, for example font-weight: 100 900;. Then set any value: h1 { font-weight: 720; }. For other axes use font-variation-settings, such as "wdth" 85.