Thinking about the effect of font processing in CSS

CSS font processing in the Web page design no matter how stressed also is not too much, after all, the use of Web pages to convey information, and the most classic and most direct way of information transmission is text, so, to understand a little bit of the basic knowledge of fonts for the design is still very important.

The biggest difference between Chinese and English is Chinese characters, English is the phonetic Alphabet, which has a great influence on the processing of fonts. Look at the icon below to find that the changes in the English fonts are weakened in the Chinese font.


As a Chinese reader, the habitual acceptance of block shape as a reading unit, in fact, for the eyes, this is an easy way to fatigue, when reading your eyes is actually following the whole line of text shape. Take a look at this example.

Now I ' VE tried to TALK for you understand

Now I ' ve tried to talk for you understand

　　 which line is easier to read?

The first line and the Chinese situation are somewhat similar, and the difference is that each Chinese word is like a painting, its change is more than 26 English letters rich, for us, we accept this feature, but there are some problems to consider when designing, I am not a designer, if the wrong, please leave a message in the following discussion. The content was presented as a general principle when I was teaching typography. I also told the students one word: "The purpose of the rule being to breaks the rule." The design principle itself is for breaking the principle, which is also called the creativity performance. The problem is that you need to know the principles first, and obey the principles to practice, it is only when you are familiar with the principles that it is possible to break the principles that manifest your creativity, that breaking the principles does not mean that the principles are flawed or wrong, but that you have used the ingenuity of these principles, that you have broken some, and that you have done some compensation for the parts of your destruction, It seems to have a little philosophical taste.

I personally think that some of the more important principles are (in the case of English):

Font selection to consider the use of the text, is to do the title, or paragraph text?

Typically, San serif fonts are suitable for use as headings, such as Arial;serif fonts that are suitable for use as paragraph text, such as time New Roman. For web design, there are a few fonts I strongly recommend, Verdana, Tahoma, Georgia. In fact, like Verdana This font is designed by the world's top font designers for almost two years, Microsoft is responsible for the bill, and then free to the user, this font is a part of IE installation, if you have installed more than 4 version of IE, your computer must have this font , so you don't have to worry about whether the user has this font. Its design takes into account the possible problems that fonts display on the screen, and provides a near-perfect answer. The only trouble is that it's almost perfect that we don't have a personality when we use it because everyone uses it.

　　 What is the size of the font?

A lot of discussion in the forum, about pixle good or point good? I will not repeat, here I would like to propose is the size of the font sizes in CSS, there are many different units, roughly three categories,

Absolute size: mm, CM, in, PT, PC
Relative size: Em, ex
Relative to device: px
may have to say a few more words is EM and ex,em in CSS is the size of the font size, for example, for the font of PT, 1 em equals pt example:

p {
font-size:10pt;
Text-indent:1em
}

Perhaps you would say I can use text-indent:10pt to achieve the same effect ah, but that's only in the ideal situation, if the user thinks his browser set the font size of 14pt better, the proportion you designed is lost, so the relative size of the Web page scalability design is very advantageous.

Ex and EM are similar, but not the same, back to the diagram above, x-height is different for each font, ex is based on the x-height of the font to define the size of the font.

　　 Alignment method?

It's best to use left alignment, especially if you want to avoid using right and left alignment, unless you have a special design purpose, the right side of the left alignment is for the convenience of reading, the right side of the change for your eyesight is a help, it is through the change to tell your eyes can change lines.

　　 line spacing?

Line spacing depends on the size of the font, in general, small font size requires a larger line spacing to facilitate reading, Chinese fonts on the Web page if there is no line spacing set, for reading large paragraphs of text is a disaster for readers, so it is very necessary to set the appropriate line-height. Generally, line-height should be 1.5 times to twice times the size of the font in the web design. In Word and other text-editing software, 120% of the font is generally set as the default line spacing. CSS in the line-height set, is evenly divided after each row of the upper and lower, that is, if the line-height set to 20px, then each line of text up and down each have 10px spacing.

　　 word spacing and character spacing?

For a special purpose, the two should be the same for Chinese. The setting itself is designed to address some of the flaws in the design of the font to increase the readability of the text.

Every time I write a column, I have this feeling, the more I write, the more I don't know how to end it,:) This may be the malady of the essay style. Please leave a message to discuss, I even throw a brick.