Website Design: grasp 5 elements to make the text reading on the page more comfortable

　　

 

Online reading is an important way for most people to obtain information. Users will read a lot of news and articles on the Internet, especially online novels. The subjects displayed on these pages are texts in a wide range. For such seemingly simple text stacked pages, has anyone complained: "Do you still need to publish such pages ?" As a web designer, how do you deal with such an interface?

Is it customary to use simplified Chinese characters or?

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

Have you ever wondered why you want to use this font or font size?

Have you considered the relationship between text layout and reading efficiency?

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

Let's analyze the following five elements.

　　

 

　　Font and font size

The font and font size elements must be put together.

Fonts are divided into serif and sans serif ). To put it simply, serif is a font with a linefeed. The strokes have different thicknesses and are decorated with additional elements. The start and end have obvious strokes (such ). Commonly used English linefeeds include Times New Roman and Georgia. Chinese is the most common and easy to understand in windows.

In contrast to the liner, sans serif is a font with no liner decoration and no obvious differences in the stroke width ). Arial, Helvetica, and Verdanad are all familiar English non-lineline bodies. The default Chinese characters are and 文 on mac.

　　

 

In the past, it was widely believed that the linefeed with strokes can improve the recognition and reading efficiency, and is more suitable for reading. It is mostly used for newspapers, books, and other printed texts. The non-lined body is full and eye-catching. It is often used as a title or for shorter paragraphs.

For a long time, we will pay attention to this phenomenon on the Internet. Most of the foreign websites are dominated by non-linebodies, while the Chinese websites are basically. In fact, it is not hard to understand that there are different strokes in the font lining. In the case of small words, the fine strokes will be weakened, limited by the computer's resolution, the 10-12px line font is rather hard to recognize on the display (SEE); the non-line body strokes with the same font size are concise and full, and are more suitable for webpage fonts. In windows, the font size of 12px and 14px is still quite clear and beautiful, which is easy to read. This is why most web design engineers may choose a specific font size or English or Chinese font mechanically.

Nowadays, as the display grows and the resolution is getting higher and higher, it is often difficult to read 12 PX text. As a designer, they may unconsciously start to use a large number of 14px fonts, more and more websites begin to use 15, 16 PX, or more than 18 PX font size for text. The use of large font sizes reflects the advantages of the high identification and smooth reading of the linefeed for English fonts. Chinese show more than 14 font, a single line of the word is always look a little thin less coordination, especially the dot matrix words in ClearType (http://baike.baidu.com/view/755822.htm) Forced smooth display status is particularly blurred. Is Microsoft's solution to this font display problem.

Let's compare the display effects of the Chinese and English linebodies and the non-linebodies with different font sizes.

Take Times and Verdanad as examples. Take and as examples.

　　

 

　　

 

　President

We pick up a book or a newspaper and read a few lines of text. Generally, there are no more than 40 Chinese characters. This is because if each line of text is too long, the reader will keep turning his neck and feel tired, it will also reduce reading efficiency; eyes move from the end of the line to the first line of the next line, it is easy to serial, this affects the reader's pace of reading articles. This applies to reading articles on the web page. Because the display is horizontal, we should pay more attention to dividing the reading area.

The text width should be 4-Px, And the font size should be referenced in this range;

80-letters per line (a space is counted as one letter;

It is recommended that each line contain 30-40 Chinese characters.

　　Spacing

By setting the spacing, we can control the text density. If the spacing of each line is too small and the text is too long, the reader can easily serialize the text when browsing the article. If the spacing is too wide, the reader will feel that the article is not coherent.

There is no fixed spacing value, which is usually defined based on the font size. In word, we often see double line spacing, single line spacing, and 1.5 line spacing options. The unit of line spacing on the Web page is often expressed by em. Whether it is a Chinese website or an English website, we prefer 1.5em-1.8em line spacing. Take the line spacing of 1.6em as an example. If the font size is 16 PX, the line spacing is 25.6px.

As shown in the figure, the line spacing between 1.5-1.8em is indeed very suitable for reading.

We need to consider the actual situation of CIDR blocks. For example, if the length of an article is short, there is no need for a wide interval. 2. If the length of an article is long, especially those that are relatively academic, it is necessary to take advantage of the length to grasp the pace of the article, it gives readers a chance to breathe and think, and makes the article more layered and readable.

　　

 

　　Background

White is full frequency light, full radiation light is the most irritating to human eyes, so many print books use white paper or pale yellow paper. Because the display itself emits light, text on a pure white background may make your eyes more tired on a computer than reading on paper. Other studies have shown that: reading on a computer is only 78% faster than reading on paper, greatly reducing reading efficiency. Therefore, 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, text-based publications often use low-gloss paper because of high-gloss paper reflection, leading to a decline in reading quality and easy visual fatigue. Can the imitation of Low-gloss paper (paper Texture) on the page background improve the reading comfort?

I have done such a small research. The same text is placed on a different color background (only the natural light source is considered). Two of the backgrounds are added with the paper texture. Result 75% of the respondents thought that the background with paper textures had the highest reading comfort for a long time.

　　

 

Conclusion: In actual work, we need to think more. These five elements are not enough. The browsing environment, devices, website features, user groups, and personal preferences all require the designer to grasp the Display Effect of the interface text based on the specific situation. The difference may be subtle, just like the butterfly effect. A little bit of thinking can bring a better user experience.