CSS: Font Weight

By Xah Lee. Date: . Last updated: .

Here's different values for the CSS property font-weight as shown in your browser.

font-weight:bold

font-weight:normal

font-weight:lighter


font-weight:200

font-weight:400

font-weight:700

font-weight:900

Note: 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.

CSS Font

  1. font-family
  2. Standard Web Fonts
  3. Google Webfont
  4. font-size
  5. Meaning of Font Size
  6. Font Weight
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog