v148 · Fonts · demo

Linked Axes

Compare what naively moving individual axes produces vs what a font designer using avar2 intends — side by side, for the same conceptual design intent.

Independent axes (naive)
Typography
avar2-coordinated (intended)
Typography
/* avar2 lets the font auto-adjust linked axes.
   With avar2-enabled fonts, setting one axis
   can drive other axes in coordinated ways:    */

/* Naive: only weight changed */
font-variation-settings: 'wght' 900;

/* avar2-intended: weight + width + opsz all shift
   together for the best "heavy display" rendering */
font-variation-settings: 'wght' 900, 'wdth' 85, 'opsz' 48;

see also

implementation reference

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