Cascading Style Sheets: The Definitive Guide

Font Weights

font-weight

Values

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Initial value

normal

Inherited

yes

Applies to

all elements

Even though you may not realize it, you’re already familiar with font weights: boldfaced text is a very common example of an increased font weight. Generally speaking, the darker and “more bold” a font appears, the heavier it is said to be. There are a great many ways to label the heaviness of fonts. For example, the font family known as Zurich has a number of variants such as Zurich Bold, Zurich Black, Zurich UltraBlack, Zurich Light, and Zurich Regular. Each of these uses the same basic font, but each has a different weight.

So let’s say that you want to use Zurich for a document, but you’d like to make use of all those different heaviness levels. You could refer to them directly through the font-family property, but you really shouldn’t have to do that. Besides, it’s no fun having to write a style sheet such as this:

H1 {font-family: 'Zurich UltraBlack', sans-serif;}
H2 {font-family: 'Zurich Black', sans-serif;}
H3 {font-family: 'Zurich Bold', sans-serif;}
H4, P {font-family: Zurich, sans-serif;}
SMALL {font-family: 'Zurich Light', sans-serif;}

Besides the obvious tedium of writing such a style sheet, it only works if everyone has these fonts installed, and it’s pretty safe bet that most people don’t. It would make far more sense to specify a single font family for the whole document and then assign weights ...