Wednesday 15 May 2002

Compromising on font sizes

Professor Salo handed off the font-size problem to Zeldman and Todd Fahrner. For a long time I’ve followed Zeldman’s maxim—give me pixels or give me death—by specifying my body text as Verdana 12px, even though this means that IE users cannot alter the font size (Opera 6 and Netscape 6 have a zoom control that overcomes this limitation).

In a comment on my post about not supporting Netscape 4, Steven Vore wrote that “a properly-designed site will allow you to change font sizes all you’d like - CSS or not.”

Why have I committed this sin against accessibility? In order to enhance legibility by having a fixed line length. The Australian Government Style Manual cautions against long lines:

Long lines are tiring to read in large blocks; they are also difficult to read without missing a line occasionally or reading the same line twice (called “doubling”).

Every piece of research I’ve encountered concurs with this advice, usually recommending a line length of 50 to 70 characters or 10-12 words per line. It’s for that reason that I prefer not to use a fluid layout, where the line length changes with the display resolution, although I accept that a fluid layout often looks more elegant.

When I was redesigning the templates and style sheets for this MT-based blog, I asked Allan Moult to check the test site on his Macintosh. It looks fine in IE5 and NN6.2, he told me, adding: “Set your main text narrower.” I thought it was already narrow, but he was right.

Then this morning I read the Todd Fahrner article, Size Matters: Making Font Size Keywords Work. Though Dorothea describes Fahrner’s system as “more verbose, less beginner- and maintainer-friendly,” I think it might be just what I’ve been looking for. Or, alternatively, merely a different compromise.

It would never have occurred to me that you could use Tantek Çelik’s Box Model Hack to fix the keywords bug in IEWin4/5. But I already use the Çelik technique to ensure that the CSS boxes on this site display consistently in IE 5/6, Opera 6, Netscape 6.2, and Mozilla RC1. So why not try it out on the font-size problem? Although it means abandoning my fixed line length rule and risking the ire of Allan Moult. (But he’s all the way down in Tasmania and doesn’t pose too great a threat.)

Most of the sites I visit that allow the visitor control over the font-size look best with the text in IE set to Smaller or Medium. I guess I’ll have to experiment to see which of the font size keywords I should specify in my style sheet. Or I might wait to see if Prof. Salo runs into strife with relative sizing using ex and em units and is forced to figure out font size keywords. That way she gets to do all the work.



Zeldman still rules on this one.

But, as long as your text stays within the 40-50 characters per line 'rule' I'll be happy.

And consider yourself lucky that Bass Strait keeps me from personally enforcing it.

Allan 'Tassie Devil' Moult
Head of Design Police
Blog U

Posted by: Allan Moult on 16 May 2002 at 08:29 AM

I followed Zeldman's pixel advice for a while, but had to change because of the scaling issue - 12px was large on one desktop, unreadably small on another. Now I use percentage scaling, which works well using different browsers, platforms and resolutions - though I haven't tested all. (I've used it to make Geneva/Verdana a little smaller than the default, which looks a little goofy - these fonts are designed to be readable at smaller sizes, so it makes sense that the 'regular' size should be a little smaller than the regular Times font)

The trick is to specify the font size at a block level - not at the BODY level, or you'll find nested elements become recursively smaller in certain browsers.

Posted by: zem on 16 May 2002 at 01:52 PM

"Every piece of research I've encountered...usually recommending a line length of 50 to 70 characters or 10-12 words per line".

Here's the thing, though, Jonathon: some of your readers - like me - don't conform to research findings. Conditioned by years of reading newspapers on trains, I need to read stuff in narrow columns. And sometimes I want what I'm reading in a squished up bit at the side of the screen while I compare its content to something else on the screen - your site is currently occupying 50% of my vertical real estate which is *way* too much.

Let the reader decide.

(BTW I'm trying to figure this out with a combination of Phoenix, Opera 6/Win and IE5.5/Win and it's driving me nuts...)

Posted by: Rich on 22 October 2002 at 06:59 AM

Interestingly, Rich, I've rethought this and will be switching to a fluid layout within the next few weeks. I'll keep your comments in mind when I'm doing the redesign.

Posted by: Jonathon Delacour on 22 October 2002 at 07:51 AM

This discussion is now closed. My thanks to everyone who contributed.

© Copyright 2002-2003 Jonathon Delacour