Font-weight

CSS font-weight property is used to set the boldness of the font. But we must remind you that some fonts don't let us set all weights; they are only available on normal or bold.

Common fonts like Arial, Helvetica, Georgia, etc. do not have weights other than 400 and 700.

CSS Syntax

font-weight: normal | bold | bolder | lighter | number | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
    font-weight: normal;
}

p.lighter {
    font-weight: lighter;
}

p.bold{
    font-weight: bold;
}

p.bolder {
    font-weight: bolder;
}

p.fweight {
    font-weight: 600;
}
</style>
</head>
<body>

<p class="normal">We used normal weight here.</p>
<p class="lighter">This is a lighter weight.</p>
<p class="bold">We used bold weight here.</p>
<p class="bolder">We used a bolder text here.</p>
<p class="fweight">We set font-weight 600 here.</p>

</body>
</html>

Here the result is:


Property Values

Value Descriptions
normal It means that text characters will be normal. It is the default value of this property.
bold It means thick characters.
bolder It means thicker characters in the text.
100
200
300
400
500
600
700
800
900
We can use these values to set text characters from thin to bold. 400 is same with normal, while 700 makes the characters same with bold.
bolder It means thicker characters in the text.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.