Design Theory: Text Legibility and Readability

<br />Not long ago, due to business needs, I installed Souba on my laptop. At that time, a friend who works in graphic design came to discuss some design with me. I was about to enter a URL in front of my laptop when he approached my computer and shouted, "Hey! You also know my old classmate "Gao Liang"!"
I was so scared that I broke out in a cold sweat.

Text is used in almost all products. From small errors, warnings, and prompt messages to large introductions, special planning, and advertising copy. If there is a problem with the text, it is very cheap to modify it. However, if the usability of the text is not good, it will directly affect the product.
I understand the usability of text as two aspects: legibility and readability .
Recognition refers to whether users can read text normally when it appears on the interface. The most common problems encountered in design are about the font, font size, line spacing and spacing of the text. In Chinese WEB design, size 12 and 14 Song fonts are the most commonly used. Looking at several major domestic portals, this has almost become a reading habit for Chinese netizens.
When you encounter lists or long paragraphs of text, you also need to pay attention to line spacing. For example, when using Songti font size 12, we generally use a line spacing of 18-20 pixels. Songti font size 14 usually uses a line spacing of 22-24 pixels.

When designing the WEB, you generally do not need to consider the spacing between words in graphic design, and just use the default state.
But there are exceptions. Sometimes we use 18-point bold or Song-style font, such as the title of a news page.
It is especially important to mention that there is a "-" and a " " sign on the right side of the top of the article on UCDCHINA.COM:

This is a thoughtful design when readers with poor eyesight or elderly readers need a larger font.
You can use the " " function to improve the text's legibility.
At the same time, designers also need to consider issues such as text color, bold, alignment, contrast, link style, etc. In order to highlight certain information, we usually make the text bold or change the font color, but we should use it with caution. Too much emphasis is equivalent to no emphasis, such as the following:

Some conservative designers strongly require that linked text be underlined, while some designers are very disgusted with the appearance of underlined links in large areas.
I think the point is not the underline issue, but that any text with a link needs to be clearly marked out from other text to distinguish it. like:

In terms of readability, there are many problems that may arise, and designers must learn to eliminate them when they encounter them. A common problem that comes up is terminology, because we often use terminology unconsciously when designing products. Many of the terms are simple for us, but not easy for our target user groups.
For example, avoid using the term "ISP" and say "Internet Service Provider" instead. Don’t tell users “PV”, tell them “traffic” etc.
We should try to use the user's language rather than taking terms for granted. If you must use terminology, be consistent each time it occurs. Never use "search", "find", and "query" at different times. Inconsistency will increase the user's learning cost.
Another common problem is ambiguity and unclear meaning.
For example, the "Highlight" mentioned above, in fact, the key point is not whether you will associate your classmate with Gao Liang, but what function "Highlight" represents is confusing: who makes whom highlight, why highlight,
Is it okay not to highlight? Is it getting taller or brighter? This is not a question of misunderstanding, but confusion - if you don't know what it is for, you naturally don't dare to use it.

<<: React handwriting tab switching problem

>>: Five delay methods for MySQL time blind injection