Font Sizes - fixed or resizable
What are best for text sizes - ems, pixels, points or percentages?
This page demonstrates how relative sizing using ems and percentages (and some other variations) affects some browsers.
Consider the paragraphs below; view them in Internet explorer, and change the font size in the browser - either (not IE7) press and hold the Ctrl key and rotate the wheel on the mouse (in IE7 this affects the Zoom setting, not the Text Size setting which is not the same thing), or use View->Text Size (all browsers) and select a different font size.
Now try the same in some other browser - the font size control may vary from browser to browser.
The text sizes displayed here will not be the same when using IE5.5 or earlier.
Keywords and Numbers
When using <font> tags there is an additional method of specifying font sizes - numbers. The following table shows the relationship between keywords in Quirks and Standards modes, and numbers, and gives an approximate size in points (pt):
| pts |
Number |
Keyword Equivalent:
Quirks Mode in Internet Explorer |
Keyword equivalent:
Standards Mode |
| 6 |
|
cannot display in Quirks mode using keywords |
xx-small
As some browsers have a minimum size for text, this may render as the same size as x-small |
| 8 |
1 |
xx-small |
x-small |
| 10 |
2 |
x-small |
small |
| 12 |
3 |
small |
medium |
| 14 |
4 |
medium |
large |
| 18 |
5 |
large |
x-large |
| 24 |
6 |
x-large |
xx-large |
| 36 |
7 |
xx-large |
cannot display in Standards Mode using Keywords |
Now compare the thumbnail images below. Both images (of the same adaption of the above table - see ems_percent-quirks.aspx) are rendered in Quirks mode in FireFox 2.0 and IE7. Notice that FireFox renders the font sizes smaller than the corresponding font number. This shows that using keywords is not reliable across browsers in pages rendered in Quirks mode. With a valid and complete <!doctype..> the rendering would be almost identical in IE7 and FireFox 2.0. (Full size images can be seen by clicking the thumbnails.)
Other Measurements
The lines of text below use pts, px, ems, %s, and other keywords (such as smaller) to set the text size.
This is some text. The size is set at 80% of the default font size used by your browser, when the browser is set to use normal font sizes.
This is some text. The size is set at 0.8em, which is equivalent to 80% of the default font size used by your browser when the browser is set to use normal font sizes.
This is some text. The text is set at 13px. A pixel (px) is the smallest dot that can be displayed on a screen. 13px (in my opinion) is about the same as 10pt text on my screen when using Internet Explorer 7, but will be different on a screen where large fonts are used.
This is some text. The text is set at 10pt. Since 1pt is 1/72 inch, how big is the text? points (pt) should not be used in documents designed for the screen, such as web pages, since the measurement means nothing in this context and is wide open to interpretation by the browser.
This is some text. The text is set at small. This is one size below the default size (medium in Internet Explorer in Standards mode) for text in most browsers.
The above paragraph would appear one size larger, like this, in IE5 and IE6 Quirks mode.
The table above shows that text sized as small in standards mode will appear as <font size="3"> in Quirks mode, that is equivalent to medium in Standards mode.
This text is set to smaller - it is one size smaller than the default browser font-size. smaller is a relative sized font, and its actual size will depend on the parent tag (here the parent is the <div id="norm"> tag, which is set to the same size text as the browser default.)
This text is at the default browser text-size.