The font-weight property sets how light or bold text looks. The weights you can see depend on the active font-family.
The initial value is normal (same as 400). The property is inherited and applies to all elements and text, including ::first-letter and ::first-line. It is also part of the font shorthand.
Not deprecated and not experimental. Keywords and classic numeric weights are Baseline Widely available. Fine-grain numbers from 1 to 1000 are mainly useful with variable fonts.
font-weight: normal | bold | 100–900 | lighter | bolder | initial | inherit;normal equals 400. bold equals 700. Relative keywords step from the parent weight.
| Value | Description | Try it |
|---|---|---|
normal | Regular weight. Same as 400. Initial value | Try it |
bold | Bold weight. Same as 700 | Try it |
100–900 | Numeric weights. Higher numbers are heavier | Try it |
bolder | One relative step heavier than the parent | Try it |
lighter | One relative step lighter than the parent | Try it |
initial | Resets to normal | Try it |
inherit | Takes the parent’s font-weight | Try it |
Common names map roughly as 100 Thin, 400 Regular, 700 Bold, and 900 Black.
font-weightPick a keyword or number, then confirm the font includes that face.
font-weight to bold, normal, or a number such as 600.font-family that ships the weight you request when exact results matter.bolder / lighter only when the child should step from the parent’s weight.| Piece | Required? | Role |
|---|---|---|
| Weight value | Yes | Keyword or number that sets boldness |
| Font faces | For exact looks | Missing faces fall back to the closest available weight |
| Contrast | Best practice | Very thin weights can be hard to read |
Only font-weight changes. Compare the same sentence at different weights.
Each snippet focuses on font-weight only. Use Try It Yourself for a live editor.
Make a paragraph bold with the classic keyword.
<style>
p {
font-weight: bold;
}
</style>
<p>Css Font Weight Sample</p>font-weight: bold asks for a heavy face.bold is the same idea as 700.normal.Use a number when you want an explicit weight such as light text.
<style>
p {
font-weight: 300;
}
</style>
<p>Css Font Weight Sample</p>300 is commonly called Light.700.400 / 600 / 700 easy to document.Make a child one step heavier than its parent.
<style>
div {
font-weight: normal;
}
strong {
font-weight: bolder;
}
</style>
<div>Normal text with <strong>bolder emphasis</strong></div>div starts at normal (400).bolder on the child moves to the next relative heavy step, usually 700.bolder would climb toward 900.700 when you need the same boldness everywhere.If the weight looks wrong, check the font faces first.
If you ask for 500 and the family only has 400 and 700, the browser picks the closest available face. The computed value still stays what you wrote.
100 and 200 can be difficult for people with low vision, especially with low contrast. Prefer at least regular weight for body copy.
bolder and lighter are relativeThey step from the parent using a simplified scale (about 100 / 400 / 700 / 900). Nested relative weights can climb or drop faster than you expect.
font shorthand can overwrite weightWriting font after font-weight resets weight unless you include it in the shorthand.
Values between classic hundreds, or the full 1–1000 range, shine with variable fonts that expose a wght axis. Static fonts still snap to available faces.
font-weight is a browser CSS property for typography. Node.js, Deno, and Bun do not apply it.
Supported in all modern browsers and Internet Explorer. Keywords and numeric weights are long-established.
Bottom line: Safe everywhere for normal, bold, and classic numeric weights. Fine-grain variable-font weights need modern browsers and a matching font file.
normal = 400, bold = 700.normal.One line: font-weight chooses the boldness of the text; the font family decides which faces you can actually see.
Set spacing between flex or grid items.
8 people found this page helpful