In this section, we will learn what the font-weight property is and how to use it in CSS.

Click here to run the example of font-weight property.

CSS font-weight Property Definition and Usage

Sometimes we want to emphasize a paragraph or just a line or even a word among other text content. One way to do this is to use the CSS `font-weight` property.

The CSS `font-weight` as the name of the property suggests, puts a weight on the target text content. Basically, the `font-weight` property controls how thick or thin the appearance of a text can be.

CSS font-weight Property Syntax

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

CSS font-weight Property Value

There are multiple values can be set for this property, but you should know that not all of these values are supported by any type of font!

• bold: the most known value that can be set for this property is ‘bold’ and pretty much every font types support it. Using this value, we can bold a font.
• bolder: This value brings more thickness to the font comparing to the ‘bold’ value.

Note: You should know that not all font types support this value.

• normal: Some of the HTML elements like <h1> by default have the font-weight property set to ‘bold’, but we can change this boldness back to normal using ‘normal’ value.
• lighter: Not all font types support this value, but if they do, the font will be thinner compared to what ‘normal’ value does.
• initial: Using this value which is considered being a global value, the weight of a font will return to its default which in most cases is “normal” and for others (for example, <h1>-<h6> element) it could be “bold”.
• 100-900: we can set numbers as the value for font-weight property as well. These values are: 100, 200, 300, 400, 500, 600, 700, 800 and 900. Basically, higher values mean bolder fonts as a result.

Note: not all font-types support all of these values!

Note: font-weight property inherits its value from its parent if not set explicitly.

Example: bold text in CSS

See the Pen bold text in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS font-weight Property Work?

In the example above, the `font-weight` is set to ‘bold’ for <div> element, which makes all the children inherit this boldness. But we overrode the second child paragraph to have ‘normal’ value for its `font-weight` property.

Example: CSS font weight

See the Pen CSS font weight by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: making text bold in CSS

See the Pen making text bold in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Output:

As the output in the example above shows, this font treats values from 100 to 500 as “normal” and from 600 to 900 as “bold”.