简体中文
EnglishWhat Is a Variable Font and How Does It Differ from Static Fonts?
Updated
A variable font is a single font file that contains a continuous range of design variations along one or more axes, such as weight, width, slant, or optical size. Instead of shipping separate files for Regular, Medium, Bold, and so on, you ship one file and select any point along its axes. Use a variable font when you need flexible typography across breakpoints or interactive states; use static fonts when you need only one or two fixed styles and want the simplest possible setup.
How a variable font works
A variable font stores a base design plus the deltas needed to reach other designs, and interpolates between them. The axes define the dimensions of that interpolation:
- Weight (wght) — typically 100–900, but ranges vary by typeface.
- Width (wdth) — condensed to extended.
- Slant (slnt) or italic — angle of inclination.
- Optical size (opsz) — adjusts contrast and spacing for small vs. large text.
Each axis has a defined minimum, maximum, and default. A named instance is a preset coordinate on those axes — for example, "Bold" might be wght=700. Named instances exist so that older software and simple CSS can still request familiar styles, while the full axis range remains available to anything that supports it.
A concrete example: a typeface with wght 100–900 and wdth 75–125 replaces what would otherwise be dozens of static files. You can set wght=437 for a headline that needs to sit precisely between two weights, or animate wght from 300 to 700 on hover.
Variable vs. static: the trade-offs
| Dimension | Variable font | Static fonts |
|---|---|---|
| Files shipped | One file covers the whole range | One file per weight/style |
| Total download | Usually smaller than many statics combined, but larger than any single static | Small per file, adds up across styles |
| Weight control | Continuous, any value in range | Only the discrete weights you ship |
| Responsive/animated type | Fine-grained, easy to interpolate | Requires swapping files or faux styling |
| Setup complexity | Slightly higher (axis ranges, fallbacks) | Minimal |
| Rendering support | Needs variable-font-capable browser/engine | Universally supported |
The file-size comparison is conditional: a variable font is a clear win when you would otherwise ship four or more static weights. If you only use one weight, a single static file is smaller and simpler. Subsetting a variable font to the axes and ranges you actually use narrows the gap further.
Practical benefits for responsive design
Because weight and width are continuous, you can tune typography to the viewport rather than snapping between fixed styles — for example, slightly heavier text on small screens or a marginally condensed headline at mid-size breakpoints. The same continuity makes hover, focus, and scroll-driven type animations straightforward, since the browser can interpolate a single numeric value instead of swapping font files.
Format and support basics
Variable fonts are an OpenType feature. On the web, WOFF2 is the usual delivery format and supports variable axes; WOFF2 also compresses well, which matters because variable files carry more data. Modern browsers support variable fonts, but you should still provide static fallbacks or a font-weight range declaration so that unsupported environments degrade gracefully rather than rendering a default weight.
Where to test them
Testing matters because axis behavior, named instances, and rendering differ between typefaces and browsers. TypeTrials (typetrials.com), powered by Pangram Pangram Foundry, is a tool built for testing variable fonts and related type experiments. Note that the site requires JavaScript to run — its page states "Please enable Javascript to explore TypeTrials" — so enable JavaScript before you start. Use a tester like this to preview axis ranges, check named instances, and confirm how a font behaves before committing it to a project.