Variable Font Axes: Weight, Width, Optical Size
Variable fonts expose axes that go far beyond weight. Here is what each axis does and how I decide which ones to actually use. Variable fonts expose design axes that the browser can interpolate between, and weight is only the most familiar one. Understanding the full set of axes available in modern variable fonts opens up typographic possibilities that static fonts simply cannot match, from responsive optical sizing to width adjustments that adapt to narrow viewports. After working with variable fonts across many projects, I have a clear picture of which axes are worth using and which are novelties that rarely justify their file size cost. The Registered Axes The OpenType specification defines five registered axes that appear across many font families: weight ( wght ), width ( wdth ), italic ( ital ), slant ( slnt ), and optical size ( opsz ). Registered axes have standardized four-letter tags, which means any font declaring them is interpreted consistently by browsers and design tools. I treat these as the core axes and evaluate each one for every project. Weight is the most useful axis by a wide margin. It replaces what would otherwise be four to six separate static files, and the browser can sample any value from one to nine hundred. I use intermediate weights like four hundred and fifty or five hundred and fifty to fine-tune hierarchy without committing to a full step.