CSS font-weight
The font-weight property sets how thick or thin text is drawn, from hairline 100 to heavy 900. Pick a value below to see it live, or type your own.
LIVEPreview
Typography makes the web readable.
CSSCode
The font-weight property sets how thick or thin text is drawn, from hairline 100 to heavy 900. Pick a value below to see it live, or type your own.
Typography makes the web readable.
font-weight: normal | bold | lighter | bolder | <number 1–1000>;
| Value | Common name |
|---|---|
100 | Thin (Hairline) |
200 | Extra Light |
300 | Light |
400 = normal | Regular |
500 | Medium |
600 | Semi Bold |
700 = bold | Bold |
800 | Extra Bold |
900 | Black (Heavy) |
lighter and bolder are relative: they make text one step thinner or thicker than its parent element.
A browser can only show weights the font actually has. If a font only ships Regular and Bold, then 500 looks like Regular and 800 looks like Bold. The browser may also fake bold by thickening the letters, which looks rough. To get every weight, load them explicitly:
/* Google Fonts: load weights 300, 400 and 700 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap");
Variable fonts contain every weight in one file, so any number from 1 to 1000 works, not just multiples of 100. The playground above uses Inter as a variable font, so all nine weights render accurately:
@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");
h1 { font-weight: 850; }
None. bold is exactly the same as 700, and normal is the same as 400.
The font you are using probably does not include a Semi Bold file. Load the 600 weight from your font provider or use a variable font.
Yes, any number from 1 to 1000 is valid, but only variable fonts can render in-between values like 450.