From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

The weight of a font is how dark or light it appears. This also refers to the boldness of a font face.

Font Weights

The default weight for a font is "normal". If you are styling a document, and you're not sure what weight your current face is, you can set the font weight to normal:

font-weight: normal;

The most common font weight to use is "bold". This is a standard font weight determined by the user agent. It is the weight that is generally assigned when you use the <b> or the <strong> tags.

It's recommended that you use CSS and the font-weight property rather than the <b> tag:

font-weight: bold;

Advanced Font Weight

CSS provides more than just two font weights normal and bold. You can also specify:

• 100, 200, 300, 400, 500, 600, 700, 800, 900
  These numbers correspond to different relative weights. 400 is considered normal weight, 700 is "bold".

  font-weight: 200;

• lighter
  The user agent moves down the numerical weights by 1 step from the parent element. So if the parent element is "normal" the child should be font-weight: 300.

  font-weight:lighter;

• bolder
  The user agent moves up the numerical weights by 1 step from the parent element. So if the parent element is "bold" the child should be font-weight: 800.

  font-weight: bolder;

The Advantages of Font Weights

Using font weights rather than the visual style "bold" makes your Web pages more accessible. For example, how would a screen reader render text that is styled as "bold"? But since there is a numerical scale on the weight of the text, screen readers can make gradual changes in the way the text is spoken.

Most visual user agents don't currently make a distinction between the different numerical weights. If you define an element as font-weight: 600, some browsers will display it as "bold" and others as "normal". So for visual designs it's better to stick with the named terms ("bold" and "normal"). But some type faces may have differences for the different weights, and the numerical scale can accomodate that.