What constitutes good text layout?

[kingman]

I was hoping to start a dialogue on how to lay text out properly for a web site. I see so many things that really make text unreadable, that I thought we could get some good advice and tips listed here.

Here is one bit of advice that I would offer to start the topic rolling.

Most web pages are difficult to read because they violate a fundamental rule of book and magazine typography: the lines of text on most web pages are far too long for easy reading. Magazine and book columns are narrow for physiological reasons. At normal reading distances the eye's span of acute focus is only about three inches wide, so designers try to keep dense passages of text in columns not much wider than that comfortable eye span. Wider lines of text require readers to move their heads slightly or strain their eye muscles to track over the long lines. Readability suffers because on the long trip back to the left margin the reader may lose track of the next line.

What do you think? Do you have pet peeves about how people lay the text out on their websites? Any words of wisdom to offer?

[skyrocket]

Use padding (especially left + right margin) to get clean white space for better readability. Don't use justified text. Keep to 10-12 words per line to create easily scanable blocks of text. There's my tips off the top of my head.

[scallihan]

Originally Posted by kingman

I was hoping to start a dialogue on how to lay text out properly for a web site. I see so many things that really make text unreadable, that I thought we could get some good advice and tips listed here.

Here is one bit of advice that I would offer to start the topic rolling.

Most web pages are difficult to read because they violate a fundamental rule of book and magazine typography: the lines of text on most web pages are far too long for easy reading. Magazine and book columns are narrow for physiological reasons. At normal reading distances the eye's span of acute focus is only about three inches wide, so designers try to keep dense passages of text in columns not much wider than that comfortable eye span. Wider lines of text require readers to move their heads slightly or strain their eye muscles to track over the long lines. Readability suffers because on the long trip back to the left margin the reader may lose track of the next line.

What do you think? Do you have pet peeves about how people lay the text out on their websites? Any words of wisdom to offer?

Hard to lock down a line-length, unless you're doing a pixel-perfect layout. I prefer to let the page expand to fill available space, which means that the line-length is determined by the user, not by me (by the width of their browser's viewport).

One thing I like to do is make sure that my main content column isn't set to be wider than the width of browsers' viewports at 800x600, so users at that resolution don't have to scroll back and forth to read the content. Others might want to do this for 640x480.

Another advantage of columnar design is that it lets you display multiple article headings, for instance, above the fold. A significant number of visitors will leave your page, without scrolling down, if they don't see what they're looking for at their first look.

[Webnauts]

Readbility guidelines: http://workingweb.com.au/training/st...eadability.php

Readability Formulas: http://www.humanfactors.com/downloads/jun02.asp

Readbility Test Tool: http://www.juicystudio.com/fog/

A Comparison of Popular Online Fonts: Which is Best and When? http://psychology.wichita.edu/surl/u...ws/3S/font.htm

How should text be presented within a website? http://psychology.wichita.edu/optimalweb/text.htm

So, What Size and Type of Font Should I Use on My Website? http://psychology.wichita.edu/surl/u...ws/2S/font.htm


Are your audience older people? Then read here:

Determining the Best Online Font for Older Adults http://psychology.wichita.edu/surl/u.../3W/fontSR.htm


Or are your audience children? Then read here:

Which Fonts Do Children Prefer to Read Online? http://psychology.wichita.edu/surl/u.../3W/fontJR.htm


And at last:

Screen Fonts
http://www.humanfactors.com/download...sp#screenfonts

Visual accessibility of the text:
http://www.techdis.ac.uk/seven/papers/dyslexia3.html

W3C/WAI Guideline 14. Ensure that documents are clear and simple: http://www.w3.org/TR/WCAG10/wai-page...-comprehension


That's all. I am not aware of any better resources.

[Webnauts]

The space between lines is important. Research suggests a leading (space)
of 1.5 to 2 times the space.

More? Download this PDF tutorial: http://www.dpi.org/en/resources/pdfs...1_dyslexic.pdf

[poab]

Ooooh good lord! Stumbled across this thread and thought I'd add my thoughts, but this is a big topic!

Whilst you may have to adapt them, respect the rules of typography, they aren't there to impose control, they aren't rules at all, they're observations about how the human eye reads, and they've been made and proven over hundreds of years. And at a fundamental level, reading online, or on paper, is still reading.

Stop thinking about type as type and think of it as holes in the space that surrounds it. Forget type defining itself, view it as being defined by the space around it.

Line length is directly proportional to both leading and word spacing. Increase the line length and you HAVE to increase the leading. The standard measures are between 45 characters per line and 66 characters per line (including spaces and punctuation).

Whilst the standard leading for book design is 120% (10pt type means 12pt leading) you want to bump that up a bit for the web because it's harder to read from a screen than from paper. Too little leading and your lines run into each other visually, too much and you get rivers (close your eyes and squint at the page...see the rivers of white space running through the content?..too much leading).

Don't use italics or obliques unless your type is at least 18px. 72 dpi means you're stuck with Roman (normal). Bold type isn't so bad, but still, lacks any degree of subtlety. Better to use colour. If all your type is Dark grey then use black in place of bold etc.

(And this one will wind some people up) Don't use elastic design. If you want a wide column then you can specify things like leading. If you want a narrow column you can also specify things like leading. If you let the user decide then you have no control, it's your responsibility to design well enough to suit your target market not tolet them fiddle about themselves...it's what you get paid for.

And finally, for those that are interested, 'Stop Stealing Sheep...' is the best book on the market at a beginners level:

http://www.amazon.com/exec/obidos/tg...glance&s=books

cheers.

[poab]

Oh, and I should probably point out that if you want anything like a sophisticated control of your type online you're going to need Flash - which I imagine will also annoy people :)

[Webnauts]

Originally Posted by skyrocket

Use padding (especially left + right margin) to get clean white space for better readability. Don't use justified text. Keep to 10-12 words per line to create easily scanable blocks of text. There's my tips off the top of my head.

Excellent post Paul!