Are you frustrated by the fact that you can only size text to seven different sizes using <FONT SIZE=x>? Then you're gonna looove this page.
font-size
Using the font-size property, you have magical control over the size of text with an infinite number of font sizes at your disposal.
Three basic ways to specify the size of text are:
- points, ems, pixels, and other units;
- keywords; and
- percentage values.
Points, Ems, Pixels, and Other Units
Stylesheets recognize many different kinds of units that you can use to specify the size of an element. Let's look at each one in turn.
Points:
This code tells the browser to display <P> text at a size of 16 points. Point size is a unit familiar to print designers and refers to an imaginary box that extends from the bottom of a descender (like "p") to the top of an ascender (like "d").
Points are an excellent unit to specify text size with because they work well across browsers and platforms. The only thing you should be aware of is that, by default, fonts appear larger on PC monitors than they do on Mac monitors.
(If this is a big problem, you can always use JavaScript to detect which platform a person is using and then link to a different CSS file depending on the platform. Check here for details about platform detection.)
For more details on text size and CSS solutions, check out this work-around.
Points, like all other units, work as small or as big as you want (that was 8 points and 80 points, respectively).
The preceding sentence was written using the CSS font-size property. If your browser doesn't support this property, click here to see what it looks like.
Em:
P { font-size: 20pt }
B { font-size: 1.5em }
An em is a unit of distance equal to the point size of a font. When used in stylesheets, an em refers to the size of the parent element. Thus, in the example above, any <B> text within <P> would be 30 points. (The text is one and a half times that of its parent.)
The em is also an excellent unit for text size, even though IE 3 doesn't support it. When you use em, you can be sure that users who need to can still adjust the type size using their browser preferences (which is important for those with less-than-perfect eyesight). Also, pages that are printed will have appropriate text size.
Pixels:
From a Web design point of view, the pixel is a familiar unit and relatively predictable. In fact, the best thing about using the pixel unit is that text sizes are similar across platforms when you use it (with any other unit, PC text appears bigger than Mac text).
There is a price, however. When you use pixels, your Web pages will not print consistently. Sometimes they won't print at all, and sometimes they'll print with ultra-tiny text. Also, in some browser versions, users won't be able to adjust the font size using the browsers' preferences. Not good. The em is the more flexible unit.
Other units:
If the previous three don't give you what you want, try one of these units:
- in is inches
- cm is centimeters
- mm is millimeters
- pc is picas
- ex is x-height
Keywords:
If you don't like using those units, you can also declare text size through keywords, like so:
There are seven keywords, and they correspond to the numerical values we're used to seeing with <FONT SIZE>:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
With these values, the Web browser is free to decide which exact font size is appropriate for each keyword. For example, x-large is displayed at 28 points in Netscape Communicator (Windows and Mac), 24 points in IE 4 (Windows and Mac), and 18 points in IE 3 for Windows 95.
You can also use two relative keywords:
A value of smaller tells the browser to adjust the size of the current text down a notch on the keyword scale. For example, if large text has smaller applied, it will then be medium sized. The larger attribute works similarly.
(Note: IE 3 doesn't support the smaller or larger attributes.)
Percentage Values:
A third way to specify text size is through percentage values. Here's an example:
P { font-size: 15pt }
B { font-size: 300% }
These rules translate as follows: Make all <B> text within <P> three times as large or 45 points. Percentage values are always based on some inherited value from a parent element.
The browsers are a little buggy with percentage values, so test often.
Isn't choice delightful?! We finally have the freedom to play all we want with text size, thanks to the font-size property. The range at our disposal is wondrous, as you can see below. (Each letter "i" is 5 points bigger than the one before it; we start at 5 pt and end at 100 pt.)
i
i
i
i
i
i
i
i
i
i
i
i
i
i
i
i
i
i
i
i
Try doing that with HTML!
If your browser doesn't support this CSS property, click here to see what it looks like.
And we get some of the same flexibility with bold and italics. Check it out.
next page»
