variablefont

A variablefont is a font file that contains multiple typographic styles along one or more axes in a single resource. Instead of shipping separate static fonts for each weight, width, or style, a variable font provides a continuous range of styles that can be interpolated programmatically at render time.

Variable fonts use the OpenType font variations framework. Each axis has a tag, such as wght for weight, wdth for width, or opsz for optical size, and a defined minimum, default, and maximum value. Glyph outlines are interpolated across the design space to produce an instance with the chosen coordinates. This enables smooth transitions between styles without loading multiple font files.

Typical axes include weight (roughly 100–900), width (roughly 50–200), and optical size (roughly 8–96). Additional axes may be provided by a font designer, enabling other stylistic changes such as slant or italics. A variable font may also include named instances for common styles, though its strength lies in continuous variation.

Benefits include reduced file counts and download sizes, easier management of typography across responsive layouts, and the ability to animate or tune weight, width, and other properties with fine granularity. This can improve consistency and accessibility across devices and resolutions.

In web and software development, CSS supports controlling variable fonts via the font-variation-settings property, for example: font-variation-settings: 'wght' 700, 'wdth' 110. If a user agent or font lacks support, designers can fall back to static fonts. Variable fonts are part of the OpenType Variation technology and are supported in modern browsers and design tools, with ongoing expansion of axes and capabilities.