v148 · Fonts · CSS

Open Font Format avar2 text shaping and glyph rendering

Version 2 of the OpenType avar table lets font designers link variation axes together — one slider controls many, unlocking richer variable-font design spaces in Chrome 148.

concepts

  1. Axis Explorer

    Drag the variation axes of a variable font and observe how avar2-linked axes produce coordinated changes across weight, width, and optical size — changes a simple per-axis slider can't replicate.

  2. Linked Axes

    Side-by-side comparison of independent axis control vs avar2-mapped output. Shows why a single "expressiveness" or "grade" meta-axis can produce superior typography to manual multi-axis tuning.

  3. avar2 Specimen

    Full type specimen with six variable-font axis sliders (weight, width, optical size, grade, slant, and a custom axis). Use the presets to snap to editorial styles; toggle avar2 linking on/off to see the difference coordinated axes make.

  4. Variable Font Lab

    Comprehensive variable font playground using the site's own Lora typeface. Multi-axis sliders drive live avar2 coordinate mapping — see how user-space values are remapped to internal design-space values. Includes presets, a 10-character comparison grid, render-quality comparison (subpixel vs grayscale vs none), and CSS @font-face export.

  5. Axis Remapping Visualizer

    Canvas chart of the avar2 piecewise-linear mapping curve showing how user-space axis values are converted to design-space values. Three axis sliders (wght, wdth, opsz) demonstrate linked-axis nudging — heavy weight auto-narrows width and grows optical size. A red dot tracks the mapped value on the curve.

why it shipped

OpenType variable fonts introduced in 2016 let a single font file carry an entire family across registered axes (weight, width, slant, optical size) and custom axes. But each axis was independently interpolated — moving the weight axis had no influence on the width axis, for example. The avar2 table changes this by defining piecewise-linear mappings between axes: when axis A reaches a certain value, axis B is automatically nudged along a curve. Font designers can create high-level "meta-axes" (like a "Display" axis that simultaneously shifts weight heavier, width narrower, and optical size larger) that are far more useful to developers than raw per-axis sliders. Safari and Firefox already supported avar2; Chrome 148 closes the gap.

references

implementation reference

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