v148 · Fonts · CSS

Axis Remapping Visualizer

The avar2 OpenType table defines piecewise-linear segment mappings between variation axes: when one axis moves, others are automatically adjusted. This visualizer shows the mapping curve for simulated avar2 segments — move the input axis slider and watch the non-linear output value propagate to linked axes.

avar2 coordinate mapping

Preset:

Input — user-space axes

wght (weight) 400

wdth (width) 100

opsz (opt size) 14

avar2 mapping curve (wght → mapped)

Aa Sphinx of black quartz

Axis values — user-space → avar2-mapped design-space

wght input400→400 (mapped)

wdth input100→100 (mapped)

opsz input14→14 (mapped)

CSS applied

Move the weight slider: without avar2, weight=700 just makes the font bolder. With avar2, the font designer's piecewise-linear mapping also automatically adjusts width and optical-size to maintain the intended visual harmony — as if all three sliders moved together.

/* CSS: applying variable font axes */
.text {
  font-family: 'MyVariableFont', sans-serif;
  /* User-space values — avar2 remaps internally */
  font-variation-settings:
    'wght' 700,
    'wdth' 100,
    'opsz' 18;
  /* The browser sends user-space values to the font shaper;
     avar2 in the font file remaps them to design-space coords.
     No extra CSS needed — avar2 is transparent to the author. */
}

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

see also

implementation reference