totn CSS

CSS: font-weight property

This CSS tutorial explains how to use the CSS property called font-weight with syntax and examples.

Description

The CSS font-weight property defines the weight or boldness of the font.

Syntax

The syntax for the font-weight CSS property is:

font-weight: value;

Parameters or Arguments

value

The weight or boldness of a font. It can be one of the following:

Value Description
normal Normal font-weight (Normal = 400 font-weight)
p { font-weight: normal; }
bold Bold font-weight (Bold = 700 font-weight)
p { font-weight: bold; }
bolder One font-weight darker than its parent element
p { font-weight: bolder; }
lighter One font-weight lighter than its parent element
p { font-weight: lighter; }
100, 200, 300, 400, 500, 600, 700, 800, 900 Numeric values for font-weight ranging from 100-900,
where 100 is the lightest, 900 is the boldest.
400 = normal, and 700 = bold.
p { font-weight: 400; }
inherit Element will inherit the font-weight from its parent element
p { font-weight: inherit; }

Note

  • Some fonts may only support normal and bold weights.
  • When a numeric font-weight between 600-900 is provided and the exact numeric weight is not available, then the closest available darker font-weight will be used.
  • When a numeric font-weight between 100-500 is provided and the exact numeric weight is not available, then the closest available lighter font-weight will be used.

Browser Compatibility

The CSS font-weight property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the font-weight property below, exploring examples of how to use this property in CSS.

Using Bold

Let's look at a CSS font-weight example where we set the text to bold.

span { font-weight: bold; }

In this CSS font-weight example, we have set the font weight of the text within the <span> tag to bold.

Using Normal

Next, let's look at a CSS font-weight example where we set the text to normal.

p { font-weight: normal; }

In this CSS font-weight example, we have set the font weight of the text within the <p> tag to normal weight.

Using Numeric Value

Let's look at a CSS font-weight example where we set a text to a numeric font-weight.

p { font-weight: 500; }

In this CSS font-weight example, we have set the font weight of the text within the <p> tag to 500 which would use a darker font if one was available.