Variable-font axis
A slider built into a variable font, controlling one dimension such as weight, width, slant, optical size, or a custom setting.
See it
What it is
A variable-font axis is one adjustable dimension inside a variable font. Each axis has a four-character tag, a minimum, a default, and a maximum. Registered axes include 'wght' for weight, 'wdth' for width, 'slnt' for slant, 'ital' for italic, and 'opsz' for optical size. Fonts can also add custom axes, such as the 'GRAD' grade axis in Roboto Flex. The machinery arrived with OpenType 1.8, announced jointly by Adobe, Apple, Google, and Microsoft at ATypI Warsaw in 2016.
Reach for an axis when named styles are too coarse or the design needs to respond continuously. CSS 'font-weight', 'font-stretch', 'font-style', and 'font-optical-sizing' are the readable controls for registered axes. Use 'font-variation-settings' when a custom axis has no dedicated CSS property, or when you need direct low-level control.
Gotcha: tags and ranges belong to the specific font file. A value that works in one family can be outside another family's range, and 'XTRA' or 'CASL' may not exist at all. Inspect the font before setting values. Also expect width-axis animation to reflow text, since changing glyph width changes line breaks even when the font-size stays fixed.
Ask AI for it
Build an interactive Roboto Flex axis specimen. Read the axis tags and min, default, and max values from the font's fvar table instead of hard-coding guessed ranges, then render one labeled range input per axis. Drive 'wght', 'wdth', and 'slnt' with 'font-weight', 'font-stretch', and 'font-style' where those properties can express the chosen value; Roboto Flex has no 'ital' axis, so do not render a control for one. Drive numeric 'opsz' and the custom 'GRAD' axis with 'font-variation-settings', preserving the full active tag list on every update. Show each current value, add a reset-to-default button, and keep the sample in a fixed-width container so reflow from 'wdth' is obvious.