Laws of the Letter
The columns of text which you read in your favorite newspapers or magazines have been refined very carefully over the years. They allows words to be crammed together with maximum flexibility on a crowded page of distracting items, all printed on low-quality paper stock - and yet still be readable.
By comparison, the text-based Web page is a pretty coarse item, with a few basic rules and limits set but most of the design development still ahead of it.
Screen Times
Start with the individual letters. If you've been around computers very long - indeed, if you've ever looked at the DOS prompt on a PC - you'll know that the fonts (or families of letterforms) you see on your Windows or Apple Web browser are relatively sophisticated. Most browsers automatically display their text in a font called Times Roman, originally developed by the newspaper whose name it bears and very common in newspapers today.
Times Roman gives every Web page designer a head start: it reads better than just about any other font around, partly because its letters blend together to turn words into coherent and distinctive shapes. But then the designer runs into the natural, ghastly limitations of an on-line medium. Even a newspaper reproduces letter in quite fine detail - well over 300 "dots per inch" (dpi), the standard of a good-quality inkjet printer. Computer screens, on the other hand, typically reproduce at little better than 100 dots per inch, depending on how their users set them. That's the equivalent of trying to print text on a paper towel. Not surprisingly, people find browser text hard to read;Sun's Jakob Neilsen (see the link below) says research shows screen reading is 25 per cent slower.
Technology will solve many of these problems, given time. But right now, this text display problem makes it much, much harder to get your message across. According to one US consultant, Peter Moon, putting text information onto today's computer screens destroys about four-fifths of its value: compared to print, people are only 20 per cent as likely to retain it in their short-term memory.
Out of your hands
The limitations don't end with the individual letters. Type text into a plain old Web page, and it will pour right across the viewer's screen from one side to the other. The Webheads of prehistory, circa 1995, delighted too much in the novelty of the medium to worry about such subtleties. But in fact plenty of research suggests the ideal line of text contains between six and twelve words, far less than fit across the average browser screen. The human eye simply doesn't react well to sweeping back across a relatively large distance at the end of every line.
Worse still, many browsers use as their default background a grey tone which makes the text even harder to read.
Worst of all, you can't actually know exactly what any given viewer is seeing. People can change their monitor, their text color, their background color, their font and font size. Somewhere out there are people viewing your page in pink letters on a mid-green background, using a 30-point font modelled after children's handwriting. And you can't stop them.
Indeed, if you're reading the Web, there's something to be said for setting your background to a light beige, pushing your browser font size on maximum and sitting back from your computer with your big toe on the spacebar to scroll down the page. But the reality is that many Web site visitors don't know how to change their default font size or color, don't realise the space bar scrolls them down the page and don't surf the Web barefoot. You could always post instructions - but 99.9 per cent of your audience would ignore them.
Plan B
Which brings us to plan B - Lighthouse's recommendations for presenting text in Web pages.
 Set your text in a table about 400 pixels wide. That should give your viewers the ideal six-to-twelve words per line at the most common browser settings, but will be narrow enough to be viewed in even the narrowest Apple Macintosh screen. The text you're reading is set in a table 390 pixels wide.
Cut your text into chunks. Try to keep paragraphs to four sentences or less. But contrary to the oft-repeated view of commentators like Jakob Neilsen (see link below), you don't need to keep individual pages short; a series of short Web pages can be irritating both to load and to print (c|net is a regular offender).
Before you tell it, tell them what it is you're telling 'em. Use headings and summaries wherever possible. On long pages, you may want to list a series of topics and even let people jump to specific points within the page.
Make sure your pages can be printed on most common set-ups. Many people print Web pages to read them later. Sadly, that may mean avoiding specifying white text on a dark background, which has much to recommend it but which simply doesn't print at all on some systems. (Print designers have usually avoided white-on-dark because it usually prints badly on a press. But that problem disappears on the Web. Photographs also present better on a dark background. And it doesn't dazzle viewers. There's an argument it's superior to black on white.)
Don't specify different fonts or font sizes unless you have very good reason. If you want a more modern look to a piece of text, you can try specifying the alternate sans serif fonts Arial and Helvetica which are installed on most Windows and Apple machines, using the code <FONT FACE="Arial,Helvetica">. (Sans serif fonts lack the little "hooks" on the end of letters.) Outside this specification, tread cautiously.
Stick with the standard Web paragraph style. Some Web designers, notably David Siegel, argue you should avoid using normal Web-style paragraph settings, which create a blank line between each paragraph. But the blank lines, although not standard in conventional print layout, actually seems to serve a useful function on the screen. I've been writing on screens for more than a decade, and I discovered very early that a blank line between pars made life easier for me and for most other readers of my text.
Don't feel bound by any of the above rules. Take a look at sites such as Suck (see the link below) where they end each line just where they want to and place a blank line (called "leading" in print) between each line of text. Feel free to experiment. Abd mail Lighthouse with your thoughts on all these recommendations.
Slate uses a 334-pixel table width and staggered narrow columns.
Salon specifies a large font size.
Suck simply turns every line into a paragraph for a unique look (hit the "view source" button on your browser to see how it's done).
The Richmond Review (hopelessly unhip, obviously - don't they know your site name can't run to more than five letters?) puts text in a table covering about 80 per cent of the page width.
Fray (see, these guys know the rules) produces more innovations with text than any other site around.
This Fray page puts every second par in a list format for a unique look ...
... while this Fray essay shows that if your message is short enough, you can say it with pictures (including pictures of text).
Hotwired (it's OK, parent magazine Wired only boasts five letters) also plays with typography in interesting if not always sucessful ways, including this weird thing and this table where the paragraph alignments jump around. And you'll never see a grey background on this site - or a white one, for that matter.
officina bohemia takes an anorexic approach to text columns.
And designTANK is simply classy.
 
David Siegel argues for Times Roman and good typography and against <p> tags in one of the Web's best design sites.
William Calvin's Reading in Bed shows a world-class neurophysiologist turning his hand to Web design, with whimsical style and cogent arguments on tables, font sizes, read-ahead buffering and the evils of double-column layout.
David Siegel's tables guide will help you use this device to position your text.
Web Page Design For Designers explores text presentation in depth and elegant style.
Jakob Neilsen advises you to split long text articles ...
... and Michael Hoffman explains why he's wrong.
Dex explores the problem of screen reading, and is a site generally worth exploring.
And typoGRAPHIC digs into letterforms.
|
