blog.andyhume.net

How could we publish the first edition of a site like UsableType without an article on font sizing? It would be like toast without butter, fish without chips, a Bush without war.

So here it is: another article on font sizing.

This one however, is not intended to expose the pros and cons of various sizing methods. In fact, it is not going to address any particular methods of font sizing at all. What it is intended to be is a base for further discussion. A central hub if you like, with many a spoke thrusting outwards to create a spinning wheel of controversy.

I want to talk about designers that lower their body text below the default font size. These ill-mannered, uncouth, hooligans that neglect standards, fly in the face of accessibility, and… oh, hang on, I’m one of them. Damn.

What’s going on?

I thought I was better than that. I thought I had a grasp of web standards that was allowing me to deliver tight semantic code, bandwidth saving CSS, and accessible sites to all. So why have I (and if you want to admit to it too, now is the time to do so) ignored one of the most obvious premises of usability?

First, a little history

From 2000 onwards all the leading browser makers adopted a default font size of 16 pixels (px). Before this time, default font sizes did not match up across operating systems, causing havoc with designers’ patience and sanity. So the introduction of a true standard default was hailed as a pretty good day for the web. Developers felt this would help solve the problem of delivering consistent font sizes across platforms, and there was much rejoicing by all.

Unfortunately it didn’t really work out that way. The 16px default font size is rather large. Not huge, but just a little too large for comfortable reading on an average resolution monitor. Macintosh users in particular were used to a smaller default. They took one glance at the new size and promptly switched their default back to the 12px they were used to seeing. All that good work, all that exciting promise: undone in three clicks of a mouse.

Meanwhile, web designers where looking at their pages and thinking, hmm… that’s a rather large font size for body text; I think I’ll drop it by about 10%.

With both groups (designers and users) lowering the font sizes, the result was inconsistency, confusion, illegible text, and a whole mess as big as the one we started with in the first place.

What’s the solution?

The true solution is obvious, surely? Either users or designers stop lowering default font sizes. Users shouldn’t have to do that of course. They want control over their web pages; to see them at a size that is comfortable (or indeed necessary for visually impaired users), without having to adjust the font size for every different site they come across.

So that leaves us. Designers. Simple really.

Every accessibility and usability rule in the book tells us to let the user control the experience. If they want to lower their default size, then let them. But don’t do it for them!

Right. Who wants to change?

The short answer to that is: no one.

I have spent the last 3 months developing this site, UsableType. And after not much soul searching and discussion, I decided to lower font sizes from the default size. Why did I do this?

For one reason: the site looked rubbish in every browser I tested on; and I wanted the site to look good.

That is the logic behind nearly every designers choice to lower body font sizes. It just doesn’t look good with line after line of the default font size. Accessiblity and usability can go hang… it just doesn’t look good!

Dirk Knemeyer recently published an article for Digital Web Magazine, called The End of Usability Culture, in which he claimed that the age of usability driven design was over. Although his argument was based on more general principals of design, in terms of font sizing his point is demonstrated very well indeed. Designers are reducing the level of usability in exchange for increased typographical control. In the same way as some designers set font sizes in pixels (despite their inaccessiblity in IE/Win), the bulk of desingers have decided that the pros of font size control outweigh the cons of reduced accessiblity.

A new default size

Downsized body text is so common on the web these days that we have gone too far to ever correct the problem. Users expect to see their default font size looking smaller than it is set in their browsers – whether they aware of the fact or not. Designers have forced a new default themselves by being so adamant that they want it smaller. It is now the norm for text to be set at anywhere between 70% and 80% for the <body> element and then other font sizes for title, etc, scaled from that base size.

As for users that want to see text larger, they will have figured out how to change the default on their machine and are probably browsing away happily as we speak. So it’s not all bad news, and although it is still not an ideal situation, the issue has settled a lot over the last few years. Designers have defninitely beaten the usability purists over the issue of font sizes. It is rare that you come across sites with default sized body text, and what’s more, my use of text-zoom is deployed only very late at night to reduce eye strain – so we must be getting something right!

Whether the purists like it or not, downsized body text is here to stay, and as designers we should no longer feel ashamed about our wish to present text at the size we want.

Times New Roman is one of the most widely used typefaces in the world, as well as one of the most recognisable. The standard default font in nearly all browsers in living memory is Times, and for years when reading content on the web it was the typeface we were stuck with.

Until the <font> tag was introduced by browser vendors in 1995 there was no way of changing the font family except by changing the default font in your browser’s settings—which people rarely did anyway, as Times was seen as the obvious choice.

However, as the excitement of designating fonts on the web became more widespread—even becoming a W3C recommendation in 1997—designers rebuked Times fairly resolutely, and it became the emblem of early 1990’s web pages. The forgotten font of the web.

Typography Times

With the birth of CSS, web typography was given a new lease of life. Suddenly we had control of line-height (leading), letter-spacing, and word-spacing. But Times missed out on most of these revelations because hardly anyone was using it. At the same time, a school of thought that regarded sans-serif typefaces to be more readable on the screen, struck another blow to Times’s hope of a comeback.

Times are changing

In case you hadn’t noticed, this article uses the Times New Roman typeface. That might surprise you if you are only familiar with it in its un-styled form—the 1990’s emblem. I think this text is really rather pretty.

Let’s have a look at how we got from the plain, rather amateur look of the un-styled Times, to what you are reading now. Here is an example of your bog standard, rather embarrassing, default Times.

With that last addition we have the classic Times New Roman typeface looking as good as new, with the finished rule is as follows.

It would be great to see a resurgence of Times being used in 2005. Next time you need a serif font for the screen, instead of just typing Georgia without thinking, have a look at Times. Have a play with the CSS, and let’s see if we can restore it to its former glory.