Web Matters

The Wrong Size Fonts

Or why not to over-ride the reader’s font size

When HTML was originally conceived, it was recognised that there was a large variety of software and hardware in use. A font size or colour that was readable on one screen might not be convenient on another. In addition different readers have different preferences: someone with poor eyesight will typically want a larger font. The idea was that a document would be marked up according to its structure, and the reader could then view it with the layout she or he liked.

Getting it wrong

To some extent this idea has indeed been followed. Every screen-based web-browser offers the reader the possibility of setting the standard text to the size that he or she finds most comfortable to read.

So what do most web authors do? That's right – they change it to something else.

When I first wrote this page I suggested that the reasons for this were some combination of:

lack of imagination: “I found this on other sites – maybe I should do it as well”, or
ignorance: “You mean I can change my browser settings?”, or
indifference: “It looks all right to me – why should I worry about people with different browsers or less-than-perfect eyesight?”, or
arrogance: “You may think that you know what you find legible, but I know better”.

Since then I have seen evidence that all these do indeed play a role with different authors. However the commonest cause does actually seem to be a misguided attempt to help some readers, which I will come back to shortly.

The worst offenders are the ones who set a hard-coded font size, like “10px” – which may be perfectly readable text for some users, and ant-droppings for others. The merely bad ones are those which use a setting like “80%”. At least in this case one can re-adjust one’s browser settings to make the site readable, but why should one have to? The purpose of browser settings is to adjust to the wishes of the reader, not the whim of the author.

So prevalent has this behaviour become, that browsers like Opera and Firefox now have a “stuff the author” option to zoom the page to whatever size the reader wishes, regardless of how the author has marked it up. Authors who rely on this facility do themselves no favours however, as (a) the currently most used browser, Internet Explorer 6, does not have it; (b) zoomed images often look ugly; (c) those browsers which zoom only the text (not images) often result in text overlaying images – authors who fix the text size usually try to fix the layout as well.

Doing it right

So what does an author have to do to get it right? Absolutely nothing! Just avoid specifying a font in CSS for <BODY> or <P>, avoid using the <FONT> element in HTML, and all will be fine. And then headings etc can, if desired, be specified in CSS in terms of the default font size, e.g. 140% or 1.4em.

However there is always one viper in the woodpile, and frequently it bears a Microsoft logo. Due to bugs in Internet Explorer, it is pragmatic to define font sizes in % rather than ems. And indeed for the same reason it is a good idea to define the body text explicitly as 100% rather than leaving it as default (although this ought to have no effect).

The “text too large” issue

The “misguided attempt to help readers” I mentioned above is as follows.

Most browsers set as default a text size which, when viewed on a typical computer from around 2000-2002, is a little on the large size. This is sensible, as it ensures that the majority of readers can read the resulting pages. Many web-authors believe, rightly or wrongly, that most readers (a) find the default too large and (b) don't know how to change it. The obvious thing in this case would be to inform their readers how they can change the size, as I do in my page adjusting your text size. The reader only needs to do this once, and can then conveniently read all well-behaved web-pages.

However many authors choose instead to second-guess their readers and set some other text size, presumably benefiting some of the readers who don’t know how to use their browser – but at the expense of all those who do.

With ever more powerful video-cards and affordable fine-pitch LCD screens coming on the market, it is not even true any more that the typical default browser text size is on the large side for most users. Whereas a font-size of 90% in 2002 was misguided but perhaps understandable, nowadays it is just misguided.

Handling different font faces

This brings us to another issue: if the reader likes to read web-pages with a serif font, is an author justified in changing it to sans-serif? Or vice-versa? Or indulging in some highly intricate font that some people may find hard to read?

However, let us assume that the choice of font face (or “font-family” in CSS terms) is something the author can justifiably manipulate. This does have some consequences for the font-size issue, as different fonts have different minimum sizes for legibility.

Take for example the image below. All seven fonts have the same point size. I can't of course see how this appears on your screen, but on my screen at least the font size is adequate for the first two fonts, and more than adequate for the next pair, but inadequate for the third pair, while the last line is quite illegible.

[Font examples]

The differences occur because of various factors: the width of the font, its complexity, and the height-ratio of lower-case to upper-case letters. These differences mean that one might wish to adjust the font size according to the face in use. So can one go ahead and do this? Well, there are some vipers in this woodpile as well.

Firstly, one does not know what fonts are installed on the reader's computer. This does not perhaps matter too much for decorative fonts which require a larger than normal size. If the reader does not have them, the page will not look as intended but will be readable. There is however a problem with using Verdana. If the reader's platform does not have Verdana, the result is a page that is hard to read. See my page on why not to use Verdana.
There is also the general question as to whether one should use decorative fonts for body text at all. They may be fine for headings, but there are good reasons why books, newspapers etc are virtually always produced in traditional fonts such as Times Roman and Century – they are more readable. However there may be a case for using them in “arty” sites with a modest amount of text.
Next, one does not know what font the user has selected as default. If he has selected Verdana in order to be able to use a small font-size, then an author stylesheet specifying Verdana 85% will again result in text which is too small. But in that case even the inoffensive CSS declaration "font-family: serif; font-size: 100%;" will result in text which is too small. It is likely that the overwhelming majority of users will have a “traditional” font as default (Times New Roman, Arial, Helvetica, Century etc) and it is probably reasonable that authors should not have to concern themselves about eccentrics who select as default Verdana or Staccato.

All in all, fine-tuning the font size to match the font face is not something that is often likely to be successful.

Summary

I know of just a handful of situations where one can make a good case for using a body text size which differs from the reader default:

If one uses a monospace font such as Courier – perhaps for a program listing. Monospace fonts are generally readable at a smaller size than the usual proportional fonts, and a size of 90% is defensible, perhaps even 80%. (In the case of <PRE> elements, which are nearly always displayed in monospace by default, some browsers set the font size to less than 100%.) 'Monospace' is a defined generic family in CSS, and you should be able to rely on all browser/platform combinations having it.
If one is doing an “arty” site and wishes to use a decorative font, this probably requires a larger font size than normal.
Arguably one could use a slightly larger size than 100% for a page with an unusually small amount of body text.

If you think you know of any others, please do contact me. Note that I do not go as far as some people and say that one should never set a font size smaller than 100% – only that one should not do so on the main body text of a page (apart from exception 1 above). And I would strongly discourage sizes less than 80% for any purpose – except for demonstrating how bad this is. Feel free to disagree if you wish.