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. Google Webfont Open Sans supports light weight. [see Google Webfont Tutorial]

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

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon