3.5. Expressing Measurements
Many of the properties you define in a CSS rule include measurements. These measurements tell the rule how tall or wide something is to be. Fonts, spacing, and positioning are the primary places you'll use such measurements.
There are two types of measurements: absolute and relative . An absolute measurement (e.g. setting a font-size to 18px, or 18 pixels) tells the browser to render the affected content as 18 pixels in height[3]. Technically, it actually tells the browser to use the specified font and scale its character height, so that the font's overall height is 18 pixels. Chapter 8, includes an explanation of font height and width.
[3] Again, if I wanted to be terribly precise, I would say that a pixel is actually a relative measurement, because its meaning is relative to the display medium on which the page is produced. But, in this context, "relative" means "relative to some other value in the style rule or in the HTML" and in that sense, pixels are absolute.
Using relative measurements, on the other hand, instructs the browser to scale a value by some percentage or multiple, relative to the size of the object before the scaling takes place.
This example defines a style rule, in which all fonts in paragraphs on the page should be scaled to 150% of the size they would have been without this style:
p {
font-size: 150%;
}
If you knew that, in the absence of such an instruction, all paragraphs on the page display their text at a size of 12 pixels, you could also accomplish the same thing this way:
p {
font-size: 18px;
}
I recommend that you generally use the relative sizing values whenever you can. This technique works better when the user has set preferences for font sizes, and in situations where multiple style sheets could be applied. It's also more accessible, as visually impaired users can more easily increase the font size on the page by configuring their browsers' preferences.
All length values (the term CSS2 uses to describe any size measurement, whether horizontal or vertical) consist of an optional sign ("+" or "-") followed by a number (which may be a decimal value) followed by a unit of measurement. No spaces are permitted between the number and the unit of measurement.
3.5.1. Absolute Values
Table 3-2 shows the absolute values supported in CSS style sheets, and where it's not obvious, their meanings.
When a length of zero is used, no unit of measurement is needed. 0px is the same as 0. It doesn't make sense to give a unit of measurement when the length is zero units, for zero is the same distance in any unit of measurement.
Wherever you need to supply an absolute measurement for the size or position of an element in a style sheet rule, you can use any of the above abbreviations interchangeably. All of the following should produce precisely the same result:
font-size: 1in; font-size: 2.54cm; font-size: 25.4mm; font-size: 72pt; font-size: 6pc;
Pixels pose an entirely different set of issues. If you use the pixel as your unit of measurement (as we have, with few exceptions, so far), you'll find that your fonts maintain their size ratio with graphics on your page, as the page is displayed on different monitors, with varying resolutions and screen sizes.
In general, pixels are not the most appropriate measurement to use; nevertheless, they are the most common. Most designers probably prefer to work with pixels because they want maximum control over the user experience. And clients often insist on using pixel measurements, believing that this is the best way to replicate on-screen a design they've seen on a printed page.
A pixel is one point on a screen that can be on or off, blue or green (or whatever color combination is needed). For example, if you set your computer's display to a resolution of 800 pixels by 600 pixels—one of the most common screen resolution settings—then a pixel corresponds to 1/600 of the screen height. On a typical 15-inch display, the height is about 10.5 inches and the width is a little more than 13 inches[4]. A 12-pixel-high font display on that monitor would turn out to be about 1/50 of the 10.5-inch height of the display, or just a bit more than 1/5 inch.
[4] High school math would lead you to predict a 9- by 12-inch screen, but, unfortunately, 15 inch monitors don't normally have a full 15 inches of diagonal screen space. Perhaps computer manufacturers don't study Pythagoras.
If the user sets his or her resolution to 1024 pixels by 768 pixels, the same 16-pixel high font displays at 78% the height, or 0.16 inches. What if the user's on a 13-inch display instead of a 15-inch display? You begin to see the problem with using pixels.
So, if pixels are problematic, why have we used them so far? There are three reasons.
First, they are easily the most common absolute value measurements used on Web pages, despite the problems they seem to pose. Even though some Web purists argue against the use of pixels, there really is no perfect, absolute measurement that will work well in all circumstances. In such situations, people tend to stay with what they know and what works for them. In this case, that's pixels.
Second, pixels are the measurement used in virtually all computer software. This means users expect the text on their displays to get smaller if they increase the resolution and larger if they decrease it. Text that worked "better" and didn't undergo such transformation would jar the typical user.
Finally, whenever a measurement is being applied to something other than a font, pixel measurements are generally the best way to describe distance. Only fonts are measured in non-pixel units, primarily because they have lives of their own in print and other media. Everything else on a computer display is measured in pixels by default, so using pixels for positioning, and to describe the size of such elements as graphic images is appropriate.
3.5.2. Relative Values
Because of the problems posed by the use of any absolute value, the most flexible and least controlling way to approach measurements for style rules is to use relative units of measurement. Principally, these are em and % , although some people prefer to use the more obscure ex measurement . The "em" measurement is so named because it refers to the height of a capital "M" character in the given font, but in practice it is equal to the font-size of the current font. The "ex" measurement is based on the height of the lower-case "x" character in a font (more commonly known as the x-height of the font) and is far less common than the em.
Both the em and the percentage generate font sizes based on the inherited or default size of the font for the object to which they're applied. In addition, ems and percentages are 1:100 equivalent. A size of 1em is identical to a size of 100%.
This description begs the question, "What's the default or inherited font size for a particular HTML element?" The answer is: it depends.
Prior to the emergence of Opera 5 for Windows, browsers set the default values for all fonts as part of their startup process. Users had no control. The browser defined a default. The Web designer overrode defaults willy-nilly. The user took what was presented.
Then, along came the idea of user choice. Not surprisingly, this development was facilitated by the emergence of CSS. Essentially, what the developers of the Opera browser did was create a local style sheet that the user could modify, and set his or her defaults to use. They also defined a nice graphical user interface through which the user could set preferences for these styles.
This was great for users, but Web designers found themselves in a quandary. If, for example, you assumed that browsers were going to default body text to a 12 point font size[5] (which was the de facto standard before the user-controlled preferences era), you could set a style to apply a 1.25em scaling to the text and get a 15 point font size for the text in question. It was nice and predictable.
[5] Just in case you were wondering, pixel sizes and point sizes are not equivalent, and the ratio between the two varies between browsers and operating systems. For example, the 12 point default font size used by most Windows browsers was rendered at 16 pixels on that platform. 12pt is equivalent to 16px on Windows browsers.
Now, however, a 1.25em scaling applied to a font tells the browser to increase the size of the font to 1.25 times (125% of) its default size. If the user has set up his or her browser to show standard text at a height of 16 points, your 1.25em transformation brings the size up to 20 points.
When you stop and think about it, though, that's probably just fine. The user who chooses a larger base font size probably needs to see bigger type. If you want type that would otherwise be at 12 points to display at 14 for some good reason, then it's not unreasonable to expect that this new user will benefit in the same way from seeing the font used in this particular situation increase from his or her standard 16 points to 20.[6]
[6] If that's not the case, you probably want to rethink your reason for boosting the font size in the first place.
Most of the time, there's not really a reason to muck with the user's settings for font sizes, so changing them arbitrarily isn't a good idea. Before you apply this kind of transformation to a text segment on your Web design, ask yourself if it's really necessary. My bet is that nine times out of ten, you'll find it's not.
I would be remiss if I didn't point out that there are some inherent pitfalls in using relative font sizes, of which you should beware. Under some circumstances, relative font values can combine and multiply, producing bizarre results indeed.
For example, if you define style rules so that all text that is bold is displayed at 1.5 ems and all text that is italic is displayed at 1.5 ems, text that is bold and italic will display at 2.25 ems (1.5 x 1.5). This problem arises with child elements, which inherit from their parent container elements the computed values for measured properties and not the relative values. This is relatively easy to avoid, but if you overlook it, the results can be quite startling.