Does the website's text still need to be designed?
|
Many people may ask, does the text on the website need to be designed? For many websites, words account for more than 80% or even more of the entire website content. To put it another way, a website can be without color and pictures, but it cannot be without words. A product team has a role called Content Design. UCDChina once had a topic called Pay attention to the text on the interface, which was very interesting. Before writing this article, I read it again, on the one hand to learn, and on the other hand to avoid writing repetitive content. If you compare your website with the ideas in it, I believe it will be helpful. In that issue, Xiaoxiao was the only one who focused on the visual aspects of text. That article was very interesting and was also the "most viewed" article in that issue. This article is a continuation of some of the ideas. Let’s first look at the Chinese font design outside the website. There are many fonts to choose from for English text, but there are generally only two types of Chinese text: Songti and Heiti. In traditional layout design, designers like to do English typesetting. Why? From a visual perspective, the combination of English letters can easily form a relationship between lines and surfaces, and the letters have a sense of rhythm. For example, the three letters aby have different heights when put together. Chinese characters are relatively monotonous, isolated and unsmooth. Back to the design of Chinese characters on the website, the designer basically does not need to consider choosing the font, only Songti. As mentioned in the previous article: a single character forms a point, a line of characters forms a line, and a paragraph of characters forms a surface . This is the most basic principle of layout design, and what we need to do is to strengthen this feeling. Taking Microsoft YaHei and Songti as examples, I really like the design of Microsoft YaHei.  Enlarge the size of Songti and Yahei fonts at size 12 and pay attention to the following details:
There is only one purpose for doing this, which is to make it easier for Chinese characters to form lines and thus read more smoothly. We can see that although Yahei is not a true square, it looks squarer than Songti. After reading the above example, my point becomes clear: Don’t think of your text as words, but as points. The visual design of text is actually about dealing with the relationship between points, lines and surfaces. The following are the specific design points :
updete: Thanks to netizen Dreamcolor for recommending the article 95% of Chinese websites need to rewrite CSS. The article explains in detail the differences and principles between px and em. Before writing this, I took it for granted without a deep understanding of the em unit. I have only seen many cases where the visual effects of using em were not good looking. Now I understand that it is because the em unit and px were not matched. The conclusion is that em should be used instead of px, but the em value needs to be set properly. In the font-family of the body of the CSS file, make sure that "宋体" is preceded by Arial or verdana. I personally recommend writing it like this: font-family:Helvetica,Georgia,Arial,sans-serif,宋体. This will ensure that the letters, numbers, and symbols in your interface look more beautiful and, more importantly, easier to read. The sub-article said: 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. I agree. The line spacing size fluctuates with the number of words in a single line. I think 12px font is acceptable if there are few words in a single line, and 17px is also acceptable. The number of words in a line of text should not exceed 50, and the title text of the homepage should be 8-20 words. 12 and 14px fonts are relatively the most refined, and 13px can be used for main text when needed. The default font size in Word is equivalent to 13px fonts on web pages. For a paragraph of text, especially the main body, ensure that there is at least 15px of white space on the left and right to allow users to wrap their text without being disturbed. The contrast between text and background should be obvious enough to ensure the readability of the weakest text. PS1: The WordPress theme designed for Denis’ lovely daughter Chenchen was released today, and the details still need to be adjusted. That girl is really cute! PS2: Some friends have sent me emails asking me to give suggestions for your website. I will give them all my replies after I finish writing this series of visual design articles. I think I can get some help from the opinions in the article? In particular, you can take a look at the topics of ucdchina. |
<<: Zabbix monitors mysql instance method
>>: Steps for packaging and configuring SVG components in Vue projects
Recommend
In-depth analysis of HTML table tags and related line break issues
What is a table? Table is an Html table, a carrie...
How to manually deploy war packages through tomcat9 on windows and linux
The results are different in Windows and Linux en...
Solution for VMware Workstation Pro not running on Windows
After the National Day holiday, did any of you fi...
How to understand JS function anti-shake and function throttling
Table of contents Overview 1. Function debounce 2...
How to wrap HTML title attribute
When I was writing a program a few days ago, I wan...
Summary of MySql import and export methods using mysqldump
Export database data: First open cmd and enter th...
Teach you how to solve the error when storing Chinese characters in MySQL database
Table of contents 1. Problems encountered 2. Anal...
How does MySQL achieve multi-version concurrency?
Table of contents MySQL multi-version concurrency...
Javascript asynchronous programming: Do you really understand Promise?
Table of contents Preface Basic Usage grammar Err...
mysql8.0.23 msi installation super detailed tutorial
1. Download and install MySql Download MySql data...
A brief discussion on the problem of forgotten mysql password and login error
If you forget your MySQL login password, the solu...
Sample code for implementing mobile expansion and collapse effects with pure CSS3
This article introduces the sample code for imple...
MySQL 8.0.16 installation and configuration tutorial under Windows 10
This article shares with you the graphic tutorial...
Serial and parallel operations in JavaScript
Table of contents 1. Introduction 2. es5 method 3...
Summary of basic operations for MySQL beginners
Library Operations Query 1.SHOW DATABASE; ----Que...