Web development

CSS font-weight Property

The CSS font-weight property settles how thick or thin characters in the text are displayed.



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

normal (default) – specifies normal characters.

bold – specifies thick characters.

bolder – specifies thicker characters.

lighter – specifies lighter characters.

100, 200, 300, 400, 500, 600, 700, 800, 900 – specifies from thin to thick characters (400 is the same as normal, and 700 is the same as bold).


<!DOCTYPE html>
.normal {
  font-weight: normal;

.bold {
  font-weight: bold;

.number {
  font-weight: 900;


<p class="normal">This is a paragraph.</p>
<p class="bold">This is a paragraph.</p>
<p class="number">This is a paragraph.</p>



This is a paragraph.

This is a paragraph.

This is a paragraph.

Enjoy coding!

Read also:

CSS font-style Property

CSS font-stretch Property

CSS font-family Property