Font shenan­igans

Through CSS, an author can now make the font size of all of his text, or any portion of it, bigger or smaller, or set to a particular size, and can similarly change the typeface. This capability is easily misused.

There are two reasons for making text bigger:

  1. It is more important (than other text in the same page).

  2. It leads the eye to the start of some text (e.g. as a heading or drop capital does).

There are two main reasons for making text smaller:

  1. It is less important.

  2. It has low entropy across the site, i.e. it is repeated on each page, so the visitor may already be familiar with it as she traverses the site.

Consider that your page has several pieces of text of various importance: headings, navigation, legalese, image captions, administration – and the main body of text.

  • A heading, of course, needs to be bigger than the main text, because it serves to identify and summarize the associated text, and to lead the eye to it. (The two ‘bigger’ reasons apply here.)

  • Navigation usually needs to be smaller, particularly when the number of items is large. Furthermore, if the same (or almost identical) navigation area is available on every page, then it must not be intrusive on the rest of the space, and the reader will already be familiar with it from seeing other pages on the site. (The entropy reason applies.)

  • Legalese (e.g. copyright notices, disclaimers) and administrative text (dates and maintainers) might appear on every page, almost unchanged, and are unimportant to most visitors. (Both ‘smaller’ reasons apply.)

  • Captions are associated with images, and may often be useless without them. Since the image is often less vital than the text, so might its caption be to the image – a smaller font is appropriate. (The importance is reduced.)

  • The main text has the greatest entropy. It might not have the same weight as a heading, but the reader expects to find the detail here, and so there should not be any superfluous obstacles (e.g. smaller font) to its readability.

    Given that it also forms the bulk of a page, it doesn't help to increase the font size either – that just takes up more space.

    Therefore, the main text should appear at the same size as unadorned text, i.e. the visitor's setting.

Now consider that the visitor has already configured her browser carefully so that, in the absence of any change of font size suggested by the page, text should be at its optimum size to be read comfortably by that visitor. If the web designer looks at his own page to test, and thinks that the main text is too large with the CSS property font-size: medium, then that is an issue with the configuration of his browser, not the writing of the page — it could still be perfectly acceptable to the visitor. The designer should not worry about a visitor who hasn't configured her browser to suite herself, as he can't cater for such a visitor at the same time as he is catering for another visitor who has reconfigured, or for yet another who has misconfigured.

An analogy is the volume control on your television set. If the volume is too loud, you don't ring up the broadcaster and ask for it to be turned down. Also, while you expect similar volume levels from all stations and from programs and adverts on the same channel, you don't expect your next-door neighbour to be able to change your TV's volume just because his is too loud or too quiet.

Bad practice

A practice of setting the <body> font size to around 90% seems to have come about from web designers seeing their own pages with a default (unadjusted) font size too large for their own comfort or aesthetics, and turning to their page editor for redress, instead of to their browser configuration. Or they might instead be responding to complaints from their visitors that the text is the wrong size, or they might have chosen a font like Verdana which appears larger at the same setting compared to other fonts.

This is a mistake, as the setting is relative to the visitor's default, and so implies that the visitor is wrong. What if a visitor has already set her default to her preference on a page that does not specify a font size? A page that does set a font size ruins that careful tuning.

You might argue that this 90% setting is some sort of industry standard. But this implies that all pages should use this, even ones which currently don't specify anything. In which case, why is the default 100%?

You might also defend the practice by pointing out that many browsers support a ‘minimum font size’ setting, which overrides any attempt by the page to set smaller and so solves the problem. But that doesn't necessarily work:

  1. What if the browser doesn't have that support? It's not required to.

  2. It prevents the less important or low-entropy text from being smaller.

There is also a practice of setting absolute font sizes, especially in pixels, possibly to fit a pixel-perfect layout. This has all the same problems, plus some browsers do not permit the user to resize pixel-sized text.

By specifying a font size or adjustment, the designer would be taking a positive step to unnecessarily worsen a few people's browsing experiences just so that the page looks marginally better in his environment (or in the environments of the complainers who don't know how to adjust their browsers). Even if a majority of environments are marginally improved, such a statistic is no consolation to the individual visitor for whom it is significantly worsened.

I have heard it argued that it is right for an author to reduce the font size on his page because most browsers come with a default setting that is too large. The flaw of this argument stems from the fact that the author isn't the user of these billions of browsers. This fact leads to the following two points:

  • If these browsers are misconfigured, the solution is for their users to re-configure them. This is not a problem that the author has to worry about, because he is not using those browsers.

  • A page author is in no position to judge that a particular user's browser's default font size is incorrect for that user. An author-specified font-size ‘correction’ implies that it is incorrect, and for that user and all others!

Summary of advice

Firstly, surfers should be aware that they can change the default font size on their browsers. To do this, one should go to a page with ample text but no font-size setting on it, then she should adjust the settings on her browser until the text is the right size for her. — A designer should direct visitors to the documentation for their browsers if they complain about a font size which the designer did not set.

Secondly, page designers should resist the temptation to specify over-all font sizes, and leave the personal tuning of the page to each visitor; it's the only way for all visitors to be satisfied. Do not set the font size for any root element like <html>, <body> or some all-encompassing <div>.

The designer must assume that the visitor has configured her browser properly, and not try to deploy work-arounds for his own or anyone else's misconfiguration.

The following are acceptable, but pointless, as they simply restate the default:

body {
  font-size: 100%;
  font-size: medium;
}

The following is technically identicaly to the default, but should be avoided as it triggers an IE bug:

body { font-size: 1em; }

The main body of text should be at the visitor's default. Achieve this either by allowing the text to inherit the page's font size unmolested, or by using the medium setting. Don't do it by trying to undo the scaling of an outer element (especially <body>), as in:

body { font-size: 80%; }
#maintext { font-size: 125%; }

…since the visitor may well have overridden the <body> setting back to 100%, which would invalidate the other one.

Don't use pixels as units. Absolute physical units, like points, picas, and millimetres, are rarely useful, except perhaps on print stylesheets.

Setting the font family is probably a waste of time too. If the visitor has it, you might need to make an adjustment to the font size to make it congruent with surrounding text; if she doesn't have it, your adjustment will be erroneous — and you can't tell whether she has it or not. To deal with this problem, you'd probably require a change to the standard to permit the likes of:

.mystyle {
  font-family: "Verdana:0.8", helvetica, sans-serif;
}

This would indicate that, if Verdana was available, it should be displayed at 0.8 of its computed size. Of course, no browser recognises this imaginary format or has any reason to.

Stick to the general families of serif, san-serif and monospace, etc.

Standard Navigation info

Ĉi tiu paĝo disponeblas ĉi-lingve, depende de la lingvo-agordo de via krozilo.