Weight (wght)

The wght axis controls font weight in a variable font, ranging from 100 (thin) to 900 (black). In CSS, use font-weight: 500 with a variable font to get any intermediate value. This gives you continuous weight control rather than fixed steps. Drag the weight slider in the variable font tester to feel the full range of the weight axis on real text.

The common mistake with most typographic terms is applying them without considering how they interact with other settings. Type is a system: changing kerning affects tracking, changing size affects leading, changing measure affects line-height. Test changes in context rather than in isolation.

The wght axis maps roughly 100 to 900 and replaces the old nine static files with a continuous range. That changes what is possible in a design: instead of choosing between 400 and 500, you can tune 460 to fit a specific row height, or step through fourteen weights to find the one that balances a heading. Consider what happens when you rely on synthesized weights: the browser can fake a bold that does not exist by thickening the outlines, and the result looks wrong next to the real drawing.

Keep the mapping simple to maintain. Name your tokens by role rather than number: body, label, heading, display, each bound to one weight. If the family is static, you are limited to the shipped weights and should pick from those. The font detail page lists the exact weights a family ships, and the weight tester renders one string across every step so you can judge each weight against real copy.