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
Recommend
React non-parent-child component parameter passing example code
React is a JAVASCRIPT library for building user i...
mysql calculation function details
Table of contents 2. Field concatenation 2. Give ...
Example code of how to implement pivot table in MySQL/MariaDB
The previous article introduced several methods f...
Use Nginx to build a streaming media server to realize live broadcast function
Written in front In recent years, the live stream...
Docker-compose steps to configure the spring environment
Recently, I need to package the project for membe...
Install MySQL (including utf8) using Docker on Windows/Mac
Table of contents 1. Docker installation on Mac 2...
Detailed explanation of how to efficiently import multiple .sql files into MySQL
MySQL has multiple ways to import multiple .sql f...
A detailed tutorial on master-slave replication and read-write separation of MySQL database
Table of contents Preface 1. MySQL master-slave r...
How to expand Linux swap memory
Swap memory mainly means that when the physical m...
Detailed explanation of the solution to Tomcat's 404 error
The 404 problem occurs in the Tomcat test. The pr...
Understand the implementation of Nginx location matching in one article
Since the team is separating the front-end and ba...
Native JS to achieve draggable login box
This article shares a draggable login box impleme...
Detailed explanation of outfile, dumpfile, load_file functions in MySQL injection
In the later stage of exploiting SQL injection vu...
MySQL SQL statement analysis and query optimization detailed explanation
How to obtain SQL statements with performance iss...
Detailed explanation of mysql.user user table in Mysql
MySQL is a multi-user managed database that can a...