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.

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.


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.


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.


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.



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