ScotConnect

Why using points to set sizes on a computer screen is bad?

The following explanation is only for 'web text fetishist' - or those people who aren't happy with anything less than a full and detailed analysis of what I call 'the tiny text' problem. It is a problem that most Apple Mac users in particular will be aware of.

Below is an example of how 9pt, 8pt, 7pt and 6pt text will look on a PC with a resolution of 96dpi (dots per inch).

The above screenshot shows that it is only really when you get to 6pt text that the quality of the text drops below the threshold of readability. However, the same text sizes on a Mac with the default resolution of 72dpi looks a little different, as illustrated in the screen-shot below.

The screenshot illustrates that there are clearly readability problems on the Mac with text set to anything below 9 point. The most common example of this problem can be found on Web pages that have been designed on a PC but are unreadable when viewed on a Mac. Let's have a brief look at why this is the case.

The magic number is nine

Remember this: it takes at least nine pixels to form normal text with upper and lower case characacters (There are fonts that can be rendered clearly with fewer pixels but they are not generally available on most Web users' computers).

Text set to 8pt on a Mac is rendered using only 8 pixels and that is too small to be legible - no matter how good your vision is.

The details:

1. The default resolution of a Mac is 72dpi.
2. 1 point is an absolute unit of measurement; it is 1/72 of an inch.
3. 1 pixel maps to 1 point on a Mac monitor; so for every inch on the Mac monitor there are 72 pixels.
4. At least 9 pixels are needed to render a normal font because of their ascenders and descenders.
5. Setting type to 8pt means that only 8 pixels will be used to render the type.
6. 8 pixels is not enough to render type clearly on a monitor set to 72dpi (see point 4 above).

The result, as we have seen in our earlier example, is that any text set using absolute units smaller than 9point (or 9pixels) will be unreadable on a Mac set to the default resolution.

Should you be concerned about making your Web page unreadable to Mac users?

You should of course because there are 25 million people in the world who use Macs, but what you should be more concerned with is the principle that your pages should work on all Web enabled devices, irrespective of the screen resolution.

Many 'alternative' browsing devices, such as Personl Digital Assistants (PDAs), will ignore your style sheet recommendations - so it is not guaranteed that the text size will be a problem - but I don't consider that a strong enough counter argument to justify the use of points as a measurement for use on computer screens.

A bigger inch for your money: why is 8pt type readable on a PC?

A PC has a default resolution of 96dpi; dpi stands for 'dots per inch' - so 'right off the bat' you have more pixels per inch to render your text. But on a PC screen, this apparent fact is a bit of a red herring; there is no match up between a physical off-line inch and an on-screen inch.

Measurements in the world of the PC screen world have been untethered from measurement in the physical word - a PC inch is bigger than both a real world inch and a Mac inch;1.3 times bigger.

What it boils down to is that everything on a PC screen is about 1.3 times bigger than it is on the Mac, and this translates to a difference of 2 to 3 points between font sizes on PCs and font sizes on Mac.

The irony is, that there is nothing absolute about absolute units on the Web; text that looks fine on one computer can be unreadable on another, even for people with perfect vision.

Fixing text that is too small to be readable

Internet Explorer 5 for the Mac and Netscape 6 gets around the size inconsistencies by adding a default resolution preference that is set to 96dpi, to mimic that of the PC. Additionally, screen magnification options are being added to the latest browser to get around problems caused by using absolute units in pages.

These changes are a great idea - but only solve the problem for users who have the latest browser; even if all new browsers adopt these techniques - there will still be a fair proportion of users with old web browsers - the principle of using relative units rather than absolute units is still a good one.

Apart from the facilities which may, or may not be built into some newer browsers, turning off style sheets is the only way that text can be made readable for many users who are faced with pages that have used small absolute units to set text size.

I suspect that most people will not know that style sheets are the problem, or that they can be turned off. They are more likely just to leave the site and look for another source for the information they are after.

Alternative absolute units of measurement

Other absolute units that I have not mentioned - but which are equally unsuitable for on-screen display, include picas(pc), inches(in), centimeters(cm) and millimeters. I am not going to spend time attempting to make a case against each of these units in turn; suffice to say that I don't recommend them, and unless you have absolute knowledge of all clients machines that your web pages will appear on - they are likely to lead to unpredictable results.

So why does CSS give me the ability to use points if they are no good for the web?

Points are provided as part of the CSS specification so that you can set up an alternative stylesheet for those who would like to print out your page rather than read it on screen.

In the context of physical print, using points to set text sizes makes sense and is the correct unit of measurement to use. We know that an A4 (UK) document measures 8.27inches by 11.69inches (8-1/2" x 11" in United States, Canada and Mexico) - therefore it makes sense to set margins, indents, font sizes and so on in inches or points (a point being 1/72 of an inch) or some other absolute unit, with predictable results.