Variable Font Lab

axis controls

Drag any slider. With avar2, moving a single axis can trigger coordinated shifts in linked axes — a single "design intent" slider drives multiple technical parameters.

live specimen

avar2 coordinate mapping

With avar2 on, the user-facing slider value is remapped to an internal design-space coordinate. Without avar2, the value passes through unchanged (1-to-1 mapping).

character comparison

10 characters at the current axis position. Toggle avar2 to see how the internal coordinates shift glyph rendering.

render quality comparison

export CSS

how avar2 works

The OpenType avar table defines piecewise-linear mappings from the normalised user-space axis value to an internal design-space value. avar version 1 mapped each axis to itself. avar2 adds cross-axis mappings: axis A can depend on the value of axis B. This lets a font expose a single high-level "expressiveness" axis that automatically adjusts weight, optical size, and grade together — no multi-slider juggling needed.

/* Using font-variation-settings with avar2-linked axes */
.text {
  font-family: 'MyVariableFont';
  /* User sets a single axis; avar2 internally adjusts others */
  font-variation-settings: 'wght' 600;
  /* The font maps wght=600 to: wdth~90, opsz~14, GRAD~-25 */
}

/* Or use the high-level CSS properties where supported */
.text {
  font-weight: 600;
  font-optical-sizing: auto; /* lets avar2 adjust opsz */
}

references

• ChromeStatus entry
• OpenType spec — avar table
• Chrome 148 release notes