font-variation-settings

The font-variation-settings CSS property is the low-level mechanism for controlling variable font axes — the design dimensions along which a variable font can interpolate. Just as font-feature-settings controls OpenType features, font-variation-settings controls the continuous axes that make variable fonts powerful.

/* Control weight and width axes directly */
.heading {
  font-variation-settings: "wght" 750, "wdth" 85;
}

/* Optical size axis */
.small-print {
  font-variation-settings: "opsz" 12;
}

/* A font with a custom italic axis (not just a style flag) */
.slanted {
  font-variation-settings: "slnt" -10;
}

Registered vs custom axes:

OpenType defines five "registered" axes with standard behavior:

For registered axes, always prefer the high-level CSS property:

/* Preferred */
.bold { font-weight: 750; }
.wide { font-stretch: 115%; }

/* Only use font-variation-settings for custom axes */
.expressive {
  font-variation-settings: "SOFT" 80, "WONK" 1;
}

This is important because font-variation-settings, like font-feature-settings, does not cascade granularly. Setting it on a child resets all inherited axes. High-level properties compose correctly across the cascade.

Animating variable fonts:

@keyframes weight-pulse {
  from { font-variation-settings: "wght" 300; }
  to   { font-variation-settings: "wght" 800; }
}

.animated-heading {
  animation: weight-pulse 2s ease-in-out infinite alternate;
}

Variable font axes can be animated with CSS transitions and keyframe animations, enabling effects impossible with static fonts. Roboto Flex exposes axes including GRAD (grade — weight without changing width), YOPQ, and YTUC, enabling fine typographic control. Recursive includes a MONO axis that transitions from proportional to monospaced spacing.

Checking available axes:

// Font Loading API to inspect axes
document.fonts.ready.then(() => {
  for (const font of document.fonts) {
    // Not directly exposed, but you can check via CSS.supports
  }
});

Use tools like Wakamai Fondue or the browser DevTools font inspector to discover which axes a font supports and their min/max/default values before writing font-variation-settings declarations.