vocab.design

typography

Font weight

also called weight, boldness, wght axis (opentype), type weight

How thick a typeface's strokes are, named in steps from thin to black and numbered from 100 to 900 on the web.

Weight is stroke thickness, and a family ships it as a set of separately drawn faces rather than as one drawing thickened. Bold is not Regular with more ink around it: counters are opened back up, joins are cut away so they do not fill in, and the letters are widened so the heavier strokes still have air. That is why a real Bold looks calm at text sizes and a browser’s synthetic bold, which does smear the outline, looks muddy.

The numbers run 100 to 900 in hundreds, a scale CSS inherited from OpenType’s own weight class, with 400 as Regular and 700 as Bold. The names attached to the steps (Thin, Extra Light, Light, Regular, Medium, Semi Bold, Bold, Extra Bold, Black) are conventions rather than measurements, so one foundry’s Medium can be heavier than another’s Semi Bold, and a family with only two faces will map both to 400 and 700. Ask for a weight the family does not have and the browser picks the nearest one by a defined rule, or invents it: font-weight: 600 on a two-weight family usually renders as 700, and asking for 300 on a family with no Light can produce a synthesized face on some platforms and plain Regular on others.

A variable font changes the arithmetic. Its wght axis is continuous, so 437 is a real value and there is no rounding to a shipped step, and the whole range arrives in one file instead of five. Interfaces mostly still quantize to a small set anyway, because a design system needs a weight to be a decision that can be repeated rather than a number someone nudged.

In interface work, weight is the cheapest way to make hierarchy without changing size. A row label at 600 against a value at 400 separates the two while the line keeps its height and the layout stays put, which is what a type scale cannot do without moving something. The limits are worth knowing: below about 400 on a screen, light weights lose contrast and get thin enough that antialiasing eats them, especially in light text on a dark background, and jumping straight from 400 to 700 in a table reads as shouting where 500 would have been enough.

Which word?

If you wantsay
naming how heavy the strokes arefont weight
your bold looks wrong and blurryfaux bold
picking a named style out of a variable fontnamed instance

Related

See also: Typographic color · Grade

Sources