typography
font-weight
Sets the thickness of glyphs. Numeric weights from 100 to 900 map to Thin through Black; variable fonts accept any integer up to 1000.
font-weight: normal | bold | bolder | lighter | 1-1000Common values
| Value | Effect |
|---|---|
| 400 | Regular; equivalent to normal |
| 500 | Medium; slightly heavier than normal |
| 600 | Semi-bold, common for UI headings |
| 700 | Bold; equivalent to bold keyword |
| 900 | Black; heaviest common weight |
Examples
body { font-weight: 400; }Regular body text
h2 { font-weight: 700; }Bold heading
.display { font-weight: 900; }Extra-heavy hero text
Gotcha
Weights only render if the font file includes that instance; static fonts fall back to the nearest available weight.
Related properties
font-family
Sets a prioritized list of typefaces to render text with. The browser walks the list until it finds one that is available, so always end with a generic fallback.
font-size
Sets the size of rendered text. Modern designs use rem for accessibility and clamp() for fluid typography that scales with the viewport.
line-height
Sets the vertical distance between lines of text. Unitless values are preferred because they scale with the element's own font size.
text-decoration
Shorthand for text-decoration-line, style, color, and thickness. Used to add or remove underlines, overlines, and strike-throughs on text.
text-align
Sets the horizontal alignment of inline content inside a block. start and end respect the writing direction, which is preferred for internationalized sites.