CSS Typography
Font Weight II

The font-weight property can also be assigned a number value to style text on a numeric scale ranging from 100 to 900. Valid values are multiples of 100 within this range such as 200 or 500.

When using numeric weights, there are a number of default font weights that we can use:

  1. 400 is the default font-weight of most text.
  2. 700 signifies a bold font-weight.
  3. 300 signifies a light font-weight.

Let’s take a look at an example of how numeric fonts are used.

header { font-weight: 800; } footer { font-weight: 200; }

Here, the header would appear as a deep bold, while the footer would appear rather light.

It’s important to note that not all fonts can be assigned a numeric font-weight. You can look up the font you are using to see which font-weight values are available.



The header section of the webpage is where the navigation menu is. It lives at the very top of the page.

In style.css, in the header section, set the font weight of the element with class header to 900. You’ll notice the list elements in the navigation thicken.

Folder Icon

Take this course for free

Already have an account?