'/%3e%3c/svg%3e){kind=small}
Using font-weight in CSS
When a matching font file is declared with a font face declaration, the browser uses it for an element with the same font-weight.
.body { font-weight: 400; }
.button { font-weight: 600; }
.heading { font-weight: 700; }CSS guide
Font weight: from Thin to Black
A practical table of font-weight values, style names, and recommendations for static and variable fonts.
Font weight table
The CSS number specifies the desired weight. The names are conventional, but a particular family may use different names or provide only some weights.
| CSS weight | Common name | Other names | Example |
|---|---|---|---|
| 100 | Thin | Hairline | Typography gives every idea a voice |
| 200 | Extra Light | Ultra Light | Typography gives every idea a voice |
| 300 | Light | — | Typography gives every idea a voice |
| 400 | Regular | Normal, Book | Typography gives every idea a voice |
| 500 | Medium | — | Typography gives every idea a voice |
| 600 | Semi Bold | Demi Bold | Typography gives every idea a voice |
| 700 | Bold | — | Typography gives every idea a voice |
| 800 | Extra Bold | Ultra Bold | Typography gives every idea a voice |
| 900 | Black | Heavy | Typography gives every idea a voice |
| 950 | Extra Black | Ultra Black | Typography gives every idea a voice |
Weights in a variable font
A variable font can contain a continuous range, such as 100 through 900. Declare that range with two values in a font face declaration, then use intermediate values where needed.
@font-face {
font-family: 'Example Variable';
src: url('/fonts/example.woff2') format('woff2');
font-weight: 100 900;
}Real weight or synthetic bold?
When a requested style is missing, the browser may artificially embolden the nearest available face. This often looks worse than a face drawn by the type designer. Declare the weights you need explicitly and use font-synthesis: none when appropriate.
font-synthesis: none;Which weights should a website use?
- — 400 — body copy
- — 500 or 600 — interface elements and moderate emphasis
- — 700 — headings and strong emphasis
Do not load every style by default. Each static file adds to the page resources. Start with 400 and 700, then add other weights only when the design actually uses them.