| home / programming / css_utopia / chap3 / |    [previous] [next] |
|
|
|
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[5]. 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, Making Fonts Consistent, includes an explanation of font height and width.
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.
Table 3.2 shows the absolute values supported in CSS style sheets, and where it’s not obvious, their meanings.
Table 3.2. Absolute Values in Style Sheets
| Style Abbreviation | Style Meaning | Explanation |
| in | inch | Imperial unit of measure; 2.54cm |
| cm | centimeter | |
| mm | millimeter | |
| pt | point | 1/72 inch |
| pc | pica | 12 points (1/6 inch) |
| px | pixel | One dot on the screen |
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[6]. 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.
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.
| home / programming / css_utopia / chap3 / | [previous] [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: June 10, 2003
URL: http://webreference.com/programming/css_utopia/chap3
