Typography - Pro CSS Techniques - page 200

Font Weights
You might assume that choosing the weight of your font—such as boldfaced or not—is a sim-
ple matter in CSS. You'd be both right and wrong. CSS uses the font-weight property for this,
and allows for two types of attribute values: keywords and numeric.
Assigning font-weight with Keywords
You can use one of four possible keyword values to indicate the weight of your type. They are
normal , bold , bolder , and lighter . As you might expect, normal indicates the standard weight
of the font and bold indicates a boldfaced version. You can use these like so:
h1 {
font-weight: bold;
}
p {
font-weight: normal;
}
That's the simple part, and it covers most real-world use cases.
Assigning font-weight with Numerical Values
However, many typefaces include not just a normal and bold weight but several other weights
as well. For example, the typeface Myriad Pro includes light, normal, semibold, bold and black
variations. The OpenType font file format provides for up to nine weights of the same typeface.
To account for this, CSS also allows you to specify weight in a numeric notation, with the pos-
sible values 100, 200, 300, 400, 500, 600, 700, 800, and 900. If a font has nine weights, each of
them corresponds directly to a weight, with 100 being the lightest and 900 being the heaviest.
However, if a typeface doesn't have all nine weights, the user agent is required to go through
a complex set of steps to map the weights that do exist within the font to a particular numeric
value. Those steps are as follows:
1. If a weight is labeled by the font as Normal, Regular, Roman, or Book, it is assigned to
the numeric value 400 (which corresponds with the keyword normal ).
2. If a weight labeled Medium is found in the font, it is given the value 500. However, if
Medium is the only weight available, it is assigned the value 400 instead of 500.
3. If the value 500 is still unassigned, it is assigned to the same weight that was assigned
the numeric value 400.
4. If 300 is unassigned, it is assigned to the next lighter font weight than that assigned to
400, if a lighter one exists. If a lighter weight does not exist, it is assigned to the same
weight that was assigned the value 400. The same method is applied for 200 and 100.
5. If 600 is unassigned, it is assigned to the next heavier font weight than that assigned to
the value 400, if a heavier one exists. If a heavier weight does not exist, it is assigned to
the same weight that was assigned the value 500. This method is also used for 700, 800,
and 900.