Thoughts on the Font Processing effect in CSS

Author: flyingbird from: Blue ideal

In web design, Font Processing cannot be emphasized. After all, web pages use to transmit information, and the most typical and direct method of information transmission is text. Therefore, understanding the basics of fonts is still very important for design.

The biggest difference between Chinese and English is that Chinese is square characters and English is pinyin, which has a huge impact on Font Processing. Look at the figure below and you will find that the changes in the English font have been weakened in the Chinese font.

As a Chinese reader, the habitual acceptance of the square shape as the unit of reading, in fact, for the eyes, this is a way of fatigue, when reading, your line of sight actually follows the shape of the entire line of text. Let's look at this example.

Now I'm ''ve tried to talk to you and make you understand

Now I'm ''ve tried to talk to you and make you understand

Which row is easier to read?

The first line is similar to the Chinese text. The difference is that each Chinese word is a painting, and the change is much richer than 26 English letters. For us, we accept this feature, but there are still some problems to consider during the design. I am not a designer. If not, please leave a message to discuss it below. This content was proposed as a general principle when I taught typography. I also told the students that the "the purpose of rule is to break the rule." design principle is designed to break the principle, which is also a so-called manifestation of creativity. The problem is that you need to prophet the principles and follow the principles for practice. Only after you are familiar with the principles can you break the principle to show your creativity. Breaking the principles does not mean defects or errors of the Principles, it's just your ingenious use of these principles. You have broken some of them, and at the same time make some compensation for what you have destroyed. It seems a little philosophical.

I personally think the most important principles are ):

The font should take into account the purpose of the text. Is it a title or a paragraph text?
Generally, san serif fonts are suitable for titles, such as Arial and serif fonts, such as time new Roman. I strongly recommend several fonts for web design, such as verdana, tahoma, and Georgia. In fact, the font like verdana was designed by the world's top font designers for almost two years. Microsoft pays for it and then provides it to users for free, this font is part of IE installation. If you have installed IE 4 or later, you must have this font in your computer, so you don't have to worry about whether the user has this font. Its design takes into account the possible problems faced by fonts displayed on the screen, and provides near-perfect answers. The only trouble is that its near perfection makes us no longer have personality when we use it, because everyone uses it.

Font size?
There are many discussions in the Forum. Is pixle good or point good? I will not repeat it. Here I want to propose that the font size is in CSS and there are many different units. In general, there are three types,

Absolute size: Mm, CM, In, PT, PC
Relative size: Em, ex
Relative to the device: Px
It may be worth a few more words: Em and Ex. Em represents the font size in CSS. For example, for a 12 pt font, 1 em is equal to 12 pt:

P {
Font-size: 10pt;
Text-indent: 1em
}

Maybe you will say that I can use text-indent: 10pt to achieve the same effect, but it is just in the ideal situation, if the user thinks that the font size of his browser is set to 14 pt better, the proportion you designed will be lost, so the relative size is very favorable for the design of web page scalability.

Ex is similar to Em, but not the same. Return to the above figure, X-height is different for each font, ex defines the font size based on the x-height of the font.

Alignment mode?
It is best to use left alignment, especially to avoid left and right alignment. Unless you have a special design purpose, the right alignment on the left is convenient for reading, the changes on the right side help your eyesight, and it tells your eyes that they can wrap their lines.

Row spacing?
The line spacing depends on the font size. Generally, a small font size requires a large line spacing to facilitate reading. If the Chinese font is not set on the webpage, it is a disaster for readers to read large text segments, therefore, it is necessary to set line-height properly. Generally, line-height should be 1.5 to 2 times the font size in the webpage design. In word and other text editing software, 120% of the font is usually set as the default line spacing. The line-height setting in CSS is added to the upper and lower layers of each row after the same share. That is to say, if the line-height is set to 20px, each line of text has a 10px spacing between the upper and lower ends.

?
This is a special purpose and should be the same for Chinese. This setting is designed to solve some font design defects and improve text readability.

Each time you write a columnArticleThey all have this feeling. The more you write, the less you don't know how to end it. :) this may be the defect of the casual approach. Leave a message to discuss this. I am throwing bricks.