The processing of fonts in web design cannot be overemphasized. After all, web pages are used to transmit information, and the most classic and direct way of transmitting information is text. Therefore, understanding some basic knowledge of fonts is still very important for design. of.
The biggest difference between Chinese and English is that Chinese has square characters and English has pinyin characters. This has a huge impact on font processing. If you look at the diagram below, you will find that the changes in the English font are weakened in the Chinese font.
As a Chinese reader, I habitually accept the square shape as the unit of reading. In fact, this is an easy way for the eyes to tire. When reading, your eyes actually follow the shape of the entire line of text. Take a look at this example.
NOW I VE TRIED TO TALK TO YOU AND MAKE YOU UNDERSTAND
Now I have tried to talk to you and make you understand
Which line is easier to read?
The first line is somewhat similar to the situation in Chinese. The difference is that each Chinese character is like a painting, and its changes are much richer than the 26 English letters. For us, we accepted this feature, but when designing There are still some issues that need to be considered. I am not a designer. If what I said is wrong, please leave a message below to discuss. These contents are presented as general principles when I teach Typography. I also tell students: "The purpose of rule is to break the rule." The design principle itself is to break the principle, which is also a manifestation of the so-called creativity. The problem is that you need to know the principles first and practice in compliance with them. Only after you are familiar with the principles can you break the principles and show your creativity. Breaking the principles does not mean that the principles are flawed or wrong, but only your ingenious use of these principles. , you broke some, and at the same time made some compensation for the parts you broke, which seems to be quite philosophical.
I personally think the more important principles are (applicable to English):
When choosing a font, you should consider the purpose of the text. Is it a title or a paragraph?
Generally speaking, san serif fonts are suitable for use as titles, such as Arial; serif fonts are suitable for use as paragraph text, such as Time New Roman. For web design, there are several fonts that I highly recommend, such as verdana, tahoma, and georgia. In fact, a font like Verdana was designed by the world's top font designers for almost two years. Microsoft is responsible for footing the bill and then provides it to users for free. This font is part of the IE installation. If you install IE 4 For the above version, your computer must have this font, so you don’t have to worry about whether the user has this font. It is designed to take into account the problems that fonts may face when displayed on the screen, and provides nearly perfect answers. The only trouble is that its near-perfection leaves us with no personality when using it, because everyone uses it.
Font size?
There are many discussions in the forum about which one is better, pixle or point? I won’t repeat it. What I want to point out here is that there are many different units of font size in CSS, and there are roughly three categories:
Absolute size: mm, cm, in, pt, pc
Relative size: em, ex
Relative to device: px
I may want to say a few more words about em and ex. Em represents the font size in CSS. For example, for a 12 pt font, 1 em is equal to 12 pt. Example:
p {
font-size: 10pt;
text-indent: 1em
}
Maybe you will say that I can use text-indent: 10pt to achieve the same effect, but that is only under ideal circumstances. If the user feels that it is better to set the font size of his browser to 14pt, the proportion you design It is lost, so relative size is very beneficial to the scalability design of web pages.
ex is similar to em, but not the same. Returning to the above diagram, x-height is different for each font. ex defines the size of the font based on the x-height of the font.
Alignment?
It is best to use left alignment, especially avoid using left and right alignment, unless you have a special design purpose. The misalignment of the right side when left aligned is just for the convenience of reading. The change on the right side is a help to your eyesight. Use changes to tell your eyes that it's time to change lines.
Line spacing?
Line spacing depends on the size of the font. Generally speaking, small font sizes require larger line spacing to facilitate reading. If there is no line spacing setting for Chinese fonts on a web page, it will be a disaster for readers to read large paragraphs of text. Therefore, it is very necessary to set line-height appropriately. Generally, line-height in web design should be 1.5 times to 2 times the font size. In Word and other text editing software, 120% of the font is generally set as the default line spacing. The line-height setting in CSS is evenly divided and added to the top and bottom of each line. That is to say, if the line-height is set to 20px, then each line of text will have a 10px spacing at the top and bottom.
Word spacing and character spacing?
For very special purposes, the two should be the same for Chinese. This setting itself is to solve certain font design flaws and increase the readability of text.