CSS2 » Properties » font-weight

Version: Level 1

Compability: IE4+  N4+

Syntax:
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
100 ... 900
The 100,200,300,400,500,600,700,800,900 values provide nine steps in range of boldness. The larger the number, the greater the boldness. This is a relative numeric scale where 400 usually equates to normal and 700 to bold. The amount of change caused by each step will be determined by the individual computer/browser.
lighter
The lighter value makes the character appear thinner in size and, hence, decreases the boldness. The amount of change will be determined by the individual computer/browser.
bolder
The bolder value makes the character appear thicker in size and, hence, increases the boldness. The amount of change will be determined by the individual computer/browser.
bold
The bold value corresponds to the <B> tag in HTML. On the numeric scale running from 100 to 900, bold is usually considered to be 700.
normal
The normal value is the default. On the numeric scale running from 100 to 900, normal is usually considered to be 400. By declaring normal, you can ensure that any previous declaration will not effect a selected text.

The font-weight property allows you to choose how thick or thin the characters of a text appear. This property is inherited.

This is referred to as boldness. Boldness is a relative, not fixed, quantity which is determined by your individual computer and/or browser.

Many browsers only recognize normal and bold font weight.

Examples

Code:
p { font-weight: normal; }
p { font-weight: bold; }
p { font-weight: bolder; }
p { font-weight: lighter; }
p { font-weight: 600; }
Language(s): CSS2
Code:
<span style="font-weight: 100;">100 </span>
<span style="font-weight: 200;">200 </span>
<span style="font-weight: 300;">300 </span>
<span style="font-weight: 400;">400 </span>
<span style="font-weight: 500;">500 </span>
<span style="font-weight: 600;">600 </span>
<span style="font-weight: 700;">700 </span>
<span style="font-weight: 800;">800 </span>
<span style="font-weight: 900;">900 </span>
Output:
lighter
normal
bold
bolder
100
200
300
400
500
600
700
800
900
Language(s): CSS2

See Also: