Variable Font Axis Playground

A conventional font family is a set of files: regular, bold, light, italic. A variable font replaces them with one file in which weight, width, slant and other qualities are continuous sliders. A designer can pick any weight from thin to black, including those between the named ones, and animation between them is smooth. This tester loads a variable font in your browser, builds a slider for every axis it contains and shows the CSS that reproduces the result.

What the file contains

Variable fonts add tables to an ordinary font. fvar lists the axes and the named instances, gvar stores how outlines change along each axis, and tables such as HVAR and MVAR adjust spacing and metrics. Five axes are registered in the OpenType specification: wght for weight, wdth for width, slnt for slant, ital for italic forms and opsz for optical size. Designers can also add their own axes with uppercase tags, such as GRAD for grade or CASL for casual.

A worked example

Press Sample to load Geist. The page reports Family Geist, Axes wght and Named instances 9. The slider “Weight (wght)” runs from 100 to 900 and starts at 400, and the chips read Thin, ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold and Black. The CSS box shows font-family: "Geist", sans-serif; and font-weight: 400;. Drag the slider to the maximum, or choose Black, and the preview text “Variable fonts flex between weights” becomes the heaviest weight, with the CSS changing to font-weight: 900;. The Reset button returns to the defaults.

Using the CSS

For registered axes, use the matching CSS property: font-weight for wght, font-stretch for wdth, font-style: oblique with an angle for slnt, font-style: italic for ital and font-optical-sizing for opsz. Use font-variation-settings only for custom axes, because it overrides the other properties and every setting must be repeated each time you change one. To use the font on a page, load it with an @font-face rule that declares a range, such as font-weight: 100 900, so the weights between are valid.

Choosing values

Named instances are the designer’s recommended points, so start with those, then adjust. Optical size matters for text at small sizes: a font with an opsz axis can add thicker strokes and looser spacing automatically, and browsers apply it when font-optical-sizing is auto. Slider steps are whole numbers for wide ranges and tenths for small ones such as slant. Make sure that the extremes of weight still read well at the sizes you use.

Edge cases

A static font has no axes; the page says so and suggests the inspector. Fonts with an avar table change the mapping of slider positions to design coordinates, so equal steps may not look equal. Performance can suffer when very large variable fonts are animated, so test on slower devices.

Limits

The tester previews the font using the browser’s own rendering, so results depend on the browser. It does not edit fonts, create instances or export a static font at a chosen weight. The font is read locally and never uploaded.

Related tools

• Font Inspector shows all axes, features and tables.
• @font-face CSS Generator writes the rule with a weight range.
• Font Subsetter shrinks the file while keeping its axes.
• Type Scale Calculator sets the sizes you test.