Text on the web

What is this topic about?

This page is currently concerned only with a subset of text issues. In particular: "what should web authors specify for the font-family & font-size of the main text for a web site?" This series of articles discusses this topic.

(Terminology here tends to follow CSS2, rather than other conventions).

Examples of theories

It is obvious that web authors across the world have a range of theories about how to deliver their pages to their users with suitable font parameters. But here are 3 theories that have been articulated, and which illustrate the issues. Each of these has its own section below.

  1. "Don't specify either font-family or font-size for main text". This theory assumes that the user's own preferences, for example determined by the browser, should be used for main text. This current page conforms to this theory. The font parameters for what you are reading now are determined by your browser, not by my web site.
  2. "Specify font-family, but not font-size, for main text". This is hopefully a minority theory. The theory is that it is OK to override the user's font-family preference, but not the user's font-size preference. Its logic is flawed, because in practice it tends to override both values.
  3. "Specify both font-family and font-size for main text". This appears to be the adopted theory of the majority of web sites in the world.

"Don't specify either font-family or font-size for main text"

This is "respectable", with few authors actually objecting to it. But it has problems. Some of my own web sites that conform to this principle include:

Perhaps the best account of this principle is:

"Specify font-family, but not font-size, for main text"

This simply appears to be a bad principle. It not only typically overrides the default font-family, but also typically overrides the default practical font-size too. That is because the subjective, or practical, font-size varies from one font-family to another. (This is revealed by "aspect values"). Overriding one of them, for example the font-family, may be acceptable, but surely not both? It is not clear if this theory has any merit at all. Problems are shown at:

"Specify both font-family and font-size for main text"

This is the dominant principle used on the web. It attempts to overcome the faults in the "Specify font-family, but not font-size, for main text" principle by correcting the practical font-size. Some examples of web sites of various sorts that conform to this principle are described at:

There are some problems with this approach. One is that IE doesn't permit easy adjustment of text size if a font-size is specified as a px value. But "Relative font sizing HOWTO" describes a technique to avoid this problem.

So what should authors do?

It is dangerous to give advice on this topic! Apart from the fact that any decision is inevitably a compromise, there are some strong feelings about the answer. This topic is encroaching upon some people's vision of how the web should be. (The most vocal people don't appear to be the main people who are paying for the web, such as publishers and normal users!)

I have made it clear above that I am against the idea of simply changing the font-family and not compensating by changing the font-size too. That approach is a cop-out that yields the worst of the alternatives. (I wonder whether only authors who use a sans-serif font, perhaps Arial, as their own browser default would contemplate this?)

Although I currently avoid specifying any font parameters for the main text, I feel there are problems with this approach. The first problem is with users who are not accustomed to needing to control their browser defaults in that way. Why should they? Most web sites don't require them to! And a second problem arises when other parts of the pages really need some specific font-family. For example, button-links may be best with a sans-serif font, and they may need to be (say) only 80% of the font-height of the main text if the latter is 16px "Times New Roman". But they may need to be 100% if the latter is 13px Arial! (On this page, button-links are currently 82%).