Thinking about the effect of font processing in CSS _css/html

Author: Flyingbird from: Blue Ideal

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

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

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

Now I ' VE tried-to-talk-to-you understand

Now I ' ve tried-to-talk-to-you understand

Which line is easier to read?

The first line and the Chinese situation is similar, the difference is that each Chinese word is like a picture, its change is more than 26 English letter rich, for us, we accept this feature, but design there are some problems to consider, I am not a designer, if not, please leave a comment below to discuss. These things were presented as general principles when I was teaching typography. I also told the students, "the purpose of rule is to break the rule." The principle of design is in itself a breach of principle, which is also known as Creativity's performance. The problem is that you need to know the principles first, and follow the principles of practice, only after you are familiar with the principles of the possibility of breaking the principle to show your creativity, breaking the principle does not mean that the principle of defects and errors, but you are the use of these principles of ingenuity, you break some, but also to the part you destroyed to make certain compensation It seems a bit of a 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?
In general, San Serif fonts are suitable for use as headings, such as Arial;serif fonts for use as paragraph text, such as time New Roman. For web design, there are a few fonts that I highly 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 users, this font is part of IE installation, if you installed the version of IE 4, 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 its near perfection causes us to use it without individuality, because everyone uses it.

The size of a font size?
A lot of discussion in the forum, about pixle good or point good? I will not repeat, here I would like to raise the size of the font 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
Perhaps a few more words are EM and ex,em in CSS is the font size, for example, for the font of the PT, 1 em is equal to the PT example:

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

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

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

Alignment?
It is best to use left-aligned, especially to avoid using right-to-left alignment, unless you have a special design purpose, left-aligned to the right of the misalignment is just for the convenience of reading, the right side of the change on your eyesight is a help, it with the change to tell your eyes can be changed line.

Line spacing?
Line spacing depends on the size of the font, generally speaking, small font size needs a larger line spacing to facilitate reading, Chinese fonts on the Web page if there is no Line spacing settings, for reading large text is a reader's disaster, so appropriate set Line-height is very necessary. In general, Line-height should be 1.5 times to twice times the size of the font in 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 settings, 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 has 10px spacing.

Word spacing and character spacing?
For a very special purpose, the two should be the same for Chinese. This setting itself is to solve some font design flaws, to increase the readability of the text.

Every writing column has this feeling, the more you write the less you know how to end it,:) This is probably the drawback of the way of essays. Please leave a message to discuss, my this is even throw bricks.

