Variable Fonts are fonts in which an entire font family can be contained into one file, prioritizing speed and efficiency, as well as space.
The magic of variable fonts come from their axes. A variable font can come in any number of axes. There are five registered axes recognized, as well as the ability to create custom axes.
The ‘wght’ axis is the first of five registered axes. As you might guess, ‘wght’ controls the weight, or stroke thickness of a given font. From light to bold, you can have it all.
The ‘wdth’ axes controls the width of a font. Whether you’re looking for a super condensed font, an extremely wide font, or somewhere in between, wdth is the way to do that.
Like an on/off switch, the ital axis allows you to toggle between Roman Style and Italic. Less often, this is provided on a grade, with steps of 0.1 in a range of 0 (Roman) to 1 (Italic).
Upright? Slanted? Backslanted? Take your pick! Some ranges extend from -90 to 90 allowing for a full range. Type designers also call slant “oblique.” What’s the difference between slnt and ital? Lol. Very good question.
Coming back at you with that on/off switch, ‘opsz’ toggles between on and off for optical size. Optical, optimum, when type is really, really tiny, and this bad boy is switched to on, you’ll be maximizing legibility and happiness.
The whatever floats your boat, the world is your oyster, the endless possibility axis: the custom axis. Type designers can make any number of custom axes, toggling or sliding along the axis as they please. This is where the real fun lies.
These axes provide a foundation for using variable fonts. They can allow for a speedier web experience, smaller file size, a broad hierarchy, and functional improvements to an interface. But even beyond that, they can allow for a more investigative experience, one full of possibility and the opportunity to break away from what good typography is or has to me. No more a crystal goblet for encasing ideas, typography can be the idea as well.