CSS font-weight

The font-weight property in CSS is used to specify the weight or boldness of the text within an element. It can be set to various values ranging from normal to bold to adjust the thickness of the text.

Here are the possible values for the font-weight property:

normal: Defines normal characters
bold: Defines bold characters
lighter: Defines a lighter weight than the inherited weight
bolder: Defines a bolder weight than the inherited weight

The font-weight property can also be set numerically using values between 100 and 900 where:

100 is the lightest weight
400 is the same as normal
700 is the same as bold
900 is the boldest weight

Examples

Result:

This is normal text.


<p style="font-weight: normal;">This is normal text.</p>

Result:

This is bold text.


<p style="font-weight: bold;">This is bold text.</p>

Result:

This is lighter text.


<p style="font-weight: lighter;">This is lighter text.</p>

Result:

This is bolder text.


<p style="font-weight: bolder;">This is bolder text.</p>

Result:

This is text with weight 700.


<p style="font-weight: 700;">This is text with weight 700.</p>