What is font-weight?
Font-weight is the CSS property that sets how thick or bold text appears. It accepts keywords (normal, which equals 400; bold, which equals 700; lighter; and bolder) or a number from 1 to 1000, where higher numbers render bolder. The weights that actually render depend on the font family in use.
More about the font-weight property
Font-weight is a property in CSS, and you can set it two ways: with a keyword (normal, bold, lighter, or bolder) or with a number from 1 to 1000.
Keyword values
Using the “normal” keyword sets the font-weight to 400. A “bold” font-weight has a value of 700. The two keywords are exact synonyms for those numbers.
“Lighter” and “bolder” are relative to the parent element, moving one step lighter or heavier. Only four weights count in that calculation: 100, 400, 700, and 900. So a parent at 400 with “lighter” computes to 100, not 300, and a parent at 500 with “bolder” computes to 700.
Setting font-weight in a stylesheet
To set font-weight, add it to any CSS rule: body { font-weight: 400; } keeps paragraph text at regular weight, and h1 { font-weight: 700; } renders headings bold. Font-weight is inherited, so a value set on body cascades to every element inside it unless a more specific rule overrides it.
Numeric values and weight names
Numeric font-weight values run from 1 to 1000, with higher numbers representing bolder text. Values divisible by 100 correspond to the common weight names:
- 100: Thin (Hairline)
- 200: Extra Light
- 300: Light
- 400: Normal (Regular)
- 500: Medium
- 600: Semi Bold
- 700: Bold
- 800: Extra Bold
- 900: Black (Heavy)
Static fonts ship only the weights the type designer built, usually at these multiples of 100, so an in-between value like 550 snaps to the nearest weight the font provides. Variable fonts support a continuous range of weights, which is when fine-grained values like 425 or 550 actually render as distinct weights.
Missing weights and fake bold
If the font-family you load doesn’t include the weight you request, the browser substitutes the nearest weight it has. MDN’s font-weight reference documents the exact fallback order from the CSS Fonts specification; the short version is that a request above 500 tries heavier weights first, then lighter ones. When no bold face exists at all, browsers can synthesize a fake bold, a behavior the font-synthesis-weight property controls.
The practical consequence: font-weight: 600 can render identically to 400 or 700 when the font doesn’t ship a Semi Bold face. Check which weights your font actually includes, and with web fonts, load every weight you use.
Why font-weight matters
Weight is the main tool for visual hierarchy. Bold headings, labels, and buttons stand out from regular body text and make a page easy to scan. Very light weights like 100 or 200 get hard to read at small sizes, so save them for large display type.
Weight also affects speed. Every weight of a static web font is a separate file your visitors download, so trimming unused weights makes pages load faster; our guide to the performance pitfalls of web fonts shows how. When you’re done here, the sibling properties font-style and font-size are the next terms to know.
Frequently Asked Questions
- No. font-weight: bold only changes how text looks. The strong element marks its contents as important, a signal screen readers and parsers can pick up. Browsers render both in bold type by default, so use strong for meaning and CSS for appearance.
- Normal, which equals 400. Text renders at that weight when no CSS rule sets another one. Headings are the big exception: browser default stylesheets set h1 through h6 to bold, so heading text looks heavy at 700 before you write any CSS.
- No. Font-weight sets how thick or bold characters render, from thin to black. Font-style sets whether text is upright or italic. They’re independent properties, so a heading can be bold, italic, both, or neither, depending on how you combine them.
Custom Website Design
Get a one-of-a-kind, mobile-friendly website that makes your brand truly shine. Share your vision with us and we'll take it from there.
Custom Web Design