Setting the Font Size

There are two basic ways to set the font size for the text in your Web page. You can mandate that a specific size be used or you can have the size depend on the element's parent.

Tips

See page 124 for details about units.
There shouldn't be any spaces between the number and the unit.
The average pixel is about 1/80th of an inch high (1/32 cm), though it depends on the screen resolution. Imagine a 17" monitor, whose screen is roughly 12.5" wide, with a resolution of 1024 x 768. At that resolution, text at 16 pixels would be about 1/5 of an inch high (about 1/2 cm).
If you set the font size with pixels, visitors using Internet Explorer (up to and including version 7) will not be able to make the text bigger or smaller with the Text Size option. (Zoom still works.)
Only use points, cm, mm, or picas in style sheets that format printed output (see page 209).
Different browsers interpret the keywords in different ways. Explorer 5.x uses small as its base size while IE 6, Opera, and Netscape use medium.
The font-size property is inherited.

Tips

The new size is determined by multiplying the percentage or em factor by the parent element's size. For example, if the body is set to 16 pixels, a p element contained in it with a relative value of 75% will be displayed at 12 pixels.
The parent element's size may be set by you (the designer), may be inherited, or may come from the browser's defaults. On most current browsers, the default size for the body element is 16 pixels.

Figure 10.17. The difference comes if your visitor tries to resize the text in their browser.
The child of an element with a relative size inherits the size, not the factor. So, an em element in the p in the first tip would inherit a size of 12 pixels, not a relative value of 75% (which would be strange).
An em is equal to the size of the font. So 1 em equals 100%.
Ems and percentages are well supported in current browsers.
You can set font size together with other font values (see page 159).

Figure 10.18. As long as you have used relative sizing, the Text Size command will change the size of all the text (but not the graphics) on your page, in proportion to its original sizes.
Sizes specified with ems and percentages are more elastic. You can change the design by changing just the base size. And visitors can change the base size with their browser's Text Size command.
There's also an ex unit, which refers to the x-height of the parent element, but it is not widely supported.

Setting the Font Size

Figure 10.14. Here I use pixel values to have control over the initial size of the text (which I've decreased in size throughout, compared with most browsers' defaults).

Figure 10.15. The sizes I've specified are displayed in the browser. Internet Explorer will use these sizes even if the visitor chooses a different size with the Text Size command.

Figure 10.16. Assuming a default text size of 16 pixels, this style sheet will be equivalent to the one shown in Figure 10.14 on page 156.

Figure 10.17. The difference comes if your visitor tries to resize the text in their browser.

Figure 10.18. As long as you have used relative sizing, the Text Size command will change the size of all the text (but not the graphics) on your page, in proportion to its original sizes.