liveBook · Manning

Variation axis

As explained in CSS in Depth, Second Edition

A variation axis is a font-defined dimension specifying an allowable range for a particular characteristic of a variable font.

A variation axis is a font-defined range for changing one characteristic of a variable font. The weight axis can transform light through bold, while an axis can also provide a binary normal-or-italic choice. section 12.5.2

Variable-font axes make several weight choices available from one font file:

  • Declare a supported range such as font-weight: 300 800 in @font-face. section 12.5.2
  • Use any value inside the range, including precise weights such as 650 or 467 rather than only multiples of 100. section 12.5.2
  • Address the weight axis directly with the lower-level four-character tag 'wght'. section 12.5.2

How CSS in Depth, Second Edition covers it

How deep it goes
Explains ranges, binary choices, precise values, and four-character axis tags, but does not detail the complete registered-axis mapping.
Examples
Uses an Open Sans @font-face range from 300 to 800 and equivalent 400-weight declarations.
What it assumes
Assumes basic familiarity with CSS font properties and @font-face declarations.
What you can do after
Apply it via CSS to select continuous or binary characteristics from a variable font.
How it connects
Connects variable fonts with @font-face, font weight, font style, and font-variation-setting.
Cover of CSS in Depth, Second Edition
liveBookmanning.com
Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.