CSS font-weight Property Tutorial

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

CSS font-weight property

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:

CSS font-weight property

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”.

Facebook
Twitter
Pinterest
LinkedIn

Top Technologies