Guidelines for reading Good experiences: 100% Easy-2-read

Translator: Two days ago to see an article, feel pretty good, simple translation to share to everyone.

Most websites are packed with small text that makes people feel miserable reading. What is the cause of this problem? If we think about it, there's no reason to cram so much information into a tiny screen. In fact, this is only a historical problem, because in the past, the screen is really small.

screen VS. Magazine: 100% not big (from Wilson Miner)

So...

Don't let me adjust the font size I don't want to change my browser settings every time I visit a website! Don't tell me that a cluttered page looks a little bit bad, but it can be very unpleasant. Filling the pages with a variety of content is not helpful for usability. I can only understand that you are too lazy to leave all kinds of information to me. I hope you can think and sift through the important information for presentation rather than let me do it. Don't tell me scrolling is bad because if so, all the sites are bad. There's nothing wrong with scrolling. Scrolling is as natural as reading a book, and there is no mistake. Don't tell me the text is not important in web design, 95% of the content is usually focused on typography (typography). Don't let me put on my glasses. On the contrary, stop lying on the screen! Take a rest and rely on it for a relaxed posture to continue reading! Five Simple Rules

1, long text use the standard font size

The text you are reading now is not a large size, is the default display size of your browser, is the browser should be displayed.

I don't want to click the zoom in, Zoom Out button, or change the browser settings. I want to start reading right away, I hope you can adapt to my settings, instead of letting me change the settings to fit you.

In the beginning, it will be difficult to design a good layout with big characters, but it will help you design a simpler and more refreshing page. It's not difficult to cram a website with all kinds of information, but it's not easy to make her simple and easy to use. At first, you won't get used to these big names, but after a day you won't want to see any text less than 100% displayed in the text. At first you'll find these words look great, but once you've experienced them, you'll soon realize why all the browser designers choose this size as the default display size for text.

2, Active stay white

Let your text have enough space to breathe. The use of white leaves is not a designer's established problem, but also has nothing to do with grade.

The width of the text paragraph must match the font size used. Too much width can make people difficult to read, and will produce negative http://www.aliyun.com/zixun/aggregation/9024.html "> Psychological effects." Too little Kangkuan also interrupts the fluency of reading, forcing readers to change lines frequently. ”
Josef Muller-brockman Grid System

Leaving enough space around the text can reduce the pressure of reading because it makes it easier for readers to focus on the content itself. You don't have to fill the window. Leaving White looks better is not a side effect, but the inevitable result of functional design. Who says pages need to be filled with everything?

Muller-brockmann said: "Line width is not the only important design or format, the problem of readability is of the same importance." ”

So make sure the line width is not too long. You can leave a few blanks at the left and right sides to make it easier for the eyes to wrap when reading. I don't want to resize the font or resize the window. When I open a page, I just want to read it. The adaptive width of the text is good, but the text across the screen without looking at the edges is bad.

Usability expert Nielsen recently added a set of white space and maximum width to his article (bottom left). It would be perfect if you could add some line spacing.

Nielsen–bad Nielsen

The basic rule is: 10-15 words per line (Translator Note: Here the guidelines are for English). For a mobile layout, when the size of 100% font sizes, width is the window size of 50%, at most resolutions this is a better standard.

3, friendly line height

Reading experts say:

"A too small row height setting can slow down reading because the eye will pay attention to the two lines at the same time instead of concentrating on the contents of the current line." Readers spend their energies in the wrong place and are more likely to feel tired. This is also true for rows that are too high. ”

The default row for HTML is too small. If you add some row heights, the text will be more readable. 140% Standard line height is a good standard.

4, bright color contrast

I don't think I need to do more than that. But if you think you can avoid the following, then you are not a web designer, but an attitude designer.

light gray text on lighter gray background silver text on white background gray text on yellow background yellow text put on red background green text on red background ...

.-------

If you think you are a web designer, you have to realize that no one will understand or even see what you are saying. Don't do this sense thing, we also want to see what you really want to express. Note: Too strong a contrast (pure black and white) is not appropriate for the design to be displayed on the screen, as it will make people feel the text flashing. A recommended standard is: background color #fff, text color #333.

5, do not make the text into pictures

While reading, I want to be able to search, copy, and save text, and use the cursor to mark it. Make the text into a picture looks very beautiful, but the beauty is not the whole page. Web pages are used for communication and messaging, and information needs to be readable, usable, scalable, and easily referenced and shared.

If you can design a Web page just by making it a picture, then I think you need to learn the web design from the beginning.

Communication Concept If you want more Web sites to be more readable, please forward the above text! Back to this page, people will know what the 100% easy-2-read (100E2R) standard is saying. ———-Original address: http://informationarchitects.net/blog/100e2r/