CSS: Font Weight

By Xah Lee. Date: . Last updated: .

Here's different values for the CSS property font-weight.

  1. font-weight:bold
  2. font-weight:normal
  3. font-weight:lighter
  4. font-weight:200
  5. font-weight:400
  6. font-weight:700
  7. font-weight:900

Values other than bold or normal may not have any effect. It requires a font family that supports light version.

font-weight:normal
Same as font-weight:400
font-weight:bold
Same as font-weight:700
font-weight:bolder
100 bolder than parent
font-weight:lighter
100 lighter than parent
font-weight:integer
400 = normal, 700 = bold

Thanks to Federico Totti, A1Den Liu for help.

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc