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.

valueDescriptionExamples
normalNo capitalization.font-weight: normal;
boldConverts the first character of each word to uppercase.font-weight: bold;
bolderConverts all character in text to uppercase.font-weight: bolder;
lighterConverts all character in text to lowercase.font-weight: lighter;
100Thinnest characters.font-weight: 100;
200font-weight: 200;
300font-weight: 300;
400Same as normal.font-weight: 400;
500font-weight: 500;
600font-weight: 600;
700Same as bold.font-weight: 700;
800font-weight: 800;
900Thickest Characters.font-weight: 900;
initialSets text-transform to default value.font-weight: initial;
inheritInherits 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

</>
Copy
<!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

</>
Copy
<!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

</>
Copy
<!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.