CSS - Font Weight

First Page
Next Page

CSS Font Weight

If you have ever done any wordprocessing using e.g. Word you definitely know of the opportunity to use bold, italics and underlined text.

When writing CSS, these characteristics are spread over several properties and this is why I have grouped them together into a single chapter.

CSS Font Weight Definition

The CSS font-weight property defines whether the font weight(i.e thickness of the font).

The Visual result of each numeric value of font-weight, must be atleast as light as the next lowest number an atleast as heavy as the next highest number.

Syntax

<style>
Element{font-weight:  normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
                      500 | 600 | 700 | 800 | 900;}
</style>

CSS font-weight property

Example

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

p.light {
    font-weight: lighter;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}
</style>
</head>
<body>
<h1>The font-weight Property</h1>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>

Result

The font-weight Property

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

Property Values

For Example
Value Description
normal Defines normal characters. This is default
bold Defines thick characters
bolder Makes text bolder.
lighter Makes the text lines thin.
100 – 900 Sets the boldness of the font. The default is 400, and bold is 700.
First Page
Next Page