font-weight

The font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css font-weight for further information.

Usage context

Keyword meanings

• bold is equivalent to 700
• normal is equivalent to 400
• bolder and lighter will instruct the browser to use a thicker or thinner font-weight (respectively) compared to the current element's parent. Child elements will inherit the resulting calculated font weight.

Cautions

Many fonts only have 400 and 700 weights available. Available weights may vary font-to-font.

Example

css

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

html

<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

Elements

The following elements can use the font-weight attribute

• Text content elements »

Browser compatibilityUpdate compatibility data on GitHub

See also

• css font-weight