CSS font-weight Property
The font-weight property sets the weight of a font - weight in this instance refering to relative thickness.
Possible Values
- normal, bold, bolder, lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit - the value is inherited from the parent element.
The weight can be set using one of the keywords normal, bold, bolder and lighter or by using one of the numerical values 100, 200, 300, 400, 500, 600, 700 , 800 or 900.
As you can see there are many values available but the trouble is that browsers only show two different weights for fonts - normal and bold. The list below has been compiled setting the font-weight using all of it's possible values but as you can see it displays as either normal or bold, normal, lighter, 100, 200, 300, 400 and 500 showing normal text and bold, bolder, 600, 700, 800, and 900 displaying as bold text.
- normal - Normal sized text
- bold - Bold text
- bolder - Bolder text
- lighter - Lighter text
- 100 - 100 sized text
- 200 - 200 sized text
- 300 - 300 sized text
- 400 - 400 sized text
- 500 - 500 sized text
- 600 - 600 sized text
- 700 - 700 sized text
- 800 - 800 sized text
- 900 - 900 sized text