O'Reilly logo

Cascading Style Sheets: The Definitive Guide by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Font Weights

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required