Using the Font-Size Attribute

If seven type sizes seems ridiculous to you, you're not alone. CSS saves the day with virtually unlimited type sizes. Simply add the font-size attribute to your style definition, and supply the value and the units you want to use:

 p {   font-family: Arial, Helvetica, sans-serif;   font-size: 18px; } 

FAQ

Can I get more than seven HTML type sizes?

Clever Web designers have tried to squeeze additional type sizes out of HTML by setting a font tag to size 7 for starters and then increasing the size with a relative font tag immediately afterward. If this is you, then give yourself a pat on the back for your craftiness, but unfortunately the browser is on to you. The maximum size you can get out of HTML is size 7. The browser ignores relative values that add up to more than 7 (or less than 1).

Paragraph tags using this style rule appear in the browser as in Figure 48.2.

Figure 48.2. With CSS, you may specify any type size in a variety of units.

Table 48.1 summarizes the variety of units for type size that CSS provides. However, be aware that sizing type in the browser is a risky proposition. Since browsers offer somewhat shaky support for CSS, and since no two browsers choke on the same kinds of issues, you're better off using a relative unit for type size. As Table 48.1 shows, the relative units include em, ex, and px; but browsers are notorious for butchering the em and ex units, which leaves you with good old pixels as the only real alternative.

Table 48.1. CSS Length Units

UNIT	SIGNIFIES	CATEGORY
cm	Centimeters	Absolute
em	Ems; 1 em is roughly the width of the capital letter M	Relative
ex	X-heights; 1 ex is roughly the height of the lowercase letter x	Relative
in	Inches	Absolute
mm	Millimeters	Absolute
pc	Picas	Absolute
pt	Points	Absolute
px	Pixels	Relative

A relative unit isn't relative in the sense that the value changes. Instead, the actual size of the unit changes depending on a number of factors. For instance, screen resolution determines the size of a pixel. If your machine displays at 800 pixels by 600 pixels, then your pixels are larger than someone's whose machine displays at 1600 by 1200 pixels, assuming you both have the same size monitor screen.

Relative units allow the browser to accommodate the visitor's particular screen setting. If you use absolute units instead, like points, picas, or inches, your page is at the mercy of the browser to determine exactly how big an inch is on screen. Not surprisingly, in older browsers especially, the computer's reasoning is not so good, and your visitor may end up with illegibly small text and no way to resize it.

Using Length Constants in CSS

If type sizing with relative or absolute units leaves you cold because of the potential problems, you may substitute one of seven CSS length constants. You guessed it: These constants are roughly equivalent to the seven type sizes of HTML, as in Figure 48.3, so you're back to the sizing game, but at least this way you don't give the browser as much of a chance to render your page illegibly.

Figure 48.3. When in doubt, CSS gives you seven length constants that correspond roughly to the seven type sizes of HTML.

The seven length constants are xx-small, x-small, small, medium, large, x-large, and xx-large. You put one of these keywords in place of the number and units in a style definition, like so:

 p {   font-size: x-large; } 

You may also specify a relative length constant to adjust the size of type according to the current type size, whatever that happens to be. Use larger to make the type one size larger, or use smaller to make the type one size smaller:

[View full width]
 <p style="font-size: x-large;">   This type size is x-large, but <span style="font-size: smaller;">this type size is one  size smaller.</span> </p>