CSS: Font Weight, Bold

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.

syntaxmeaning
font-weight:normalnormal. Same as 400
font-weight:boldbold. Same as 700
font-weight:bolder100 bolder than parent
font-weight:lighter100 lighter than parent
font-weight:integer400 = normal, 700 = bold
syntaxmeaning
font-weight:initialbrowser default
font-weight:inheritinherit from parent

Thanks to Federico Totti, A1Den Liu for help.

Font Topic

  1. Meaning of Font Size and Em Height
  2. CSS: What font-size is xx-large, x-large, small?
  3. CSS: Font Weight, Bold
  4. Standard Web Fonts
  5. Google Webfont Tutorial
  6. CSS: Text Decoration: Underline, Overline, Line-Through
  7. CSS: Text Shadow
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

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