Font weight
Font weight is how thick a typeface’s strokes are, written in CSS as numbers from 100 (thin) to 900 (black). Drag through the whole range on a variable font.
Font weight names and numbers
| Value | Common names | Typical use |
|---|---|---|
| 100 | Thin / Hairline | Large display only |
| 200 | Extra Light / Ultra Light | Large display |
| 300 | Light | Headlines, large intro text |
| 400 | Regular / Normal | Body text (CSS keyword normal) |
| 500 | Medium | UI labels, emphasis on screens |
| 600 | Semi Bold / Demi Bold | Subheadings, buttons |
| 700 | Bold | Headings, strong emphasis (CSS keyword bold) |
| 800 | Extra Bold / Ultra Bold | Display headlines |
| 900 | Black / Heavy | Posters, impact headlines |
The numeric scale comes from the CSS Fonts specification (W3C), which borrowed it from the naming used by type foundries. Names aren’t standardised: one family’s “Book” may be another’s “Regular”, and “Heavy” can mean 800 or 900.
How browsers choose a weight
If the exact weight isn’t available, the browser follows a fallback rule: for requested weights of 400–500 it checks nearby weights first, below 400 it looks lighter, and above 500 it looks heavier. With only Regular and Bold loaded, 600 renders as Bold and 300 as Regular.
Weight as an identification clue
When identifying a font, compare samples at the same weight. A heavy weight exaggerates small counters and tight apertures, so a bold geometric can look like a grotesque. The identification guide explains which letters to check.
Questions people ask
What font weight is bold?
In CSS, bold equals 700 and normal equals 400. The keywords bolder and lighter are relative to the parent element’s weight.
What happens if a font doesn’t have the weight I set?
The browser picks the nearest available weight using the CSS font matching rules. If no bold exists at all, it may synthesise a “faux bold” by thickening the strokes, which usually looks worse. Prevent it with font-synthesis: none.
What is a variable font?
A single font file that contains a continuous range of styles along axes such as weight (wght), width (wdth) or optical size (opsz). You can set any weight within its range, like font-weight: 437, instead of only the nine named steps.
What font weight is best for body text?
Usually 400. On dark backgrounds or high-density screens, some designers drop to 300–350 because light text on dark looks heavier; for small UI text, 500 can improve legibility.