CSS font-weight Property

CSS font-weight property sets the thickness of characters of the text present in HTML Element(s).

The syntax to specify a value for font-weight property is

font-weight: value;

The following table gives the possible values that could be given to font-weight property.

value Description Examples
normal No capitalization. font-weight: normal;
bold Converts the first character of each word to uppercase. font-weight: bold;
bolder Converts all character in text to uppercase. font-weight: bolder;
lighter Converts all character in text to lowercase. font-weight: lighter;
100 Thinnest characters. font-weight: 100;
200 font-weight: 200;
300 font-weight: 300;
400 Same as normal. font-weight: 400;
500 font-weight: 500;
600 font-weight: 600;
700 Same as bold. font-weight: 700;
800 font-weight: 800;
900 Thickest Characters. font-weight: 900;
initial Sets text-transform to default value. font-weight: initial;
inherit Inherits text-transform value from its parent element. font-weight: inherit;

The numeric values take effect only if the font support those font weights.

Examples

In the following examples, we transform the text in HTML Element(s), in terms of case, using text-transform property.

Bold Text

In the following example, we set the text in paragraph element to bold, using font-weight property.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph.</p>
</body>
</html>

Different font-weight values

In the following example, we set each of the paragraph elements with each of the possible values for font-weight property.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-weight: normal;
        }
        #p2 {
            font-weight: bold;
        }
        #p3 {
            font-weight: bolder;
        }
        #p4 {
            font-weight: lighter;
        }
        #p5 {
            font-weight: 100;
        }
        #p6 {
            font-weight: 200;
        }
        #p7 {
            font-weight: 300;
        }
        #p8 {
            font-weight: 400;
        }
        #p9 {
            font-weight: 500;
        }
        #p10 {
            font-weight: 600;
        }
        #p11 {
            font-weight: 700;
        }
        #p12 {
            font-weight: 800;
        }
        #p13 {
            font-weight: 900;
        }
    </style>
</head>
<body>
    <p id="p1">This is a paragraph. - normal</p>
    <p id="p2">This is a paragraph. - bold</p>
    <p id="p3">This is a paragraph. - bolder</p>
    <p id="p4">This is a paragraph. - lighter</p>
    <p id="p5">This is a paragraph. - 100</p>
    <p id="p6">This is a paragraph. - 200</p>
    <p id="p7">This is a paragraph. - 300</p>
    <p id="p8">This is a paragraph. - 400</p>
    <p id="p9">This is a paragraph. - 500</p>
    <p id="p10">This is a paragraph. - 600</p>
    <p id="p11">This is a paragraph. - 700</p>
    <p id="p12">This is a paragraph. - 800</p>
    <p id="p13">This is a paragraph. - 900</p>
</body>
</html>

font-weight for some other HTML Elements

In the following example, we set font-weight property for some other HTML Elements like h1, h2, and a.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #e1 {
            font-weight: normal;
        }
        #e2 {
            font-weight: bold;
        }
        #e3 {
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <h1 id="e1">Heading 1</h1>
    <h2 id="e2">Heading 2</h2>
    <a id="e3" href="#">A link</a>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about font-weight property, and how to use this property for HTML Elements, with examples.