font-weight
The weight (boldness) of the font.
Syntax
font-weight: value;Values
| Parameter | Type | Description |
|---|---|---|
| 400 | number | Normal text, the same as `normal`. |
| 700 | number | Bold, the same as `bold`. |
| 100–900 | number | Any weight in steps of 100 — if the font has it. |
| bold | normal | keyword | Keywords for 700 and 400. |
Examples
Different weights:
<p style="font-weight: 300;">300 — light</p>
<p style="font-weight: 400;">400 — normal</p>
<p style="font-weight: 700;">700 — bold</p>
<p style="font-weight: 900;">900 — black</p>Notes
If the font has no file for the requested weight, the browser picks the nearest one or makes the text bold artificially. Many system fonts have only 400 and 700, so the four lines above may look like two.
See also
- font — A shorthand that sets the style, weight, size, line height and family of the font in one line.
- font-style — Italic or normal text.
- <strong> — Important text; shown in bold by default.
Related recipes
In the tutorial
- Text and fonts — Font family, size, weight, italics, line height, alignment and text decoration, plus loading your own font.