HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [80]
Points (pt)
In word processing, you’re probably familiar with points as a measurement of font size. You can use the abbreviation pt to indicate you’re measuring in points, for example:
p {
font-size: 12pt;
}
There is no space between 12 and pt.
Unfortunately, points aren’t an effective unit of measure for Web pages. Points are an absolute scale, useful for print, but they aren’t reliable on the Web because you don’t know what resolution the user’s screen has. A 12-point font might look larger or smaller on different monitors.
In some versions of IE, after you specify a font size in points, the user can no longer change the size of the characters. This is unacceptable from a usability standpoint. Relative size schemes (which I describe later in this chapter) prevent this problem.
Pixels (px)
Pixels refer to the small dots on the screen. You can specify a font size in pixels, although that’s not the way it’s usually done. For one thing, different monitors make pixels in different sizes. You can’t really be sure how big a pixel will be in relationship to the overall screen size. Different letters are different sizes, so the pixel size is a rough measurement of the width and height of the average character. Use the px abbreviation to measure fonts in pixels:
p {
font-size: 20px;
}
Traditional measurements (in, cm)
You can also use inches (in) and centimeters (cm) to measure fonts, but this is completely impractical. Imagine you have a Web page displayed on both your screen and a projection system. One inch on your own monitor may look like ten inches on the projector. Real-life measurement units aren’t meaningful for the Web. The only time you might use them is if you’ll be printing something and you have complete knowledge of how the printer is configured. If that’s the case, you’re better off using a print-oriented layout tool (like a word processor) rather than HTML.
Relative measurement units
Relative measurement is a wiser choice in Web development. Use these schemes to change sizes in relationship to the standard size.
Named sizes
CSS has a number of font size names built in:
xx-small large
x-small x-large
small xx-large
medium
It may bother you that there’s nothing more specific about these sizes: How big is large? Well, it’s bigger than medium. That sounds like a flip answer, but it’s the truth. The user sets the default font size in the browser (or leaves it alone), and all other font sizes should be in relation to this preset size. The medium size is the default size of paragraph text on your page. For comparison purposes,
tags are usually xx-large.
Percentage (%)
The percentage unit is a relative measurement used to specify the font in relationship to its normal size. Use 50% to make a font half the size it would normally appear and 200% to make it twice the normal size. Use the % symbol to indicate percentage, as shown here:
p {
font-size: 150%;
}
Percentages are based on the default size of ordinary text, so an
tag at 100% is the same size as text in an ordinary paragraph.
Em (em)
In traditional typesetting, the em is a unit of measurement equivalent to the width of the “m” character in that font. In actual Web use, it’s really another way of specifying the relative size of a font. For instance, 0.5 ems is half the normal size, and 3 ems is three times the normal size. The term em is used to specify this measurement.
p {
font-size: 1.5em;
}
Here are the best strategies for font size:
♦ Don’t change sizes without a good reason. Most of the time, the browser default sizes are perfectly fine, but there may be some times when you want to adjust fonts