Most websites are crammed with small text that’s 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. So… 
Screen vs. magazine: 100% is NOT big; image by Wilson Miner.
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 pre-select what’s 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 licking your screen, lean back (!) 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 big. It’s the text size browsers display by default. It’s the text size 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 right away. We want you to adjust to our settings, and not the other way around.
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 with information isn’t difficult, but making it simple and easy-to-use is. At first, you’ll be shocked how big the default text is. But after a day, you won’t want to see anything smaller than 100% font-size for the main text. It looks big at first, but once you use it you quickly realize why all browser makers chose this as the default text size.
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 it much easier to focus on the essence. You don’t need to fill the whole window. White space looking nicer is not a side effect: it’s the logic 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.
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
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:
- light grey text on a lighter grey background
- “silver” colored text on a snow white background
- grey text on a yellow background
- yellow text on a red background
- 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, an overly strong 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 text, play with the cursor and mark text while we read. Text in images 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.
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.
