The Infinite Font
One file, a thousand faces. Variable fonts turned the typeface from a product into a space — and gave the written page a new physics that this very headline is demonstrating.
On September 14, 2016, in a conference hall in Warsaw, four companies that compete on nearly everything stood up together. Apple, Adobe, Google and Microsoft announced OpenType Font Variations — a way to store not a font, but a whole family of fonts, as a set of master outlines plus the instructions for moving between them. The press release called it a specification. It behaved more like a state change: type stopped being a set of fixed objects and became a continuous space.
1 The sixty-style problem
A typeface used to arrive as a small stack of compromises. Regular, italic, bold, bold italic — four files, four drawings, and anything between them simply did not exist. A designer who wanted semibold-condensed bought another file; a developer who wanted it on the web bought another download. Big families like the superfamilies of the 1990s shipped dozens of separate fonts, each a frozen sample of what the letterforms could be. Every weight on a page was an extra request, an extra license, an extra reason to settle for regular and bold.
The variable font dissolves the stack. Inside the file sit the extreme masters — the thinnest and the fattest drawing, the narrowest and the widest — and a table of deltas describing how every outline point travels between them. Ask for weight 437 and the renderer interpolates a font that was never drawn, on demand. The typeface stops being a collection of styles and becomes what it always secretly was: a space with axes.
2 Old futures
The idea was not new in Warsaw; it was the third time the industry had tried it. Donald Knuth’s Metafont, in 1979, was the ur-variable-font: letterforms described by parameters, widths and weights spun from the same equations. Adobe’s Multiple Masters followed in 1991 — Myriad and its siblings as interpolating families — and Apple’s TrueType GX arrived in the mid-1990s with the same trick baked into the OS, demonstrated by a shape-shifting demo font called Skia.
All three died of the same disease: they asked too much of the machinery around them. Multiple Masters required applications and users who understood design space; almost none did, and Adobe withdrew the line by 1999. GX required an ecosystem nobody else controlled. What changed by 2016 was the web. A browser is an interpolation engine attached to a layout engine; a font with axes is exactly the kind of thing a page knows what to do with. The fourth attempt had a host.
3 How it works
Five axes are registered — agreed vocabulary that software can rely on: wght for weight, wdth for width, opsz for optical size, slnt for slant and ital for the italic switch. Beyond those, a designer may invent any axis at all: a casualness axis, a wonkiness axis, a grade axis that thickens strokes without moving a single boundary so text can change color without reflowing a line. Font Bureau’s parametric axes — with names like XOPQ, the thickness of opaque strokes in the x direction — decompose the letter into measurable ingredients, and Roboto Flex carries thirteen of them.
The mathematics underneath is honest geometry: glyph masters at the corners of the space, and deltas — per-point offset vectors — that scale as you travel between them. An n-axis font is an n-dimensional object. Every intermediate position is a legitimate, renderable font that no human ever had to draw.
4 The expressive web
Practicality came first: one variable file can be smaller than two static weights, so the web adopted it as a compression story. But the deeper change is expressive. Optical size can follow the rendered size automatically, so footnotes get sturdy letterforms and headlines get fine ones — a correction letterpress printers made by cutting different sizes differently, automated at last. Weight can answer the reader: this issue’s running heads grow bolder as you approach the end of a story. And axes make type addressable — scroll position, pointer position, reading progress can all be plugged straight into the letterforms.
A variable font is not a font with options. It is a space of fonts.
From this story
The headline at the top of this article is not an animation of fonts swapping; it is one font, sliding along two of its axes as you scrolled. The cover on the index does the same thing with your pointer. Specimen mode — the small tester attached to every headline in this issue — hands those axes to you.
5 Practice, briefly
Working with variable fonts is mostly knowing where the knobs are. Familiar CSS — font-weight, font-stretch — already drives the registered axes, so ordinary stylesheets get variable behavior for free. The lower-level font-variation-settings property opens everything else, including invented axes. The craft is restraint: axes exist to serve the text, not to wobble for applause. Optical size should track size because that is what sizes were always for. Weight should mark hierarchy. Motion should end in a rest state a typographer would sign.
For five hundred years a font was a thing you bought — a box of sorts, then a file, always a fixed set of drawings. The variable font made it a place you stand in. Type design stopped being only the drawing of letters and became the drawing of the spaces letters live in, and the reader — scrolling, pointing, reading — became the interpolator. The font is not finished when the designer ships it. It finishes itself, a thousand times a day, in the gap between two masters.
Theo Marsh builds type tools and writes about font technology. His idea of a good time is a diff between two versions of the same outline.