What is font weight?

Where the numbers come from

Type families once shipped as a handful of named styles, and names such as book, demi and heavy meant different things from one foundry to the next. The OpenType font format fixed that with a numeric weight class from 100 to 900, labelling 100 as Thin, 400 as Normal or Regular, 700 as Bold and 900 as Black. CSS adopted the same numbers, so the keyword normal equals 400 and bold equals 700. Variable fonts go further: the weight is a continuous axis, and CSS Fonts Level 4 allows any value from 1 to 1000 when the font supports it, so a designer can pick 650 if 600 is too light and 700 too heavy.

What happens when a weight is missing

A family does not have to include every step, and many ship only regular and bold. When a page asks for a weight the family lacks, the browser follows a fallback rule and uses the nearest available weight, and when no bold exists at all it may draw a synthetic one by thickening the regular letters. Synthetic bold looks clumsy, with filled in counters and uneven strokes. That is why choosing a family with real weights matters more than the number you type, and why a font that looks right in a mockup can look different once the actual files are loaded.

Using weight for hierarchy

Weight separates levels of information without taking up space. A headline in 800, a subheading in 600 and details in 400 give three clear levels at similar sizes, which is useful on a small social canvas where there is no room for large type. The contrast has to be big enough to see: the difference between 400 and 500 is invisible to most readers at a glance, while 400 against 700 is obvious. Butterick's rule for emphasis applies here too: use bold as little as possible, and treat bold and italic as alternatives rather than stacking them.

Common mistakes

Setting everything in bold is the most frequent problem, because it removes the one tool that could have pointed at the offer. Light weights are the next trap: 300 looks elegant on a bright screen at large sizes but thin strokes fade on paper, especially in small print and in light colours on dark backgrounds. Mixing too many weights also muddies the page, since four or five levels are more than a flyer needs. Finally, bolding a word inside a sentence of capitals rarely reads as emphasis, because capitals already look heavy.

Weight, colour and background

Weight and colour interact more than most people expect. Light text on a dark background looks bolder than the same weight in dark text on white, because the bright strokes spread visually into the dark around them, while thin light strokes on a busy photograph can disappear altogether. Coloured text also loses apparent weight when the colour is close in brightness to the background. The practical rule is to step up one weight for small reversed text, such as white details on a dark band, and to avoid light weights over images entirely. When text sits on a photograph, a heavier weight with a subtle shadow or a solid panel behind it will usually hold up better than a thin line of type that looked elegant on a plain mockup.

Weight in the flyer builder

Every text block in the flyer inspector has a Weight control next to Size, Font, Colour, Align and Drop shadow. The slide editor, for comparison, offers seven weights from 300 to 900. Which weights look distinct depends on the font chosen, since each of the 27 families in the catalogue has its own range, so check the result on the canvas rather than trusting the number. A practical setup for a flyer is one heavy weight for the headline, one middle weight for prices or subheadings and the regular weight for everything a reader has to read carefully.

Questions people ask