The 100% Easy-2-Read Standard

by Oliver Reichenstein, 2006.11.17

Most websites are crammed with small text that is a pain to read. Why?

don't tell us busy pages look better: Crowded websites don't look good, they look nasty.

don't tell us lots of links work better: Filling pages with stuff has never helped usability. Its laziness that makes you throw all kinds of stuff at us. We want you to think and preselect what is important. We don't want to do your work.

don't tell us to adjust the font size: We don't want to change our browser settings every time we visit a website!

don't tell us scrolling is bad: Because then all websites are bad. There is nothing wrong with scrolling. Nothing at all. Just as there is nothing wrong with flipping pages in books.

don't tell us text is not important: 95% of what is commonly referred to as web design is typography.
don't tell us to get glasses: Rather stop licking your screen, lean back(!) and continue reading in a relaxed position.

There is no reason for cramming information onto the screen. Its just a stupid collective mistake that started in a time where screens were really really small.

1. Standard font size for long texts

The font size you are reading right now is not big. Its the textsize browsers display by default. Its the textsize browsers were intended to display.

We don't want to click bigger or smaller buttons and we don't want to change our preferences. We want to read straight away. We want you to adjust to our settings, and not the other way round.

Initially it is more difficult to create a good layout with a big font size, but that difficulty will help you design a simpler clearer site. Cramming a site full of information is not difficult, making it simple and easy-to-use, is. At first youll be shocked how big the default text is. But after a day you wont want to see anything smaller than font-size 100% or 1em for the main text. It looks big at first, but once you use it you realize quickly why all browser makers went for this size as the default text size.

2. Active white space

The width of the column must be proportioned to the size of the type. Overlong columns are wearying to the eye and also have an adverse psychological effect. Overshort columns can also be disturbing because they interrupt the flow of reading and put the reader off by obliging the eye to change lines too rapidly.
Josef Brockmann, Grid Systems

Let your text breathe. Using white space is not a designers nerdy issue. Its not about taste. Having air around the text reduces the stress level, as it makes it much easier to focus on the essence. You don't need to fill the whole window with stuff. That white space looks nicer is not a side effect, its the logic consequence of functional design. Who said websites need to be crammed with stuff?

Brockmann: The question of the column width is not merely one of design or format; the question of legibility is of equal importance.

Please make sure that the line width (text column width, also called measure) is not too wide, and that you add room left and right to make it easy for the eye to jump. We don't want to adjust either the font size or window size. When we open a website we just want to read away. Column widths that scale are nice, never ending text lines all across the screen are not.

The basic rule is: 10-15 words per line. For liquid layouts, at 100% font size, 50% column width (in relation to window size) is a good benchmark for most screen resolutions.

3. Reader friendly line height

Here is what the reading specialist says:

Lines that are too narrowly set impair reading speed because the upper and lower line are both taken in by the eye at the same time The eye cannot focus on excessively close lines and (&) the reader expends energy in the wrong place and tires more easily. The same also holds true for lines that are too widely spaced.

The default HTML line height is too small. If you increase the line height the text becomes more readable. 140% leading is a good benchmark.

4. Clear color contrast

This should not even be necessary to say. But if you still believe you can get away with one of the following combinations:

1. light grey text on a lighter grey background
2. silver colored text on a snow white background
3. grey text on a yellow background
4. yellow text on a red background
5. green text on a red background and so on&

&then you are not a web designer, but just a designer with an attitude. If you insist you are a web designer then you have to be aware that no one will ever know as no one will ever be able to read what you say. Stop this nonsense and let us see what you type. Note: For screen design too strong of a contrast (full black and white) is not ideal either, as the text starts to flicker. Benchmark: #333 on #fff

5. No text in images

We want to be able to search text, copy text, save your text, play with the cursor and mark text while we read. Text in images look pretty, but pretty is not what the web is about. Its about communication, information, and information needs to be readable and usable and scalable and citable and sendable.

If you cant make you website look nice without text in images I am afraid that you will have to start from scratch.

Spread the word

If you want more websites to be readable, spread the word. Link back to this page so people know what the 100%E2R standard is all about. If you join in Ill be happy to list you below, with (=top of the list) or without link (=lower in the list and rel=no follow).

How to spread E2R

Send a mail to: oliver[at]informationarchitects[dot]jp with the link to your page and two lines about your site.

If your page is decent, I'll list it on this page, no matter if I like your particular design or not. Of course: No porn, spam or politics, but professional competitor websites (branding, usability & design) are very welcome.

SOURCE@ http://www.informationarchitects.jp/100e2r

mxt

THINK
think different
Think Open Source

Line length for text

a line in a book shouldn't run to more than about 27 picas (four and a half inches) because if you have more than about 54en, or characters (27em), to a line the eye tends to have difficulty finding the next line.

http://www.microsoft.com/typography/glossary/ch6.htm

The ideal line length for text layout is based on the the physiology of the human eye... At normal reading distance the arc of the visual field is only a few inches - about the width of a well-designed column of text, or about 12 words per line. Research shows that reading slows and retention rates fall as line length begins to exceed the ideal width, because the reader then needs to use the muscles of the eye and neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on the page, the reader is easily lost and must hunt for the beginning of the next line. Quantitative studies show that moderate line lengths significantly increase the legibility of text.

Web Style Guide - Basic Design Principles for Creating Website
Patrick J. Lynch and Sarah Horton
2nd edition, page 97.

see also: Ideal line length for content, Russ Weakley May 3, 2003

mxt

THINK
think different
Think Open Source

Been A While

Been a while since I've written here. Glad to see that the account is still around.

THANKS Blogger, THANKS Google.

I think I'm going to start using it as a note to self space.

mxt

THINK
think different
Think Open Source