• Friday, May 29th, 2009

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

Advertisement

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.

Spread the Message To Your Friends
  1. (required)
  2. (valid email required)
  3. (required)
  4. (valid email required)
 

cforms contact form by delicious:days

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Leave a Reply