The 100% Easy-2-Read Standard

Most websites are crammed with small text that is a pain to read. Why? There is no reason for squeezing so much information onto the screen. It’s just a stupid collective mistake that dates back to a time when screens were really, really small, and had very low DPI. So:

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 busy pages look better

Crowded websites don’t look good:; they look nasty. Filling pages with stuff has never helped usability. It’s laziness that makes you throw all kinds of information at us. We want you to think and preselect what is important. We don’t want to do your work.

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 lick kissing your screen, lean back (!) shift into a posturally good position, and read in comfort and continue reading in a relaxed position.

Five Simple Rules

1. Standard font size for long texts

The font size you are reading right now is not only big if you have neglected to adjust your browser's default size to whatever size best suits you and your environment. It’s the text size browsers display by default. It’s the text size browsers were intended to display. Personal Computers were designed to be personalized. If the defaults fail to suit you, it's your own fault that you don't have the size you prefer. Visitors will enjoy their own personalizations by having you not make "corrections" based upon unwarranted assumptions about whether they needed or made any.

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 around.

Initially, it is may be more difficult to create a good layout with using a "big" font size, but that difficulty will help you design a simpler, clearer site. Cramming a site with information isn’t difficult, but making it simple and easy-to-use is can be. At first, you’ll may be shocked how big the default text is seems. But after a day short period, you won’t want to see anything smaller than font-size 100% or 1em for the main content text. It looks big at first, but once you use it After you get acclimated to it, you quickly realize why all browser makers chose this as the default text size that they did.

2. Active white space

Let your text breathe. Using white space is not a designer’s nerdy issue. It’s not about taste.

“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 Muller-Brockmann, Grid Systems

Having air around the text reduces the stress level, as it makes making it much easier to focus on the essence. You don’t need to fill the whole window. That white space looks nicer is not a side effect: it’s the logical consequence of functional design. Who said websites need to be crammed with stuff?

Muller-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 on the 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.

nielsentwos2.gif Good Nielsen - bad Nielsen. The King of Usability recently added white space and a maximum width to his main article column (left). The old layout scaled 100% (right picture). A little bit more line space and you’re perfect.

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 (leading)

Here is what the a 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 l Line height varies by font-family, rendering engine, and platform, and is sometimes too small. If you increase the specify an appropriate line height, the text can becomes more readable. 140% leading Line-height: 1.33 is a good benchmark for average length lines, while less is often better for short lines, and more is typically better for long lines.

4. Clear color contrast

This should not even be necessary to say. B, 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 few will ever know, as no-one few will ever be able to read what you say. Stop this nonsense and let us see what you type.

Note: for screen design, it is often claimed that an overly strong contrast (full black and white) is not ideal either, as the text starts to flicker. Benchmark: #333 on #fff but this is hogwash based upon designers' use of maladjusted displays. Modern displays are usually factory set to maximum brightness and contrast to impress customers in brightly lit stores. These settings should nearly always be reduced for normal use. When left at 100%, they can be expected to cause the display's performance to deteriorate prematurely. As a corollary, displays that have already suffered degradation cannot be readjusted to compensate when they're already marginal at 100%, leaving the user to suffer the same ill effects as if the text was gray on lighter gray.

5. No text in images

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

If you can’t make your website look nice without text in images, I am afraid that you will have to start again from scratch you need to do some serious soul serching about your site's mission.

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% Easy-2-Read (100E2R) standard is all about. If you join in, I’ll be happy to list you below.

How to spread 100E2R

Write a comment with two lines about your site.

If your page is decent, I’ll list it here, regardless of whether I like your particular design or not. Of course: no porn, spam or politics, but professional competitor websites (branding, usability, design…) are very welcome.

100E2R members so far in good standing

  1. Asoboo: International Social Network for Japanese that want to become foreigners and foreigners that want to become Japanese.
  2. James Starkie: James Starkie is a graphic artist/designer and his website is a nice showcase for decent, simple 100E2R design.
  3. Praegnanz: German weblog. Indeed 100% easy to read.
  4. Dadako: Internationally acclaimed pixelpusher Hawken King is currently redesigning his website according to 100E2R. iA is particularly proud we could convert him. So far, he’s updated his blog. We can’t wait to see the currently hidden treasures (like the work he did for Nintendo) of his amazing portfolio integrated in a format that’s easy to browse and read.
  5. Kilian Muster: Typographer, blogger and podcaster living in Japan. Very nice 100E2R example.
  6. Glorum: Very intriguing Wiki-posting-blackboard-Web 2.0 thing, still in Gamma stage. Haven’t found out what it is, but it is on a good path.
  7. Engtech: Geeky stuff like blogging, programming, general nerdery, internet trends, marketing, how-to guides…
  8. Blue Fountain Blog: They say: “Don’t look at our main site whatever you do.”
  9. Protos: Creative stuff by Kristian T, regarding Internet culture, innovation, UI, branding and unlimited success.
  10. NVAC: The National Visualization and Analytics Center is a national and international resource providing strategic leadership and coordination for visual analytics technology and tools. NVAC supports the Department of Homeland Security’s mission to secure our homeland and protect the American people.
  11. Corum: Corum Web Designs specializes in simple website designs. We don’t do Flash, Java, Multimedia or database driven shopping carts.
  12. TagCrowd: Blog for the TagCrowd web app where you can roll your own tag clouds from any text.
  13. Jens: He writes mostly about web, XHTML and CSS stuff.
  14. HTML-Experts: Transforming screen design into optimized HTML/CSS prototypes.
  15. De Amicis: De Amicis is a small company whose mission is to help software development companies test their work.
  16. Connexin: Heiko’s website with (German) info on all sorts of themes.
  17. Gwersi Cymraeg: A blog in Welsh, promoting the Welsh. As far as I can tell…
  18. rsart: “A games industry site, where I generally talk rubbish but every now and then try to dole out useful advice to people who want a job making games.”
  19. Southsea Republic: Cameron Riley’s blog.
  20. Yalf: Yalf is an Aachen based web development agency. The focus is on creating and maintaining accessible and usable web sites conforming to web standards.

Have Your Say

Leave a Reply

You must be logged in to post a comment.


Comments
  1. 11.17.2006
    02:18

    Andrey Sorochan

    Great article, as usual. Thank you very much for your work.

  2. 11.17.2006
    03:55

    Ramon Bispo

    Hi oliver!

    Congrats for your explanation. But, what do you think about that?

    Tell me what you think about size text using ems.

    Best regards!


Original. Too bad it doesn't practice what it preaches.