Variation axis

A variation axis is one dial inside a variable font: a named, continuous range the outlines can be moved along. Each axis carries a four-letter tag and three numbers, a minimum, a default and a maximum, and a font instance is just a coordinate on every axis at once. Five tags are registered, and registered tags are always lowercase: wght for weight, wdth for width, slnt for slant in degrees, ital for the switch into a true italic, and opsz for optical size. Anything a foundry invents for itself takes an uppercase tag instead, which is the whole convention: GRAD for grade, YOPQ for the thickness of thin strokes, and so on down whatever the design needed.

The important thing about an axis is that a type designer drew it. The foundry supplies masters at the ends of the range, and often at points in between, and the interpolation between them is designed rather than guessed: counters stay open as the stems thicken, joints are rebuilt, the fit is adjusted. That is what separates an axis from faux bold, where the browser has no second drawing to move toward and smears the one it has outward until the letters lose their counters. Every value on a real axis is a drawing the designer signed off on, including the ones nobody has ever named.

Reach for the high-level CSS property when there is one: font-weight for wght, font-stretch for wdth, font-style: oblique 12deg for slnt, font-optical-sizing for opsz. Those inherit, animate, and mean something to the browser, so a fallback face still gets a sensible weight. font-variation-settings is the escape hatch for custom axes, and it comes with a sharp edge: it does not inherit one axis at a time, so a rule that sets a single tag on a child silently resets every other axis that element had. Axis values are also inclusive of nothing outside the range, and a value the file does not carry is clamped rather than honoured.

A foundry usually ships named instances alongside the axes, which are just bookmarked coordinates with human names on them (Regular, Condensed Bold) so a menu has something to list. They are conveniences, not the design space. The space is the axes, and picking a value between two named instances is as legitimate as picking one of them.