Typography - Pro CSS Techniques - page 201

The long and short of this is that in any font that has fewer than nine weights (which is
most of them), several numeric values will result in the typeface being rendered in the same
weight. For example, if a font has just two weights, Normal and Bold, the values 100, 200, 300,
400, and 500 will all return the Normal weight (as will the normal keyword, which is equivalent
to 400), and the values 600, 700, 800, and 900 (as well as the bold keyword) will result in the
bold weight of the font. This scale varies for every font based on both the number of weights
available and the label those weights are given within the font file itself.
Given that you already can't determine what typeface will be displayed on a user's screen,
it's almost impossible to know how many weights are available to you. As such, your best bet
in most situations is to stick with the keyword values. And speaking of keyword values, there's
two more we haven't discussed yet: bolder and lighter .
bolder and lighter
The values bolder and lighter increase or decrease the weight of the type based on the weight
of the parent. Sounds simple, right? We're afraid not.
In order for the user agent to render type bolder or lighter, it must first determine the
numeric value of the weight of the parent. This is somewhat problematic, though, as the actual
rendered font weight can evaluate to multiple numeric values—Myriad Regular may be both
400 and 500, for example. In these instances, the user agent chooses the lowest applicable
numeric value—400, in our hypothetical Myriad Regular example. bolder then evaluates to
500—which turns out to also be Myriad Regular in our example, not Myriad Bold as you prob-
ably intended. And remember, all this is true only if the user has Myriad installed—if not, all
these evaluations are taking place on a different font, which likely has a different scale than
Myriad.
The Final Word on Font Weights
For practical purposes, it's usually best to simply stick to using the normal and bold keywords.
If you need more fine-grained control over font weight, go ahead and use the numeric values,
but don't expect them to work reliably across your entire user base, because you can't predict
exactly which fonts they'll be seeing your type in. You'll just have to accept that not everyone is
going see the type exactly as you intended it, and ensure your designs still work well in these
situations.
Sizing Type
Before we can discuss sizing type with CSS, we need to understand how type is sized in gen-
eral. A key unit of measurement in typography is called an em (pronounced like the letter m).
This unit is specific to a particular font and is specified in the font file itself by the font's designer.
Ems are usually thought of as a square unit—a box, called an em square or em box. A single
em refers to the size of the space between baselines (the invisible line on which uppercase
characters sit) when the typeface is set solid —or without leading (more on leading later in this
chapter). The em unit does not in any way define the size of individual characters within
a font. Many fonts have characters that are either larger or smaller (in height and/or width)
than a single em. This is the key point to understand. When we refer to the size of type, as
specified by the font-size CSS property, we are talking about the size of its em square (whether