CSS font-weight: bold or slightly bold text with 2 Demos

The font weight property of CSS

In your web pages, you need to make specific parts stand out more over the others. The headings should be more prominent along with the certain text within the paragraphs as well.

Font weight example to make text bold

In order to make the text bold or normal, CSS provides the font-weight property. A value between thin and thick or normal to bold can also be given in the CSS font-weight property.

Although, the <b> tag can also be used to make the text bold in HTML elements like paragraphs. However, you should set it by using the font-weight CSS property (which is the preferred method these days).

Syntax of CSS font weight

Following is the general syntax to use the font-weight property:

font-weight: value;

Where the value can be:

  • normal
  • bold
  • a numeric value between normal to bold (see the second example below)

An example of font with bold example

The example sets the font-weight of h1 as bold, h2 to use lighter and makes it normal for the paragraph by using the font-weight property. See the demo by clicking the link or image:

CSS font-weight

Experience this example online

You can see, the h1 is set to be shown as bold, h2 is lighter while the paragraph is normal. You can apply the bold font to the paragraph or div tag, as well.

A font weight example by number

A number can also be given in the font-weight property to specify from normal to bold range. A value of 400 means its normal and 700 means bold text. That means, to make text bold, use the higher value.

The example below demonstrates using a numeric value for headings and paragraph.

CSS bold text

Experience this example online

You can see, the h1 is given 900 in CSS font-weight property that makes text bold while the 700 value for the h2 is lesser bold.


Further Reading: CSS font family | CSS font

Was this article helpful?

Related Articles

Leave A Comment?