{font-weight} Property | CSS: Presentation Layer

Standards Based Development

font-weight property specifies the weight or boldness of a font.

Note: some fonts are not available in all weights, instead, they're only available in font-weight:normal or font-weight:bold.

font-weight Values
ValueDescription
font-weight: normal

Normal weight, same as font-weight:400

font-weight: bold

Bold weight, same as font-weight:700

font-weight: bolder

One weight darker than the parent element (among the available font weights)

font-weight: lighter

One weight lighter than the parent element (among the available font weights)

font-weight: 100

Specifies a weight of Ultra Light, Extra Light

font-weight: 200

Specifies a weight of Light, Thin

font-weight: 300

Specifies a weight of Book

font-weight: 400

Specifies a weight of Normal, Regular

font-weight: 500

Specifies a weight of Medium

font-weight: 600

Specifies a weight of Demi Bold, Semi Bold

font-weight: 700

Specifies a weight of Bold

font-weight: 800

Specifies a weight of Black, Extra Bold

font-weight: 900

Specifies a weight of Ultra Bold, Fat, Heavy

font-weight: inherit

Inherits the weight of parent element

Numeric font-weight Value

Numeric font-weight values provide the full spectrum of weights that can be used. Most fonts do not come with the full spectrum. If a font-weight has a declared numeric value and that weight is unavailable, user agents will fallback to the closest available lighter or darker weight, using normal and bold values; 100-500 default to normal and bold is the default for 600-900.

font-weight