Website design: Grasp 5 elements, make the page text reading more comfortable

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Online reading is an important way for most people to access information. Users will be on the Internet to read a large number of news and various articles, especially online novels, these pages show the main body is a large paragraph of text. For this seemingly simple text-piling page, has anyone complained: "Such a page also needs to have an effect chart ah?" How do you handle this interface as a web designer?

Is it habitual to use font or Microsoft Ya-hei?

is the font size directly set to 12px or 14px?

Have you ever wondered why you should use this font or font size?

Have you ever considered the relationship between text arrangement and reading efficiency?

Does your page background affect the user's browsing comfort?

Let's take a concrete analysis from the following 5 elements.

Font size

Font and font size these two elements must be pinched together to say.

Fonts are divided into liner bodies (serif) and non liner bodies (sans serif). Simply put, the liner body (serif) is a font with a liner, with a different stroke weight and an extra trim, with an obvious stroke at the beginning and end (pictured below). The common English liner has times New Roman and Georgia, which is the most common medium-easy song in our windows.

Contrary to the lining, no liner decoration, no obvious difference in stroke thickness of the font is not the lining of the line (sans serif). Arial, Helvetica, Verdanad are familiar with the English non liner, the Chinese have Microsoft ya Black and Mac under the default Chinese-Chinese fine black.

In the past, it was generally believed that the liner body with brush strokes could improve the identification and reading efficiency and be more suitable for reading. Used in newspapers, books and other printed text. Non-liner body eye-catching, often used as a title or for shorter paragraphs.

For a long time, we will pay attention to such a phenomenon on the internet, most of the foreign sites are not liner-oriented, and the Chinese site is basically the song body. In fact, it is not difficult to understand, the line font strokes have the weight of the points, very small in the case of fine strokes are weakened, limited by the resolution of the computer, 10-12px serif font on the display is quite difficult to identify (see below); the same size of the line is simple and full strokes, more suitable for web fonts. Under Windows, the character of the small dot matrix of the Chinese song Body, 12px, 14px font size display is still quite clear and beautiful, easy to read. This is why most web design makers are prone to mechanically select specific font sizes or English or Chinese fonts.

Now with the display more and more, the resolution is more and more high, often feel that read 12px text a little hard, as a designer will unconsciously start to use a large number of 14px fonts, and more and more sites began to use 15, 16px or even 18px above the font size to do body text. The use of large font size, for the English font, the lining of the high degree of identification and fluency in the reading of the advantages of the show. Chinese song body in the display of more than 14th font, a single line of characters always look a bit thin and not so coordinated, especially the dot-matrix word in ClearType (http://baike.baidu.com/view/755822.htm) Forced smooth display is especially ambiguous. Microsoft James Black is Microsoft's solution to this font display problem.

Let's contrast the display of the different sizes of the liner body and the non liner in both English and Chinese.

For example, the Times and Verdanad in English, and the Chinese in the song and Microsoft.

President

We pick up a book or a newspaper, and count the words in each line, not more than 40 characters in general. This is because if each line of text is too long, the reader will keep turning the neck, feel tired while also reducing the efficiency of reading; The eye moves from the end of the line to the top of the next line, and is also easy to serialize, affecting the reader's pace of browsing the article. This also applies to the reading of articles on the Web page. Because the display is horizontal, we should pay attention to dividing the reading area.

Text width control in 450-700px, the scope of reference font size;

English 80-100 letters per line (space is a letter) advisable;

30-40 Chinese characters per line are advisable.

Spacing

By setting the spacing, we can control the density of the text. If the spacing between lines is too small and the text is too long, the reader will be able to read the article serially, and if the line spacing is too wide, you'll feel that the article is not coherent.

Spacing has no fixed value, usually defined by font size. In Word we often see the option of double spacing, single spacing, and 1.5 times-fold spacing. The unit of the page uplink is commonly used to express, whether it is Chinese website or English website, we like to use 1.5em-1.8em line spacing. For example, 1.6em line spacing, the word size 16px, line spacing is 25.6px.

As shown in (figure), 1.5-1.8em spacing is indeed a very readable text density.

Regarding the distance, we should consider the actual situation. For example, the article space is shorter, do not need a very wide segment distance; The two articles are very long, especially those biased academic more boring articles, it is necessary to use the interval to grasp the rhythm of the article, give the reader breathing and thinking opportunities, and make the article more hierarchical and readable.

Background

White is the full frequency of light, the whole radiation to the eyes of the most exciting, so many print reading paper are selected white or yellowish-colored paper. Because the display itself glows, so the text with pure white background, on the computer than reading on paper will make the eyes more tired, and other research shows: Reading on the computer only 78% of the speed of reading on paper, reading efficiency greatly reduced. Therefore, in order to improve the comfort and efficiency of page browsing, more and more pages use light gray and light yellow as the background of the page.

In addition, the printed text-oriented publications tend to use low gloss paper, but also because the high gloss of the paper reflected high, resulting in poor reading quality, easy to make people visual fatigue. Does a page background mimic a low gloss paper (paper texture) improve the comfort of reading?

I have done a little research, the same text on a different color background (consider only natural light source), which has two background with the effect of paper texture. Results 75% of the people thought that the background with paper texture for a long time to read the highest degree of comfort.

Conclusion: In actual work, we need to think more, just these 5 elements is not enough. Browsing environment, equipment, website characteristics, user groups, personal preferences and so on need designers according to the specific situation to grasp the interface text display effect. The difference may be subtle, just like the butterfly effect, a little more thinking, can bring a better experience to the user.