How does Web layout design make page text more comfortable to read?

Online reading on the internet is an important way for most people to get information. Users will be on the Internet to read a large number of news and various articles, especially Internet fiction, these pages show the main body is a large paragraph of text. For this seemingly simple text-piling page, has anyone complained: "This page still needs to come out?" How do you deal with such an interface as a web designer?

Is it customary to use italicized word or Microsoft Ya-hei?
is the font size set directly to 12px or 14px?
Have you ever wondered why you want to use this font and font size?
Have you considered the relationship between text layout and reading efficiency?
Does your page background affect the user's browsing comfort level?



Let's make a detailed analysis from the following 5 elements.

Font, font size

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

Fonts are divided into serif bodies (serif) and non-liner bodies (sans serif). To put it simply, the liner body (serif) is a font with a liner, with different stroke weights and an extra decoration, with distinct strokes (such as) at the beginning and end of the line. The usual English liner body has times New Roman and Georgia, Chinese is the most common in the Windows under the song.

Contrary to the liner body, no liner decoration, stroke thickness no obvious differences in the font is non-liner body (sans serif). Arial, Helvetica, Verdanad are familiar with the English non-liner body, the Chinese language has Microsoft ya Black and Mac default Chinese-Chinese fine black.

In the past, it was widely believed that the liner body with brush strokes could improve the recognition and reading efficiency, and was more suitable for reading fonts. Used in the text of newspapers, books and other printed matter. The non-lined body is plump and eye-catching, often used for headings or shorter passages.

For a long time, on the internet, we will pay attention to such a phenomenon, the majority of foreign sites to non-liner body mainly, and the Chinese site is basically the song body. In fact, it is not difficult to understand that the liner font strokes have a thickness, very small cases of thin strokes are weakened, limited by the computer's resolution, 10-12px liner font on the display is quite difficult to identify (see); the same size of non-liner body strokes concise and full, more suitable for web fonts. Under Windows, the characters of the Chinese song character dot Matrix, 12px, 14px font size display is still quite clear and beautiful, easy to read. This is why most web design staff are easy to mechanically choose a specific font size or English or Chinese fonts.

Now with the larger display, higher resolution, often think of 12px text a bit of a struggle, as designers will not consciously began to use a large number of 14px fonts, and more and more sites began to use 15, 16px or even more than 18px of the font size to do text. The use of large font size, in terms of English fonts, lined with high identification and smooth reading of the advantages of the show. Chinese song body in the display of more than 14th fonts, single-line characters always seem a little less coordination, especially the dot matrix in ClearType (http://baike.baidu.com/view/755822.htm) Forced smoothing is especially ambiguous in the state of display. Microsoft Black is Microsoft's solution to this font display problem.

Let us compare the Chinese and English between the liner body and non-liner body at different sizes of the display effect.

In English, The Times and Verdanad for example, Chinese to the song body and Microsoft Ya black as an example.

President

We pick up a book or a newspaper, count the words in each line, and generally no more than 40 characters. This is because if each line of text is too long, the reader will keep turning the neck, feel tired and also reduce the efficiency of reading; The gaze moves from the end of the line to the next line, and it is easy to serial, which affects the reader's rhythm of the article. This also applies to article reading on the Web page. Since the display is horizontal, we should pay more attention to dividing the reading area.

Text width control in 450-700px appropriate, in this range reference font size;

English 80-100 letters per line (a space to count a letter) is appropriate;

30-40 Chinese characters per line is advisable.

Spacing

By setting the spacing, we can control the density of the text. If the distance between lines is too small, as long as the text, the reader is also easy to browse the article serial, if the line spacing is too wide, reading will feel the article is not coherent.

Spacing does not have a fixed value, and is usually defined by the font size. In Word we often see the option of double-spaced, single-spaced, and 1.5 times-spaced. Page upstream distance of the units commonly used to express, whether it is a Chinese site or English site, we like to use 1.5em-1.8em line spacing. Take the line spacing of 1.6em as an example, the word size 16px, the line spacing is 25.6px.

As shown in (figure), the line spacing of 1.5-1.8em is indeed a very suitable text density for reading.

Regarding the interval, we have to consider the actual situation. For example, the length of the article is short, it does not need a wide distance, the second article is very long, especially those who are relatively dull academic articles, it is necessary to use the paragraph distance to grasp the rhythm of the article, to the reader breathing and thinking opportunities, and make the article more level and readability.

Background

White is a full-frequency light, full radiation light on the eyes of the most exciting, so a lot of printed materials are used to choose white or yellowish-colored paper. Because the display itself glows, so the same is a pure white background text, on the computer than on paper reading will make the eyes more likely to fatigue, another study shows: Reading on the computer only on the paper reading speed of 78%, 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 page background.

In addition, printed text-based publications tend to use low-gloss paper, but also because of high gloss paper reflectivity, resulting in a decline in reading quality, easy to make people visual fatigue. Page background imitation of low-gloss paper (paper texture) can also improve the comfort of reading it?

I have done such a small research, the same text on a different color background (only considering the natural light source), which has two background with the effect of paper texture. Results 75% believed that the background with a paper texture had the highest reading comfort for a long time.

Conclusion: In the actual work, we need to think more, only these 5 elements is not enough. Browse the environment, equipment, website characteristics, user groups, personal preferences and so on need to be based on the specific situation of the designer to grasp the display of the text interface. The difference may be subtle, like the butterfly effect, a little bit more thinking, it will be able to give users a better experience feel.

How does Web layout design make page text more comfortable to read?