A traditional font family might arrive as a folder containing Regular, Medium, SemiBold, Bold, Condensed, Italic and perhaps a dozen other files.
A variable font can potentially contain much of that design space inside a single font file.
That sounds as though somebody simply bundled several fonts together, but that isn’t really what is happening.
Variable fonts use a system built into OpenType that allows a typeface to change continuously along one or more numerical axes. Instead of choosing only between predefined weights such as 400 and 700, a variable font might theoretically allow a browser or design application to request any supported value between 100 and 900.
The same principle can apply to width, slant, optical size and even characteristics invented specifically for one typeface.
Underneath that convenient slider in a design application is a surprisingly sophisticated system of coordinates, variation tables and interpolation.
A Variable Font Is Really a Design Space
The OpenType specification describes a variable font in terms of a design-variation space.
Imagine a font whose only variable property is weight. At one end of the design space might be a Thin design and at the other a Black design. Every position between those points represents another possible version of the typeface.
Add width and the design space becomes two-dimensional. A particular instance might be narrow and light, wide and bold, or somewhere between the two.
Add another axis and the space becomes three-dimensional.
The font doesn’t need a separate complete set of outlines for every possible position. Instead, the font contains information describing how aspects of the design change as the requested coordinates move through that space.
One of the key pieces of this system is an OpenType table called fvar, short for Font Variations.
The fvar table tells software which variation axes exist and defines the minimum, default and maximum values supported by each axis.
A font might contain data conceptually similar to this:
Weight:
minimum: 100
default: 400
maximum: 900
Width:
minimum: 75
default: 100
maximum: 125The actual OpenType format is considerably more structured, but this illustrates what an application needs to know before presenting controls to the user.
The same table can also define named instances.
For example, even though a weight axis allows hundreds of numerical positions, a font designer can identify specific coordinates as familiar styles such as Regular, Medium and Bold. This lets software present conventional choices without removing the ability to access values between them.
OpenType defines several registered axes with standard four-character tags. Some of the most important are:
wght-weightwdth-widthslnt-slantital-italicopsz-optical size
Font designers aren’t restricted to those axes. Variable fonts can contain custom axes for properties specific to the design. A typeface could theoretically vary serif size, contrast, roundness or another characteristic, provided the font defines the necessary variation data.
This is one reason variable fonts are more interesting than simply replacing five static font files with one download. They can expose parts of a typeface’s design system that would be impractical to release as hundreds of individual files.
You can see how different design approaches affect typography by comparing FontLark’s serif fonts with its sans serif fonts.
What Actually Changes When You Move a Font Slider?
Suppose a designer creates a variable typeface containing light and heavy master designs.
The compiled font does not normally contain hundreds of fully duplicated glyph sets representing every intermediate weight. OpenType variation mechanisms instead allow software to derive intermediate instances from a default design plus variation data.
For TrueType-based variable fonts, one important table is gvar, the Glyph Variations table.
Glyphs are constructed from points. Variation data can describe how those points should move at different positions within the font’s variation space.
Consider a highly simplified letter H.
At weight 400, its vertical stems might have one thickness. At weight 900, points defining the inside and outside edges of those stems move so that the strokes become significantly heavier.
If the user requests weight 650, the font-rendering system calculates an intermediate result using the variation data associated with those coordinates.
This process is broadly known as interpolation.
Importantly, glyph outlines aren’t the only things that may vary.
A heavier character may require a different horizontal advance width. Font-wide measurements may need adjustment. Vertical metrics can change. Other parts of the OpenType architecture therefore participate in the variable-font system.
Tables you may encounter when inspecting a variable font include:
fvar-defines variation axes, their ranges and named instances.gvar-contains glyph variation data for TrueType outlines.HVAR-handles variations in horizontal metrics.VVAR-provides variation data for vertical metrics.MVAR-allows certain font-wide metric values to vary.avar-changes how user-selected axis values map into the font’s internal variation space.
The avar table is particularly interesting because interpolation does not always need to behave in a perfectly linear way.
A designer might decide that moving a weight control halfway between two numbers should not correspond visually to a mathematically simple halfway transformation. The axis-variation mapping provides a mechanism for adjusting that relationship.
Internally, OpenType normalizes coordinates onto a scale that runs from -1 through 0 to 1 around the default position. Variation calculations then use these normalized coordinates when deriving the requested instance.
None of this is something a normal web designer needs to calculate manually. It happens within the font-processing and text-rendering stack. But understanding it explains why a variable font is fundamentally different from a ZIP file containing many ordinary fonts.
How CSS Talks to a Variable Font
On the web, CSS provides high-level controls for many registered variation axes.
For weight, you usually don’t need special variable-font syntax at all.
An @font-face rule can declare that one file covers a range of weights:
@font-face {
font-family: "Example Variable";
src: url("example-variable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
}CSS elsewhere on the site can then request values within that range:
.article-title {
font-family: "Example Variable", sans-serif;
font-weight: 725;
}A static family would normally need an actual font face corresponding to the requested style or would require the browser to select an available alternative. A variable font can potentially generate the requested instance from its variation space.
CSS also provides the lower-level font-variation-settings property:
.headline {
font-variation-settings:
"wght" 720,
"wdth" 92;
}However, the CSS Fonts specification recommends using normal high-level CSS properties for registered axes whenever appropriate. In other words, use font-weight to control wght rather than reaching for font-variation-settings unnecessarily.
The lower-level property becomes particularly useful when accessing custom axes that don’t have an equivalent standard CSS property.
One of the most interesting registered axes is opsz, or optical size.
Optical sizing comes from a much older typographic idea. In metal type, a typeface intended to be printed very small wasn’t necessarily just a scaled-down copy of its display version. Smaller cuts could have sturdier strokes and other adjustments that helped them remain readable. Large display sizes could support finer details and greater contrast.
Variable fonts can encode comparable changes along an optical-size axis.
Modern CSS exposes this through:
font-optical-sizing: auto;According to the CSS Fonts specification, auto is the initial value. When a font supports the opsz variation, the user agent can choose an optical-size value based primarily on the rendered font size.
This means a single variable font can potentially adjust not merely the scale of the same letterforms, but aspects of the letterforms themselves as text moves between small body copy and large display typography.
That distinction is easy to miss when working with fonts purely through visual font pickers.
Are Variable Fonts Actually Better for Websites?
Variable fonts are often described as a web-performance feature, but the answer is more nuanced than “variable fonts are smaller”.
If your website currently loads five separate files for Regular, Medium, SemiBold, Bold and Black, replacing those with one well-optimised variable font may reduce the number of font requests and avoid duplicated data across separate font resources.
That can be useful.
But a variable font containing a huge design space is not automatically smaller than one static WOFF2 file.
If a website only ever uses Regular 400, downloading a variable font containing weights from 100 through 900, multiple widths and several additional axes could include variation data the page never uses.
The practical comparison therefore isn’t:
variable font versus static font.
It is:
the variable font data you actually need versus all of the static font resources you would otherwise need to deliver the same typography.
There are also design benefits that have nothing to do with file size.
Responsive interfaces can adjust typography more subtly. A heading doesn’t have to jump from weight 600 to 700 simply because those are the only files available. Designers can experiment with intermediate positions where appropriate.
Variation axes can also be animated because the browser has numerical values between which it can interpolate.
.logo {
font-variation-settings: "wght" 400;
transition: font-variation-settings 300ms ease;
}
.logo:hover {
font-variation-settings: "wght" 800;
}That doesn’t mean every website should animate its typography. Excessive font animation can quickly become distracting and may cause layout or performance considerations of its own.
But technically, the design space is no longer limited to a handful of fixed font files.
Variable fonts therefore sit somewhere between type design and software.
The type designer defines the permissible design space. OpenType stores the axes and variation data. The shaping and rendering system resolves the requested coordinates. CSS gives the webpage a way to request them.
What appears to the user as a simple weight slider is really the interface to that entire system.
If you’re choosing typography for a website rather than building the font itself, the fundamentals remain the same: start with a typeface that suits the project, use only the variations that add value and don’t sacrifice readability simply because an axis is available.
For more conventional choices, browse FontLark’s display fonts, serif fonts and sans serif fonts.
Variable Fonts Are More Than Multiple Weights in One File
The simplest explanation of a variable font is that it replaces multiple font styles with one file.
That explanation is useful, but incomplete.
A variable font is better understood as a font containing a defined design space. The fvar table identifies the axes and their allowed coordinates. Variation data describes how outlines and other values change across that space. Applications request a position, and the font-rendering system derives the appropriate instance.
Standard axes such as wght, wdth and opsz give designers familiar controls, while custom axes allow type designers to expose characteristics that traditional font families could rarely offer.
That architecture is what makes a font capable of being Light, Regular, 637 weight, Condensed, optically adjusted, or several of those things at the same time, without requiring a separately drawn and distributed font file for every possible combination.
So the next time you move a variable-font slider in a browser or design application, you’re not simply switching fonts.
You’re moving to another coordinate inside the typeface.
Explore fonts on FontLark to discover more typefaces for web design, branding and creative projects.