Considering Type Size Type size measures the length or height of the characters in a block of text. The higher the type size, the larger your text appears on screen. You may specify a different type size for every style rule in your stylesheet. TECHTALK Type size measures the length of the characters in a block of text. CSS gives you a number of ways to measure type size, including traditional typographic measurements like points, picas, and ems, but for the Web it's usually best to think in terms of pixels. The page width, the width of your layout, and the dimensions of many of your design elements are expressed in pixels, so it's convenient for you to measure the size of the text in the same way. Also, pixel-based text tends to be more consistent across browsers, so you have a higher degree of confidence that your visitors see your text as you designed it. BEHIND THE SCENES The pixel is a relative measure of length. You may recall from the discussion in Chapter 5 that, by increasing the resolution, you pack more pixels into the same physical area, thereby giving you smaller pixels. By contrast, points, picas, inches, and millimeters are absolute measures of length. A point is always a certain fixed length. While this might sound advantageous for type sizing, browsers aren't especially good at these types of measures. What IE says is a point isn't necessarily what Firefox says on the subject. But browsers are very good at measuring pixels. They do it often enough. Also, because points are absolute, what happens if your type size is absolutely too small for some of your visitors? They have no easy way of adjusting the size of your text, because a point is always a point. Not so with pixels. Your visitors can increase the text-size setting in their browser or decrease their screen size if all else fails. Either way, the text gets bigger and easier to read. Besides, most computer monitors display at 96 or 72 ppi, so pixels are more or less the same size for all your visitors anyway. When you express type size in pixels, you get "virtual" absolute sizing without the drawbacks. As a point of reference, the average type size for running text on the Web is about 12 pixels, but depending upon your design, 12 pixels can easily feel too large. Screen real estate is always a precious resource in web design, so it behooves you to think small. You don't want to think so small, though, that your text becomes illegible. Reading on a computer screen is hard on the eyes as it is. Add to this the fact that your visitors are skimmers, and legibility becomes the driving goal of your online typography. TIP At smaller type sizes, relatively wide fonts like Georgia and Verdana work best. The best approach to sizing your text is to experiment with different length values during the building of your site. Many variables affect the overall legibility of your text, including the background color of the page and your selection of font. However, even in the best case, the smallest useful type size is about 8 pixels. Set this as your lower boundary, and work your way up. BEST BET Don't go smaller than a type size of 8 pixels. 6.2.3. Considering Spacing You want spacing? You got spacing. CSS gives you spacing in every conceivable sense of the term, as this section illustrates. TECHTALK