How do I display fonts that can be re-sized by viewers?

The best way to allow your site visitors to be able to zoom in on the fonts on your page is to use percentage [%] for the size; rather than using pixels [px].

How do I know what the percentage is for the font pixel size I normally use? Here is a quick lookup chart that should help you figure out what value to use when setting your font size percentages: (based on YUI ver 2.7 font sizing guidelines)

PX  —  %
10  —  77
11  —  85
12  —  93
13  —  100
14  —  108
15  —  116
16  —  123.1
17  —  131
18  —  138.5
19  —  146.5
20  —  153.9
21  —  161.6
22  —  167
23  —  174
24  —  182
25  —  189
26  —  197

As an additional note, IE has its own little quirks that are not found in fully compliant browsers. So, for IE 5.5 and IE 6 you would want to use the * [star filter] hack in order for the fonts to be viewed at the same size in those browsers:
(e.g. * html p {font-size: 77%; } )
Likewise, for IE 7 you would use something similar
(e.g. *:first-child+html p { font-size: 77%; } )

To add to the above note, do not use the quirks mode. Use the “Standards/Strict” rendering mode, displayed below:

< !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

Don’t forget to omit the extra blank spaces in the doctype declaration above.