A variable font is a single font file that stores a continuous design space instead of one fixed style, so that properties such as weight, width, slant or optical size can be set to any value along defined axes. In typography it replaces a family of separate static files, for example Light, Regular, Semibold and Bold, with one file from which all those styles and every step between them can be generated.
The technology was introduced in 2016 as OpenType Font Variations, part of the OpenType 1.8 specification, and is supported by current operating systems, browsers and design applications. It builds on earlier ideas such as multiple master fonts, but with far broader support and a standardized model.
How a variable font stores a design space
A variable font contains one set of default glyph outlines plus deltas that describe how each point of each outline moves as an axis value changes. The type designer draws masters at the extremes of each axis, for example the thinnest and the heaviest weight, and the font stores the default and the differences. Interpolation then calculates any intermediate style on the fly.
Several OpenType tables implement this model. The fvar table defines the axes and named instances, gvar stores the outline deltas for TrueType outlines (CFF2 serves the same role for PostScript-style outlines), avar can remap axis values for a more even progression, and STAT describes style names so that applications can present the family sensibly in menus.
Named instances are predefined positions in the design space, such as Regular at weight 400 or Bold at weight 700. They let applications that do not expose sliders still offer familiar style names, while capable software can reach any value between the named points.
Registered and custom axes
The specification defines five registered axes with lowercase four-letter tags and agreed meanings. Designers can also add custom axes with uppercase tags for properties such as contrast, serif length or grade.
| Axis | Tag | Value scale | What it controls |
|---|---|---|---|
| Weight | wght | 1 to 1000, Regular usually 400 | Stroke thickness |
| Width | wdth | Percent of normal, often 75 to 125 | Condensed to expanded letterforms |
| Italic | ital | 0 or 1 | Switch to italic letter shapes |
| Slant | slnt | Degrees, typically about -15 to 0 | Oblique angle |
| Optical size | opsz | Point size, for example 8 to 144 | Detail and spacing for the text size |
Each font sets its own minimum, default and maximum for every axis, so a family may offer weight only from 300 to 800. A common custom axis is grade (GRAD), which changes stroke weight without changing character widths, useful for adjusting for dark mode or printing conditions without reflowing text.
Variable fonts compared with static font families
The choice between a variable font and static files is mainly about flexibility, file size and compatibility. The following table summarizes the trade-offs.
| Aspect | Variable font | Static font family |
|---|---|---|
| Files per family | One, or two with a separate italic | One per style |
| Available styles | Continuous range between extremes | Only the styles shipped |
| Size for one or two styles | Usually larger than two static files | Smaller |
| Size for many styles | Usually much smaller in total | Grows with every style |
| Responsive adjustment | Fine steps, animatable | Jumps between fixed styles |
| Legacy software support | Limited in older applications | Universal |
The size comparison has a clear break-even point. A website that needs only regular and bold may load less data with two static web font files, while one that uses four or more weights and widths usually saves bandwidth and requests with a single variable file.
Using a variable font on the web and in design tools
In CSS, a variable font is declared with ranges in the @font-face rule, such as a font-weight range of 100 to 900, and then used with ordinary properties such as font-weight, font-stretch and font-style. The low-level property font-variation-settings reaches custom axes directly, while font-optical-sizing lets the browser set the optical size axis automatically from the text size.
| Situation | Recommended approach | Reason |
|---|---|---|
| Website with many weights | One variable WOFF2 file | Fewer requests and less data overall |
| Only regular and bold needed | Compare with two static files | Static may be smaller |
| Responsive headlines | Adjust width axis by viewport | Fits long words on small screens |
| Small and large text from one family | Use optical size axis | Better legibility at each size |
| Older office or print workflows | Static instances exported from the font | Ensures compatibility |
Standard properties should be preferred over font-variation-settings for registered axes, because the low-level property overrides inheritance in surprising ways: setting one axis there resets other axes set through it elsewhere unless all values are repeated.
Limitations and common mistakes
Variable fonts solve many problems, but they introduce new ones. Not every intermediate value is equally well designed, because interpolation between masters can produce awkward shapes in some glyphs if the designer did not check the whole range.
- Unsupported software may show only the default instance or a few named instances, hiding the rest of the design space.
- Synthetic bold or italic can appear when CSS ranges are not declared, because the browser assumes the font lacks the style.
- Animating axes on long text can cost rendering performance and distract readers.
- Licensing can differ from static families, so web, desktop and app use should be checked separately.
- Choosing arbitrary values such as weight 437 everywhere undermines a consistent type scale; define a small set of tokens instead.
In everyday language
Normally a typeface comes as a set of separate files: one for regular text, one for bold, one for light and so on. A variable font puts the whole range into one file, like a dimmer switch instead of a few fixed light settings.
With it, letters can be made a little bolder, narrower or more slanted in smooth, small steps. Websites load faster when they need many styles, and designers can fine-tune text so it fits and reads well on any screen.
Seen in the real world
A news website uses one sans-serif family in six weights and two widths across headlines, body text and navigation, which previously required twelve static font files. The front-end team replaces them with one variable WOFF2 file with weight and width axes, plus a separate italic file.
On narrow phone screens, long headlines now use a slightly condensed width of about 85 percent instead of breaking awkwardly, and body text uses the optical size axis for better small-size legibility. The total font data loaded on a typical article page drops noticeably, the number of font requests falls from several to two, and the design team defines six weight tokens in its system so that editors do not invent arbitrary values.