Audience Dialogue

Reading from a computer screen

[This page, which was first written in 1997, is now hopelessly out of date - almost ancient Egyptian. Some day I'll rewrite it, but in the meantime I'll make just a few changes. A lot has changed since 1997 - we now have cascading stylesheets, anti-aliased type, and e-book readers - but I still don't see a lot of people reading long text from computer screens. And most Web pages are less readable now than they were in 1997.]


This site is, above all, text. You'll find the odd picture, the odd map, the odd decorative graphic, but mostly it's writing. You (I hope) like to read. But how do you prefer to read Web pages? Many people print them out first, then read the printout. That can be tedious. You don't have much control over formatting, the lines are often too wide, and lines can be split vertically in two between pages. And printing is so s-l-o-w.

To improve the layout, you can save a web page, import it into a word processor that recognizes HTML, change the format, and print it out with the word processor. Quite doable - but would you bother?

Here's my contention: it can be easy to read off the screen - if all the conditions are right. But the right conditions for reading off a monitor screen are different from the right conditions for reading print. There are lots of reasons for this...

Readability and legibility

Quite a lot of research has been done on readability, and many of the findings seem contradictory. This puzzled me at first, but then I realized that readability and legibility are slightly different. Most people use these terms interchangeably, but I now distinguish legibility as referring to only a few letters or words, while readability refers to a whole text.

A lot of the published research was done for highway planners. If you're driving at high speed on a freeway in bad weather, you need to be able to read the sign marking your exit. So the shape and size of the letters, and the contrast with the background colour are very important. The best contrast, in most lighting conditions, turns out to be black letters on a yellow background. The same probably applies to short messages on computer screens, such as menu headings. This is what I call legibility.

Readability, on the other hand, is more important when you're reading a book or a long article. The art of readability is to avoid distracting the reader in any way, so that the text comes through without interference.

The ideal I'm working towards here, is that when everything is set up well, you stop noticing the screen, the font, the time, and your surroundings: you become totally drawn in to the story (Dromeworld, for example), oblivious of the fact that you have to get up early tomorrow morning, that the dog has thrown up on the carpet beside you, and that somebody's shouting in your ear that the house is on fire. If all this is happening, and you haven't noticed - that's readability!

Here are my suggestions for improving screen readability. These fall into three groups, with increasing levels of difficulty:
(1) Adjusting your environment
(2) Adjusting your browser software
(3) Improving web page design.

(1) ADJUSTING YOUR ENVIRONMENT

Does your monitor have a windscreen wiper?

No? Perhaps it should. The static electricity in screens attracts dust. Improve your screen's readability by attacking it with a damp cloth every now and again. Check it when it's switched off - it's hard to see dust if the screen is lit.

Eliminate reflections

I'm amazed how many people put up with reflections on their screens - the lights overhead, the window behind them, and so on. "How can you put up with those reflections?" I ask. "What reflections?" they reply.

Try this experiment. Switch your monitor off (not the computer, it'll take forever to start up again, specially if you're running a lightning-fast modern operating system such as the latest version of WIndows). Sit where you normally sit, and look at the black screen. Do you see reflections on it? If so, they've been slowly driving you crazy - and you didn't even know it.

You could try moving the monitor - pointing the screen downwards a little, if the reflection is from overhead. But if the reflection is coming through a window, and it's daytime, you'd need to move the monitor so that light from outside doesn't reflect off its screen - or perhaps get one of those ugly gauze screen filters to go in front of it. If you're a large bird (perhaps a vulture or eagle), spread your wings a little, to eliminate reflections from a window behind you. If you're a pervert, fling open your raincoat. Or you could do your screenreading at night.

Adjust the height of your head

I often see monitors set far too high, so that the users have to look up at them. This makes for uncomfortable reading. What you need to do is raise your head, so that it's a little higher than the monitor.

A surprising number of people don't know which type of head they have. There are two basic types, each with a different means of adjustment. If you have an early-model head (pre-1965) it will probably be a screwdown model. Later heads are normally gas-lift. Feel the right side of your neck. Is there a small metal lever protruding from it, tipped in black plastic? If so, pull it towards you, and your head will shoot up. (Warning: never do this outdoors! If in a limestone cave, be sure to wear an approved safety helmet.)

If you have the screwdown type of head, adjustment is slower, but there's less danger of losing it. To adjust the height, have a friend stand on a chair nearby and hold your head firmly, while you dance in a circle - clockwise to raise it, and anti-clockwise to lower it (or vice versa if you come from a country whose name does not contain the letter A).

A small difference in height can make a big difference in comfort. But actually, the height is irrelevant : what makes the difference is the angle you hold your neck at. The greater the distance between your eyes and the screen, the lower down the monitor needs to be.

Eliminate distractions

How can you read - either from the screen or a book - when people are arguing around you, constantly interrupting, begging for money or kisses, pulling one another's hair while screaming loudly, wanting you to sign autographs, twisting your head off, and creating wild distractions of all kinds?

That's why, for a lot of people, late at night is the best time to read.

You needn't pretend your computer is in an office

Question: When you're reading a novel do you:
    (a) sit upright at a desk, or
    (b) lie on the floor with your legs up the wall, holding the book over your head?
My guess: a lot more people would answer (b) than (a). So why should a computer be different? If it makes you more comfortable, hang your monitor from the ceiling with the screen facing down (thus solving the dust and reflection problems) and lie underneath it.

Here's something else a surprising number of people don't know: to scroll down to the next screen with Netscape or Internet Explorer, there's no need to click the mouse on the right-hand scroll bar: just press the space bar or the PigDown key. Very handy - you can use your big toe for moving on to the next screen.

Use a laptop

It's often easier to read from the screen of a laptop than from a desk-based computer. This isn't because the laptop screens are better (they're usually worse, unless you have a very expensive laptop), but because they're so adjustable, and there's no glare, and they don't flicker. You can easily move the screen up and down and the computer from side to side, adjusting the angle now and again, so you don't get tired from sitting in exactly the same spot for hours. [May 2006: bad news - the new Apple laptops are going to have shiny screens, copying most recent Windows laptops in poor design.]

A laptop is so much more like a book that it transforms screenreading from work to relaxation. But of course, if your laptop has to be attached to a phone line, you lose flexibility. It's often more convenient to download a file from the Web onto your own hard disk, then read it after you've disconnected. See below for exactly how to do this.

(2) ADJUSTING YOUR BROWSER SETTINGS

Fiddle the height of the screen window

If you find you're consistently seeing half-lines at the bottom of the screen, you can fix this by making the height of the window a tiny bit lower or higher.
The number of lines of text you see in the browser window depends on...

Regardless of these settings, as long as they stay constant, you can make screenreading easier by grabbing that right-hand bottom corner handle with the mouse, and moving it up or down a little (like a holland blind, rather than a window), till you don't get half-letters visible at the top or bottom of the text. Of course this is only practical if you are reading a long page and all its lines are the same height. This will work with most of my pages, apart from those (such as poetry) with interspersed graphics.

Adjust your viewing options

There are several kinds of adjustment you can make in your browser program, to improve readability. Which browser software are you using right now?

From these Options and Preferences menus, you can:

Adjust the screen background colour

Other things being equal, the more contrast between letters and background, the easier it is to read. But if you're in a room with fluorescent lights, and the screen background is white, and the monitor is a cheap one, there can be a distracting flicker from the screen. The solution (apart from replacing your monitor or turning off the fluorescent lights) is to have an off-white background. Not grey (the default with many browsers) because that's too much like the black of the letters.

If you haven't overridden background colours in your browser, you'll find a lot of my pages have a pale buff or pale blue background. These match the graphics well, and I find both colours untiring. If you don't like my choice, override it with another colour. White's OK, if you have a high-quality monitor and no fluorescent lights overhead. The colours that work best are pale and cool. With the warmer colours, like yellow and pink, a lot of people seem to find them irritating. Cooler colours seem to recede, and to be less noticeable.

Choose an easy-to-read screen font

The default font for most browsers is Times. Though this looks very crisp when printed, it's usually one of the most unreadable screen fonts - specially in small sizes, or italicized, specially on a grey background.

An important aspect of readability is the ratio between line height and line width. If you find, when you start reading a new line, that you tend to either read the same line again, or skip one, it's a sign that the line is too low in relation to its height. To solve this problem, set the type to a larger size, or make the browser window narrower. The ideal line-width is about 60 characters. Most high-quality printed books use this as a line-width. Cheap paperbacks of long books often stretch to 70 characters per line. But many unsuspecting people have their browsers set to read about 100 characters per line. Too difficult!

I've made a study of the readability of computer fonts, and have decided that the most readable font which is widely available is Trebuchet. On most of my pages, I specify this as the main font. So if Trebuchet is available on your computer, and you haven't overridden it, this is what you're reading now.

This image is a picture of some Trebuchet text - so even if you don't have the font on your computer, you can see how it looks:

You can see another example (and also download the font) at Microsoft's typography site. Trebuchet comes in Windows and Macintosh flavours of Truetype.

Microsoft, which has been researching readability, recommends several other fonts (also downloadable from their site), such as Verdana and Georgia. Though these are nice-looking fonts, they leave too little space betwen successive lines. I contend that the Microsoft people have it wrong, because they don't distinguish between readability and legibility.

Yes, Verdana and Georgia have high legibility. For a given type size, you can read them a long way away. They'd be ideal for freeway signs. But for reading large chunks of text, they're too compressed vertically, and uncomfortable horizontally: Georgia crams its letters too closely together, while Verdana stretches them too far apart. Tahoma, a sort of horizontally-squeezed equivalent of Verdana, is a bit easier to read.

In most browser software you can theoretically use CSS (Cascading Style Sheets). It's a pity these don't work properly, specially in older browsers, because they can increase the vertical spacing between lines. I've been experimenting with CSS, and have found that 130% vertical spacing seems most readable. So I'm doing all my new text pages with this spacing (e.g. The Underground Journey of Niels Klim). The worst that can happen (I think) is that you see it in single spacing - if you have an old browser, or you have disabled CSS, or your browser doesn't display CSS properly. (If you have some other problem, please email me and let me know - and tell me what browser version and what type of operating system you're using. There are an unbelievable number of browser versions, and they all work a little differently.)

Another factor with a screen font is the thickness of the strokes that make up each letter. Some fonts (such as Arial) have very thin strokes, only one pixel wide in text sizes. This can make it hard to distinguish between letters. In Arial, you don't know that Ill1 is short for Illustration number 1. An advantage of Trebuchet is that all the letters look different - for example, the lower-case L has a little curve at the foot, so you can tell it apart from a capital I.

The default font for monospaced type is usually Courier. This can be very difficult to read, because the strokes are so thin. Microsoft has rescued you, with its font Andale (formerly Monotype.com) - downloadable from the same site as Trebuchet. Some e-books (Gutenberg?) are presented in monospaced (typewriter-style) text, which is hard to read. Solution: with Firefox (but not IE) you can tell it to display a monospaced font as a proportional-width one, for easier reading. The only disadvantage is that monospaced tables (now rare) are a little wavy.

Another way of improving the readability of fonts is choosing the best display size. If your screen resolution is set to 1048 by 784 pixels (currently the commonest for visitors to this site) the default type size in your normal browser may be a little too small for comfort. Setting your default size one step larger can make greatly improve readability, because the letters become more distinct on the screen. You lose a few lines of text, though. The trade-off depends on your eyesight, your screen size, and screen resolution. With larger type you can sit further back. A lot of people find that more comfortable for reading, specially if they're over 40 and getting a bit long-sighted.

Adjust indentation

A lot of Web pages have the text stretching to the margins on both sides of the screen - as in this paragraph. Even if this doesn't exceed the 70-character limit for readability - e.g. by using large type - it's tiring to have to keep flicking your eyes right and left, and having to work out where the margins stop and the letters start. On this site, all the paragraphs are indented (except this one, so you can see what you're missing). This is not a setting you, as a reader, can easily control. ( But see below, on editing HTML files for readability.)

Serif or sans-serif fonts?

Serifs are the thickened ends of strokes at the tops and bottoms of letters in some fonts (like this).

Sans-serif fonts are those without serifs (like this).

The old research on readability found that serif fonts, such as Times, were on the whole easier to read than sans-serif fonts, such as Helvetica or Arial. But the researchers suggested that this could be because people were more used to reading serif fonts. Things could be different these days, with a lot more sans-serif around. Highway signs normally use sans-serif fonts, and a vast amount of research has been done on those.

The big problem with sans-serif fonts is when every letter matters - e.g. when you're copying or typing the URL of a web page. The lower case letter l is indistinguishable from a number 1 in most sans-serif fonts. If you've ever typed in a wrong URL because your browser displays them in Arial, you'll understand the problem. But when you're reading ordinary words or numbers, and don't need to act on them, sans-serif is fine.

Deal severely with intrusions

Things flashing on the screen drive me crazy. You won't find any of those on this site. I've found the best weapon against flashing ads is the ESC key : hit that, and the flashing usually stops. If it doesn't, disabling Flash usually helps.

A related problem, which you often see on sites such as Geocities, is nuisance windows which keep popping up and hiding the bit you want to read. These are usually ads, for things you could never buy even if you wanted to. To get rid of these in a hurry (if you're a Windows user), a little finger-practice is handy. Put your right thumb on the ALT key, then hit F4 with your right forefinger. Practice this a few times, and those windows will go away before you can see what they're trying to advertise. This is normally quicker than clicking the close box with the mouse. (2004: Firefox and Opera let you eliminate all popup windows.)

(Why did Microsoft have to choose this weird combination of keys to close a window? Why couldn't they have picked, say, F4 by itself? Surely the most common actions should get the easiest key-combinations. With a Mac it's easier: windows are closed by hitting the squiggle key and W together. Still two keys, but not such a finger-stretch.

Give your modem a rest

If you're paying for internet access by the hour, or you don't like to tie up your phone line for long periods, try saving web pages with lots of text onto your hard disk. This is another thing a lot of people seem not to know - that you can use your browser program without having a modem online. For example, you could save this file to your hard disk right now. Use the menu command: File / Save as and save it as scread.html ( I suggest you select the desktop to save it in, so you can easily find it again. Otherwise, Windows is likely to lose it for you.)

When you've saved a web page, you can read it at your leisure by starting up your browser program and instead of typing in the usual finger-twisting jumble of letters, i.e. http://www.audiencedialogue.org/scread.html
you can just double-click the icon on your desktop.

You can do this with any web page, but you may lose the graphics when rereading it. Versions 5 and 6 of Internet Explorer save a page as a whole folder (under File / Save As... ) so you don't lose the graphics. To open it from the desktop you have to open the folder then click on the file with the e-like icon.

(3) IMPROVING WEB PAGE DESIGN

This section is aimed more at web page designers and programmers than ordinary readers. But anybody can tinker with HTML....

Repairing Decrepit Web Pages: A Backyard Tinkerer's Guide

We've tried hard to make these pages as readable as possible on the screen. But there are some things we can't do on your computer: only you can adjust your browser settings, or download a font. But what if you want to read another web page from the screen, and the author hasn't made it easy for you? Don't give up. You can change the source file.

We shan't try to teach you HTML - hundreds of web sites do that (one of our favourites is Sizzling Jalfrezi. The message here: it's easy to change a web page to make it more readable. There are just three simple HTML commands you need to know for this: DIR, FONT FACE, and FONT COLOR. Here's what you do:

(a) Save the offending page to your hard disk.

(b) Edit the version you've saved to your own disk, changing the formatting to make the page more readable. You don't need to exit from your browser program - just minimize it, and open up Notepad, Simple Text, or a similar editor.

Another way to make a page more readable is to create your own stylesheet (or, easier, copy one you like), and apply that to difficult web pages. Most browsers have an option "Use my stylesheet". Sometimes this works well, sometimes it totally messes up the page.

To make a nasty page look as straightforward as this one, you can create a CSS file, and make the browser use it instead of the file you see. ("But how?" you ask. OK: some day I'll provide an example CSS file for downloading.) < !-- or are there special browsers that do this - Lynx? -->

(c) When you've finished changing the source file, save it, hop back to your browser, and reread the file - but from your hard disk, not directly from the web. You don't even need to have the modem switched on, so if you're paying by the hour you'll save money.

This sounds like a lot of messing around, but with practice, the whole process can be done in a minute - well worth it if you have a long file, or one that you're going to read several times.

A warning: sometimes this doesn't work too well on pages with frames, or complex tables, or graphics to the left or right of the text - specially with Internet Explorer. But if you muck things up, just reload the original page from the web.

Another problem I've often encountered is a page that looks OK on screen, but when you print it, the rightmost word or so is missing. I suspect this is because the browser software is written in the USA and Americans don't know the rest of the world uses A4 size paper, which is slightly narrower than US Letter paper. The simplest solution I've found so far is to use Mozilla or a related browser - Firefox, Camino, or version 6 or higher of Netscape. Visit www.mozilla.org to download such software. The Opera works fine too, because it's of European origin.

Avoid justification

Justification means lining up the right-hand-side of each line, as in most books. It looks neat, but the evidence is that it slows your reading speed about 10%. Did you ever wonder how printers get all the lines to match up exactly? They cheat, of course, by varying the width of the spaces between words. As long as the ends of the lines aren't too ragged (because anti-interdemoninationalisticallyantidisestablishmentarianistic osseocarnisanguineoviscericartilaginonervomedullaryhonorificabilitudinatatibusting floccinaucinihilipilifications have been invoked) unjustified lines are easier to read.

Why did I even mention this, when so few web pages use justified type? My underlying motivation (as you probably guessed) was to protest about antipolysyllablism. If you're a phillongitudinoverbalist, check out some names of the Triboldies.)

The advantages of phrase spacing

BACKINTHEMIDDLEAGESTHEMONKSWHOCOPIEDOUTMANUSCRIPTSDIDITLIKETHIS. THEYHADTOSAVEVELLUMANDTHEYHADPLENTYOFTIMETOWORKOUTWHEREWORDSENDED.

Centuries later, when printing was invented, punctuation was introduced. It made books a lot easier to read than the old manuscripts. Perhaps, when moving from the printed page to monitor screens, we need to rethink punctuation.

The U.S. Navy has been doing experiments on readability,   and has found that slightly increasing the spacing between phrases can make documents more quickly understood.   Leaving extra spaces after full stops,   colons,   semi-colons,   and commas seems to be very effective.   Unfortunately this is not easy to do with HTML,   which treats all spaces as the same.   This is not a user-adjustable option ;   it would have to be done by the authors of web pages.   I've done it manually in this paragraph,   so that you can see what it looks like.   It wouldn't be too hard to do on a web page,   but I find it rather awkward to read.

Use blank lines to end paragraphs

Printed books use a very understated way of changing paragraphs: each new paragraph begins with a small indentation, called an "em", because it's usually the width of a capital M. On a computer screen, this is probably too subtle. The style used by typists (as opposed to typesetters) is clearer: to leave a blank line between paragraphs.

Though leaving blank lines between paragraphs improves readability, to me it also has another effect on readers. A blank line is far more emphatic than a one-em indentation, so this type of paragraph is a more abrupt change. I wouldn't say it changes the meaning of the text, but it can change the emphasis. This is not something you (as a reader) can change, but you should know about it. If the paragraphs in a text you are reading on screen seem too abrupt, it may be that the text was written with small indentations in mind. This can have a particularly strong effect when characters are speaking to each other, and paragraphs are very short. You can mentally adjust to this, I find - as long as you understand the reasons for this type of layout.

Use a book-reading program instead of a browser

I've been hoping to find a really good book-reading program, not for use online. It would be similar to a browser in some ways, but much smaller and quicker to load: only a few megabytes in file size. It would be halfway between a browser and a read-only word processor. Users couldn't change the text, but they could very easily...

For years, I've had my eye out for such a program, and have fruitlessly searched shareware archives. (I now refuse to buy shrink- wrapped commercial programs - I've been disappointed too often by software I haven't had a chance to try.) Acrobat Reader, despite its claims, is no good for this - its files are optimized for printing, but what looks good on paper often doesn't look good on a screen - and its only user control is magnification.

More...

If you'd like to read some more about screen readability, here are a few links. Sometimes a bit dry, but unflinchingly objective.
Visual Design Basics
Readability of fonts in the Windows environment
Readability of Websites
Be kind to your eyes
Jacket magazine: design links
A psychology thesis on screen readability
Muter & Maurutto, 1991: experiments on reading and skimming.
Why style sheets are harmful, by Jukka Korpela. An interesting paper about the struggle between web designers and users for control of how a web page looks to the user: "design integrity" battles readability. [Not working March 2007] A alphabetically ordered contents page of usability studies from the University of Wichita in the US - head for the letter R and see their studies of Reading Online - lots of useful material here, though sometimes their emphasis on statistical significance testing magnifies a trivial difference - so Times New Roman was 2% more legible than Arial! Big deal!

Argument

I welcome correspondence - even argument - on this matter. Have you discovered a more readable type than Trebuchet? Have you spotted a mistake I made earlier? (It was deliberate, of course!) Have you found any other guerilla tricks for improving unreadable Web pages? And do you know of a book-reading program, like the one I described? Please let me know!