john skinner

professional | personal | public service | what's new | faq | links | contact
You are here: Home > Public Service Announcements > Consistent text sizes

How to get consistent text sizes on-screen

You've probably noticed while surfing around, that some sites have text that's too small to read, whereas others have text so big you feel like backing away from the screen. This typically appears when viewing sites created on Windows with a Mac browser, or vice versa. Windows-created sites look tiny on a Mac; Mac-created sites (like mine) look huge on Windows. I can assure you, this is just as annoying to programmers as to surfers.

The solution is in the text size definition. There are three ways to define text sizes in HTML: Points, Relative, and Pixels. Setting text size by points is the commonest way, because it's familiar. Anyone who has ever written a letter on a computer, has had to consider point sizes. The problem is that Macs and Windows disagree on how to display points on-screen: 10 point text on a Windows screen, is roughly the same physical size as 14 point text on a Mac screen. So what looks good to you is pretty well guaranteed to be unreadable on my system, and vice versa.

The second way to define text sizes is by relative size, either in words ("Normal", "Small", "Very large" etc) or numbers (-3, +1, +5 etc). This sounds like it should be clean and simple, but has a basic flaw: "Normal" or "0" is understood by the browser as "12 point" — which brings us back to the same problem.

Fortunately, there is a third way to define text sizes: in Pixels. These are international, non-denominational, and consistent. 11 pixel text (like this right here) looks the same under Macintosh and Windows. Using pixels instead of points or relative size is easy, just quote font sizes as e.g. "8px" or "14px":

   <font size="14px">huge</font> <font size="8px">tiny</font>

and Bob's your near paternal relative. If you use style sheets, then you change this only once and your whole site is clean. (If you don't yet use style sheets, take this opportunity to start!)

A final word of warning for do-it-yourselfers: many browsers make mistakes if you mix text size definitions. Decide on either points or pixels, and stick to it.
Copyright © John Skinner, 2002. All rights reserved.
Last updated 2003.03.19