Grasp 5 elements, make the page text read more comfortable

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 still need an effect chart ah?" "How do you deal with such an interface as a web designer?"

Is it habitual to use italicized word 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 body, no liner decoration, no obvious difference in the 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 to do the 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 line fonts 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 in ClearType (http://baike.baidu.com/view/755822.htm) forced smooth display state 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 the Chinese and English respectively.

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