About the font size testing resource

The font size test page shows how text in different sizes specified in different ways looks on a browser. The resource is useful if you compare a generated test page in different browsers.

An example of illegible text often seen on web sites

Paola Kathuria created the font size test page in August 2001 to find out how to reliably define the smallest legible text across all browsers and platforms. Initial tests indicate that the smallest legible text size is 9pt or 11px when considering PCs and Macs.

How to use this resource

• Compare a test page when displayed on the screen by different browsers.
• Use the browser's resize feature to try resizing the sample text - some test rows (e.g., px) will not be resizable on some browsers on some platforms.
• Print the pages out - browsers display sizes one way on the screen but print them out differently. For example, some browsers ignore sizes specified by em and percentage units when a page is printed, whilst some print pixel-sized text bigger than point-sized text.

Page controls

By default, the font size test page displays sample text in your browser's default font face (that is, the page doesn't specify a font face) in all the available sizes.

The font unit controls are colour-coded - the same colours are used as the background colour on the test rows. Choosing a font unit shows a different subset of the complete list of sample rows.

If you select a font face that isn't on your machine, the test page will look as if you'd picked default as the font.

Browser simulations

For Verdana only, a third set of choices becomes available. It lists browser/platform combinations. If you choose a browser or show all, extra rows will appear after each test row.

These rows are have a similar background colour (same hue but lighter). These lighter rows contain transparent 2-colour graphics taken from screenshots of the named browsers.

If you choose show all a row is added for every browser that there are screenshots for. The plan is to at least add these simulations from about six main browsers to represent what most people use.

default, sans-serif and serif

The font face options include default, sans-serif and serif. These refer to a browser's default fonts and will vary according to the browser and platform combination.

The order of the test rows

When all font units are shown on the test page, the order that rows are displayed has been determined by how they appear in Mozilla on a PC with Windows.

How the styles are set

relative, e.g., font-size: smaller

absolute: e.g., font-size: x-small

percentage e.g., font-size: 150%

em-height e.g., font-size: 1.5em

pixels e.g., font-size: 11px

point e.g., font-size: 9pt

These are all applied as cell styles generated within the page head.

font tag e.g., <font size="-2">...</font> (HTML 3.2)

The font tag using the current font (if any) and size surrounds the sample text.

absolute, original e.g., <big>...</big> (HTML 3.2)

A <font> tag is used to apply the current font face (if any) and then <big> or <small> tags surround the sample text.