Font sizing samples - using styles

On this page: Samples of different font sizes, set using CSS styles. They should be visible in all modern style-capable browsers, for example FireFox, Internet Explorer, Safari or Opera.

The text below shows what different font settings look like on your computer with your browser set-up. Remember that style support in browsers in not yet quite perfect, so these examples may not all work, or work as they should. When the article was orignially written in October 2000, Netscape 4 (remember that?) was particularly flaky.

To see if there is any difference between the relative and absolute sizes for you, try changing the default fonts used in your browser.

Relative sizes:

larger   normal   smaller

200%   150%   normal   75%   50%

2 ems   1.5 ems   normal   0.75 ems   0.5 ems

(An em is the nominal width of the letter M in a font. So, values given in ems are proportional to the size of the font in use. In the above example, the percentage and em equivalents are given to show this.)

Absolute sizes:

16 points  14 points  12 points  10 points  8 points  6 points  

20 pixels  16 pixels  14 pixels  12 pixels  11 pixels  10 pixels

You can also specify absolute sizes in centimetres, inches, or picas, but the effect is much the same.