Width – The Twelve Days of Ax‑mas
On the second day of Ax-mas, we’re exploring: the Width wdth axis.
Width and Weight are two of the five Registered Axes in the OpenType specification documentation.
What are registered axes?
There are two different classifications of axes in a Variable Font. Registered axes are so common and have been implemented so consistently, that they have been explicitly added as part of the OpenType specification. Then, all type designers can add them to their Variable Fonts in the same way.
If an axis is used consistently across fonts, it helps UI developers to show those specific axes in a consistent way, too. This is intended to build familiarity for end users of Variable Fonts (or just fonts in general—whether they know they are using a VF or not).
Width and wdth
But why write the axis name as both Width and wdth?
Internally, axes have four-character tag names, similar to OpenType features. Registered axes have all-lowercase names, like wght for Weight and wdth for Width. Tags defined by the type designer are all uppercase, ex. CUST for a hypothetical Custom axis.
Like the Weight axis, the Width axis is intended to change the width from the perspective of the typographer, the person using the font. The width isn’t changing completely in isolation. If you were to drag a width slider down to 1, in almost all cases the font won’t have no width at all.
Instead, as the specification puts it:
Values can be interpreted as a percentage of whatever the font designer considers “normal width” for that font design.
Justifying Width
The OpenType spec documentation also includes a line or two for each axis called “Suggested programmatic interactions.” This is intended both for UI developers and type designers.
For type designers, it’s intended to give context about how the Variable Font might be used by end typographers, or less obvious ways the axis might be used. For the Width axis, one is that, “Applications may choose to select a width variant in a variable font automatically in order to fit a span of text into a target width.”
My favourite example of this is Bram Stein’s 2018 talk, Line breaking, justification, and variable fonts .
It’s worth watching or going through his slide deck, as it all build up to an example using the Width axis.
In short, the idea is that by using a slight change on the Width axis in a text typeface, and integrating that into a line breaking and justification algorithm, it’s possible to improve justification and line fitting. He only uses a small shift in width, plus or minus a small percentage of the axis. It flips the idea that some justification options like InDesign offer that change the space between words, and instead uses the Width axis to change words or lines themselves.
You don’t have to look at many examples of digital justification to know there is huge room for improvement. Another aspect of this I find compelling is how subtle the use of the Variable Font is—it improves the design, but even the designer doesn’t need care that the implementation uses Variable Fonts.
On the third day, we’ll look at another registered axis that can also be used automatically.
Until next time,
Kenneth