Why prefer the registered properties over raw tags?

Because they behave like normal CSS. A registered property such as font-weight or font-optical-sizing inherits, participates in the cascade, and can be changed by a media query without disturbing other axes, whereas a raw tag list replaces the entire axis state at once and overrides whatever else was set. The raw form is for axes with no standard property, such as softness.

What is optical size actually changing?

The drawing of the face, not its scale. A variable family with an optical size axis carries a set of design parameters that shift from text proportions to display proportions, with the counters opening and the strokes thinning as the size grows. That is why setting a display optical size in body copy looks subtly wrong rather than obviously broken.

Why does the readout call a pairing mismatched?

Because it compares the axis value with the rendered size and flags them as mismatched when they differ by more than a quarter of the size. With automatic optical sizing enabled the two normally track each other, so a mismatch means the axis has been moved by hand away from what the size would choose. Sometimes that is deliberate, and the readout is the record of it.

Do all seven families have the same axes?

No. Five of them expose only a weight axis, two add optical size, and one carries a third softness axis on top of both. The axis count is reported for whichever family is selected, and the sliders are rebuilt when the family changes, so the control set always matches the file being tested.

Is a variable font always the lighter choice?

Not necessarily. A variable file carries every weight and axis, so it is usually heavier than a single static face and lighter than the set of statics it replaces. The tool does not weigh the file, so the trade has to be made on the real figures: one variable file against the three or four weights a design actually uses.

Variable Font Sliders

Variable axes

Variable family

Sample text

Type sizepx

CSS mode

font-variation-settingsfont-weight / optical-sizing

Weight (wght)

Optical size (opsz)

Softness (SOFT)

Axes on this family3

Current settings"wght" 400, "opsz" 48, "SOFT" 0

Optical size vs type size48 axis / 48px — matched

Preview

The quick brown fox jumps over the lazy dog

Two ways to reach the same axis: font-variation-settings takes raw four-character tags and overrides everything, while the registered CSS properties (font-weight, font-optical-sizing) participate in inheritance and cascade. Prefer the registered properties except where no standard property exists for an axis.

Axis reference

Tag	Name	Range	Registered CSS property
wght	Weight	300 – 700	font-weight
opsz	Optical size	9 – 144	font-optical-sizing
SOFT	Softness	0 – 100	none — font-variation-settings only

css output

.variable-type {
  font-family: 'Fraunces', serif;
  font-size: 3.0000rem;
  font-variation-settings: "wght" 400, "opsz" 48, "SOFT" 0;
}

You Might Also Need

CSS Variable Font Builder

Build variable font CSS

Variable Font Axis Exporter

Export variable font axes

Font Previewer

Preview any font with custom text and sizes

Font Rendering Preview

See anti-aliasing and rendering

The variable font sliders drive the real axes of the variable families this domain loads, one slider per axis, and report what each axis is doing. Optical size is the interesting one, since it changes the drawing of the face rather than its weight.

What is Variable Font Sliders?

The variable font sliders expose one control per axis for each variable family in the catalogue, render the sample at the resulting settings and export either form of the CSS.

Seven families carry variable axes here: five with a weight axis alone, and three that add an optical size axis, with one of those also offering a softness axis.
Weight runs from 300 to 700 in steps of ten, optical size ranges differ per family, and the softness axis runs from 0 to 100 in steps of five.
Every axis is driven through font variation settings in the preview, so moving a slider changes the rendering immediately.
Two CSS modes are offered: the raw tag form, and the registered properties form which writes font-weight and enables automatic optical sizing.
The axis reference table lists each tag, its name, its range and the registered CSS property that maps to it, and marks the axes that have no standard property at all.

The distinction the panel draws is the reason the tool exists. A raw tag list overrides everything it touches and does not participate in inheritance or the cascade, while a registered property behaves like any other CSS property and inherits properly. Weight has a registered property, optical size has one, width maps to font stretch, and italic maps to font style, but a custom axis such as softness has no property and can only be reached through the raw tag form. The optical size readout builds on the same idea: it compares the axis value with the actual type size and calls the pairing matched when the two are within a quarter of each other, because an optical size axis is designed to track the rendered size, and a face set at a display optical size in body text looks wrong in a way that is hard to name.

Only the axes declared for each family are exposed, so a variable file with an axis the domain does not request cannot be driven here.
The ranges come from the webfont request rather than from the file itself, so a face whose real range is narrower will clamp silently.
The preview always enables automatic optical sizing, which means the optical size slider and the rendered size interact.
Weight readouts are a number on an axis, not a named weight, so 500 here is not guaranteed to match the family's medium.
Nothing reports the file size cost of a variable family against a static subset of the same faces.

Use it when a variable family is being evaluated, when an optical size axis needs understanding before it is used in production, or when a custom axis has to be seen before a design commits to it. The readout comparing the axis with the rendered size is the part that most often changes a decision. Where the axes have to be exported into a stylesheet for the whole family, the CSS variable font builder writes the full set, and where the axis ranges need to be read out of a file, the variable font axis exporter does that. The CSS variable font builder produces the declarations, the variable font axis exporter reads real axis ranges from a file, and the font rendering preview covers how the result rasterises at small sizes.

How to use Variable Font Sliders

Choose the variable family, which resets the sliders to that family's defaults and shows how many axes it declares.
Move each axis slider and watch the sample, remembering to compare the optical size readout against the type size as you change it.
Switch the CSS mode and compare the two forms, then read the axis table to see which of the axes has no registered property.
Copy the exported CSS and prefer the registered properties wherever the table lists one, since they inherit.

When to use Variable Font Sliders vs related tools

Reach for it when a variable family is being assessed before it is adopted, when an optical size axis needs to be seen at several sizes, or when a custom axis such as softness has to be justified to a reviewer. The size against axis readout settles the last of those quickly. For production declarations the CSS variable font builder writes the whole family, the variable font axis exporter reads the real ranges out of a file rather than from the request, and the font previewer is the tool for judging a static setting instead.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.