UsableTypeTypography for the World Wide Web

style guide

Sizing Fonts

As stated numerous times on this site, font sizing is probably the most complicated and controversial aspect of web typography. Do you believe us yet?

There are many different methods of sizing text on the web, and unfortunately, at the current time none of them are 100% successful. Some are okay, others better than okay, and most completely useless. We don’t wish to be negative but we'll start by looking at the most completely useless.

The Most Completely Useless

For most people the following code will cause a flush of horror and possibly terrifying flashbacks.

<font size="3">

There, we did it. That thing above is the most useless way of sizing text on the web, and this guide is not even going to explain why. In fact there was much controversy over whether we should even address this method here. If you do not know why we have taken so much offence at this fairly indescriminate piece of code, then we have some help for you.

Almost as Useless

Now we are back in the real world, let’s address various ways of sizing fonts with CSS. The least useful (see, we are becoming more positive already) ways of font sizing in CSS are by declaring sizes in CSS with the following absolute values:

  • points (pt)
  • picas (pc)
  • inches (in)
  • centimeters (cm)
  • millimeters (mm)

By setting font size with any of these values you are leaving an awful lot to chance. The size of these values will vary quite drastically across different operating systems, different monitor sizes, and different screen resolutions. The most you can expect is that the values will remain consistent in relation to one another, ie. 2cm is half the size of 4cm.

A Promising Solution

The best way of sizing fonts is by using size values that vary compared to the default font size of each users browser. Ems(em) and percentages(%) are the values we can use to do this. Simply, the values 1em and 100%, will cause the browser to render text at the users default font size. Sounds ideal, right? If the user wants big text, she gets it. Another wants small text, she gets that too. What’s the problem?

A Default Font Size

The problem comes from two sources. Designers and users. Damn, that’s pretty much everyone. To explain this we need to include a small history lesson—I’ll try to keep it relevant.

The default font size for browsers has been standardized to the value of 16 pixels (px). The way this was calculated is unimportant, but take it from me, it wasn't just plucked from the air. The birth of a standard default font size set in pixels was greeted with gasps of surprise, and squeals of joy from the web design community: finally we had a ‘standard’ for font size that could be trusted.

What we hadn't bargained on (not the blind idealists among us anyway) was that users would be extremely familiar with the old default font size they had come to know and love. This was 12 points (pt); and remember earlier when we hinted about how unreliable that method of sizing is? On a Macintosh system, 12pt converts to about 12px. On a Windows browser it converts to more or less 16px. A noticeable difference.

On being presented with the new default font size of 16px many Macintosh users immediately headed for their preferences menu and down sized it to the more familiar (and frankly, readable) 12px. All that good work undone in no more than 3 clicks of a mouse.

Of course, many Windows users also find that 16px is too large for body text, and indeed most designers would agree with them. The problem which has come to pass at the moment is that both groups of people want to do something about the problem. Users change their default font sizes to make them smaller and more readable. At the same time, designers are sizing their text smaller to address the same issue. Both groups are trying to correct the same problem and the effects of each are combined, often resulting in text which is so small it borders on the illegible.

If you want to use ems or percentages for font sizing, the idealists will tell you never to set your body text at less than 1em or 100%. Idealistically they are right. Users should have the choice about how small or large they want their text. Most designers however, still set their text smaller than 100%—as we do on this very site—and the occasional user becomes the victim of this particular method of sizing. As we said, no method is perfect.

On a Simpler Note

That is not the only problem with the ems and percentages method though. Here are some more:

  • Netscape 4 does not understand ems for font sizes
  • Internet Explorer 3 converts em units to pixels
  • Other pre-version 4 browsers misunderstand the inheritance of ems and percentages

On a plus point, it is unlikely that you will be concerned with supporting these early browsers. If you can live without them (which many of us can) then this method, despite its drawbacks, is perfectly usable and very flexible. A good strategy for implementing this method is outlined very well in an article entitled How to size text using ems by Richard Rutter.

A Particularly Promising Solution

The obvious and most reliable way of setting font sizes is by using pixel (px) values. Firstly these can be easliy made to match up with grahics of a certain size, allowing complex effects to be attempted. Secondly, a pixel is a pixel. 12px is 12px on a Macintosh, on a Windows system, and on a Linux/UNIX system.

This is all sounding pretty good so far, despite a few problems early browsers have with pixels (particularly Netscape 4, although you are unlikely to be concerned with that). Heartbreakingly, there is one other small problem with the pixels method which explains why it is so rarely useful to web designers.

Text set in pixels is not resizable by users browsing with Internet Explorer for Windows. Internet Explorer for Windows is by far the most commonly used browser today, and although there is much hope that that will change over the next few years, currently we are unable to use the most promising solution available because of the major accessibility flaw it would create.

Before we leave to cry into our cornflakes there is something worth mentioning about this method which has made it a viable option for some designers. It is possible to use a DOM-based script which can swap certain styles in your CSS at the touch of a button. For details on implementing this solution read, Alternate Style: Working with Alternate Style Sheets, by Paul Sowden.

One more Promising Solution

The final solution you should be aware of is the keywords method. Keywords are a rarely used and underestimated tool for font sizing. Initial implementations of keywords by browser makers were unreliable and this developed a distrust amongst designers over their use. The truth is, now we have better browers (and a few tricks to bring the old ones into line) they can be a very useful alternative to other relative methods such as ems and percentages.

Setting the your text as medium will cause the browser to render fonts at the users default font size. Good news for our accessibilty expectations. Furthermore, using keywords the browser should never set font size to less than 9px, thereby keeping text legible even if the user has lowered their default font size. Unfortunately, the key word again here, is should. Internet Explorer on any platform does not follow the W3C Specification, and is happy to lower font sizes set with keywords well into the realm of illegibility.

More problems are once again created by the older browsers and in particular poor old Netscape 4. In the original CSS specification, the scaling factor between keywords was defined as 1.5, ie. medium was 1.5 times larger than small, and large 1.5 times larger than medium. This soon prooved to be a widely large scaling factor, making for tiny fonts at low sizes and huge fonts at large sizes. The scaling factor was changed to a more sensible 1.2 in CSS 2, but of course our old browsers had already implemented the larger scaling factor.

There's nothing we can really do for Netscape 4 in this situation. So once again, if you must cater for Netscpae 4 then keywords are not a particularly reliable method for font sizing.

What is more of a problem is that Internet Explorer on Windows got the keywords wrong up until their latest version—Internet Explorer 6. There are still plenty of people out there using IE 4/5/5.5 so we need to explore this problem in greater detail.

What pre IE 6 browsers do, is to map their default font size to the keyword small instead of medium. The result of that is that your font sizes will all appear one further step up the ‘keyword ladder’ than they should do. If you set font size as small as we do at UsableType, then your text will appear at a medium or default size in IE5 and IE5.x.

The way around this problem is to serve a different value for these problem browsers using Tantek Celicks Box Model Hack. Most developers using CSS will be familiar with this hack, which allows designers to send different values to IE4 & 5 on Windows to fix it's incorrect implementation of the Box Model in CSS. The basic idea is as shown below

p {

font-size:x-small;

/*Font size value for IE4/5 on Windows*/

voice-family: "\"}\"";

/*IE4/5 in Windows will not understand this and believe the rule is over.

voice-family:inherit;

*/Allows the rest of browsers to get on with rule/*

font-size:small;

*/proper value for browsers that implement keywords correctly/*

}

This appears in the style sheet of this very page allowing us to serve IE4/5 in Windows the values that it likes. If you're in to copy & paste, go for it.

Latest Links

Joe finds me patronising! Arsenalski Niet

To get in touch, please use the UT form below.

Name:
Email:
Message:

close