Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

General HTML

2007090101 Email to Ronx
 

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 (not the zoom) in the browser - either (IE6 and earlier) press and hold the Ctrl key and rotate the wheel on the mouse (in IE7 and later versions this affects the Zoom setting, not the Text Size setting, which is not the same thing), or use View->Text Size (all browsers except FireFox and Microsoft Edge) and select a different font size. The paragraphs are in a separate page displayed in an iFrame so that none of the CSS used in this page can affect the rendering.

[If the iFrame is blocked by Adblocker or similar browser extension, the page is here]

The lines of text below use pts, px, ems, %s, and other keywords (such as small, smaller) to set the text size.

Standards Mode

The above is Standards Mode

Now try the same in some other browser - the font size control may vary from browser to browser. If using FireFox, use the menu View->Zoom, and ensure Zoom Text only is selected.

The text sizes displayed here will not be the same when using IE5.5 or earlier.

Keywords and Numbers

When using (deprecated) <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) and pixels(px):

Pixels
(Note)
pts Number Keyword Equivalent:
Quirks Mode in Internet Explorer
Keyword equivalent:
Standards Mode
8 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
11 8 1 xx-small x-small
13 10 2 x-small small
16 12 3 small medium
19 14 4 medium large
24 18 5 large x-large
32 24 6 x-large xx-large
48 36 7 xx-large cannot display in Standards Mode using Keywords

Note: The pixels sizes given are approximations - Internet Explorer, FireFox and Opera may use different conversion factors when changing points to pixels.

Now compare the thumbnail images below. Both images (of the same adaption of the above table - see Qirks and Standards modes - font size comparisons) 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.)

FireFox Quirks modeIE7 Quirks Mode