Specifying fonts in Web pages

As a designer it's useful to know the typical size of sections of text you specify within a page. In printed pages this is relatively straightforward, but in Web pages there are various factors that will influence the physical size of an individual letter or word. These include the resolution of your monitor (and how it's set up under your operating system), the Web browser's default font size chosen by the reader, as well the actual HTML size you specify in your pages using the FONT SIZE tag.

In print, type is most often specified in points. The most commonly used value for the typographic point is 1/72 of an inch. However, in print a 72 point letter is never exactly an inch high. This is because in type the point size is the distance between the bottom of the lowest descender to the top of the highest ascender with a little bit added on. This is so that lines of type 'set solid' (without any additional space between them) do not bash into each other.

When a word processor or other computer application asks the operating system for a particular glyph at a particular point size, it is given a bitmap rendering of that glyph. The physical size in pixels of the glyph it receives depends on the resolution of the output device. Typically computer monitors range from 72 to 150 ppi (pixels per inch). You can provide Windows with the exact pixels per inch resolution of your monitor by selecting Custom... from the Settings tab of your Display Properties control panel. However, in most cases users will stick with the default 96ppi (Small Fonts) or 120ppi (Large Fonts) Display Properties options.

The official HTML specifications leave it to the developers of browsers to decide the relationship between the <FONT SIZE=n> values and the actual type size in points. Microsoft^® Internet Explorer and most other browsers adopted the original Mosaic / Netscape default sizes. These are listed below in table 1.

FONT SIZE=n	Point Size	Heading Hn
0	6
1	8	H6
2	10	H5
3 (default)	12	H4
4	14	H3
5	18	H2
6	24	H1
7	36

In current versions of Netscape altering the values for default base font and base font size requires travelling through several option menus. If the user changes the base font size (the default is 12pt) to another size the browser works out new values for FONT SIZE=1, 2, 4, 5, 6 and 7. Long-time users of the Web may recall that original versions of NCSA Mosaic let the user specify the type size for each level of HTML heading.
The font size menu

In Microsoft Internet Explorer it's much easier for the user to change the base font size. From the View menu the user can choose from five font options. These are; Smallest, Small, Medium (default), Large and Largest. There is also a button on the toolbar that cycles through these five options. The point sizes used for each FONT SIZE value at each option is listed in table 2.

Heading Hn		H6	H5	H4	H3	H2	H1
FONT SIZE	0	1	2	3	4	5	6	7
Smallest	4	6	8	9	10	12	16	24
Small	5	7	9	10	12	16	20	30
Medium (default)	6	8	10	12	14	18	24	36
Large	8	10	12	14	16	20	28	42
Largest	10	12	14	16	18	24	32	48

The following table [3] is made up of screen captures showing the word 'Fox' in Times New Roman at SIZEs 1 - 7 for each of the base font options, smallest - largest.

Table 3.

It is important to remember that the corresponding type size in pixels for any specified point size is dependent on the resolution of the output device. This is as true for screen displays as it is for laser and ink-jet printers.