The technique of text typesetting in website design

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 stuffing page, there is no one complained: "This page still need to come out ah?" "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?

We will do specific analysis from the following aspects: font, size, President, spacing, background.

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 lined line, with different stroke weights and extra decorations, with a pronounced stroke at the beginning and end. 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 the ClearType forced smooth display state is particularly ambiguous. Microsoft Black is Microsoft's solution to this font display problem.

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, this range of 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.

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?

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

Source: http://www.cxb360.com/study/4.html

The technique of text typesetting in website design