Web and typographical font Problems

There are already many discussions about fonts both abroad and in China, but I find that most of the content is either biased or not comprehensive enough, next I will try to summarize my views over a period of time in order to propose a more acceptable CSS font selection suggestion.

Size

The font size is always a problem for people. Is the absolute unit used or the relative unit used? Or, specifically, what unit is used? Ex? Em? PT? PX? Percentage? Let's take a look at the descriptions in CSS 2.1 SPEC:

1. The relative sizes include em, ex, and PX.
2. absolute size: In, CM, mm, PT, PC
3. Em is relative to the size specified by font-size. For example, margin: 1.2em is the margin with 1.2 characters in width. When em is used for font-size, it refers to the relative size of the inherited elements.
4. The percentage is relative to font-size.

Therefore, I think both em and percentage are not suitable for setting the font size. Because there are too many changing factors, changing a place may affect many other places. Ex is based on the height of the Latin letter X, which is not suitable for Chinese characters, so it is also rejected. PX is based on the resolution of the current display device. the actual size of the same PX corresponds to different devices, such as the screen or paper.

Therefore, in my opinion, if the webpage should have the length of the absolute frame of reference, Pt and PX should be the first choice, and other lengths will change according to the percentage or em of the absolute frame of reference.

Next we will talk about the differences between web pages and printing.99% of web pages are used to read on the screen, but the problem is that the screen resolution is much lower than that of paper, so if you directly display the font according to the size printed on the paper, it must be hard to see. For English fonts only, many subtle dots and linefeeds cannot be displayed in such a low resolution, therefore, we can only use fonts specially designed for display on the screen.

The merits and demerits of these fonts are difficult to comment on,Although serif fonts tend to be easier to read than Sans-serif fonts in paper printing, the fonts on the screen are better.So Microsoft touches verdana as the font most suitable for webpages. I usually prefer verdana, Arial over times, and Georgia.

The Chinese font is different. The clear display of the Chinese font on the screen depends on the dot matrix font, or simply put, it is the simsun and simsun fonts provided by Microsoft with windows. These fonts are designed by dynalab, the corresponding dot matrix fonts are designed for fonts between 9pt and 12pt. Among them, the most widely used fonts are 9pt, 10.5pt and 12pt:

What about Chinese characters larger than this one? We need to rely on the anti-alias (AA) technology of the operating system. Generally, we think that Mac OS X and Linux AA are much better than Windows cleartype. However, it is dangerous to use too many Chinese characters.

Space

Today, I added a new section, which was originally planned. I forgot it when I wrote it yesterday.

The space here refers to the letter-spacing and line-height, that is, the spacing between words and rows. First of all, good row spacing is the most important part of typographical layout. You may not be able to select a font freely. The font size is also limited, but at least the row spacing can be completely controlled by yourself.

The so-called line-height refers to the distance between the two-line baseline (base-line). What is the baseline? The red line in the figure below is, for Chinese characters, it should be the bottom horizontal line.

In the print layout, PT is used to specify the Row Height. For example, the so-called 12/14 PT layout is the font size of 12pt, And the Row Height Is 14pt. In the web, it seems that the percentage is used for setting, this is a matter of opinion, as long as you can see your eyes. However, it must be noted that the browser's default line height is not enough, especially for content that the viewer wants to read for a long time, the line height-font size must be at least 2 Pt. More demanding typographical scientists generally recommend 3 PT or above, but after all, the Web can be a little casual.

But letter-spacing is another matter. I have never learned calligraphy, and the Chinese Character spacing is not good to say, but the English letter spacing should not be adjusted at will, especially not unified. Because, in fact,Type1, TrueType, and OpenType fonts all contain something called a kerning table, that is, fine-tuning the letter spacing.Why is this fine-tuning required? The two simple examples are AV and we. Without fine-tuning, the distance between "A" and "V" will be too wide, "E" does not match "W" as we usually write. It shows the kerning effect of the sabon next font in Adobe Reader:

Most of the user agents, including your browsers, will automatically fine-tune the settings based on the kerning table in the font. However, if you use CSS to modify letter-spacing, this work is in vain. We recommend that you do not adjust letter-spacing as needed. For example, WordPress's original classic theme (dave shea design, modified by Matt) makes this mistake.

Style

When talking about English fonts, you can draw a lot of stories, but here we will talk about web development.

For Times New Roman, first of all, it is different from the general impression,Times should not be a font suitable for reading for a long time, especially for reading books. As we all know, times is a kind of font designed for newspapers at the beginning, in order to adapt to the newspaper's rapid printing environment in poor paper, the font line had to be exaggerated, otherwise the details are easily damaged by inkSo using times in books is actually a very irresponsible way.

More irresponsible than this is the use of Times New Roman. Times New Roman is actually a condensed times, which is thinner and easier to read than the original times. The following comparison should be easier to distinguish between advantages and disadvantages:

Comparison between times and Times New Roman (Click to zoom in)

Is there no good font? No, sabon, Minion, Jansen-text, Adobe Caslon, Adobe Garamond and so on are all very suitable fonts for reading, but these fonts are commercial, that is, they are not free to get.The fonts provided by Microsoft also have good quality, such as the palatino Linotype self-supervised by Hermann ZKP. In fact, Adobe chooses 35 standard postscript fonts (Times Roman, Helvetica, courier, palatino, etc.)The palatino designed by ZKP is the most widely used and easy-to-read font. These fonts are provided by urw for free and are of good quality. Unfortunately, they are not widely used (but most Linux distribution includes the package urw-fonts, most Tex distribution also includes the package urw ).

Speaking of palatino, we can also look at the differences between palatino and palatino Linotype on the Web:

Comparison of palatino (Click to zoom in)

I believe it can be seen that the high-quality type1 font itself has a font rounding effect, which is superior to TrueType.

My suggestions
What are my suggestions? I'm afraid I'm still talking about it:

1,Use Pt as the absolute reference. 
2,Use either 9pt, 10.5, or 12pt as much as possible in Chinese fonts. 
3. Adjust the Row Height carefully to avoid adjusting the letter spacing.
4,When selecting a font, consider type1 first, then TrueType, and finally consider none.For example, if you want to use palatino, you should: font-family: palatino, "palatino Linotype", Serif ;.

--------- Reference separator ---------

9 pt, 10.5 and 12pt Chinese characters display very well because they are embedded with optimized dot matrix fonts in TrueType. This technology seems to be called hint.

Some traditional or Japanese Chinese characters can be displayed in an excellent small size such as 8pt, because they are embedded with specially optimized dot matrix fonts.

For English, the font displayed on the screen is indeed not as good as that displayed on the screen. But what about Chinese characters? It seems the opposite. I'm afraid the song on the screen is not a little more comfortable than the simhei, of course, because of the resolution.

What is the difference between type1 and TrueType? I do not know about this. I need to know about it.

PS:Related Concepts

1. Dot Matrix, TrueType, and PS

Lattice words:It is generally used for screen display, such as software menu text. The biggest disadvantage of this kind of font is its low precision. It is very serious in the case of amplification or deformation, and cannot be used as a printed font.
TrueType Font:It is used to describe the outline of a text by line, curve, and other graphical data. It adopts a quadratic curve and a set of fonts can be used for Screen Display and can be used as a print font. Is the most widely used font.
PS words:That is, the PostScript font, similar to the TrueType font, is used to describe the outline of a text based on line, curve, and other graphic data.
Difference between TrueType and PS:The TrueType font is installed on the computer, and the screen display and printing use the same font. PS words are different. PS words are installed in the Phototypesetting machine for final printing and output, while dot matrix words corresponding to PS words are installed in the computer for screen display. At the time of output, the computer sends the font code to the camera, and then the camera searches for the corresponding PS words based on the font code.

TrueTypeThe font library was jointly launched by Microsoft and Apple in 1991 for display and output during front-end layout. Although the printing quality is not as good as the PostScript font, it can fully meet the needs of general words.

PostscriptIt is the file Description Technology published by Adobe in 1985. The font library defined by language syntax described on the postscript page is the postscipt font library. Its main feature is that it can accurately describe and draw fonts, therefore, according to the quality standards in the printing industry, the PostScript font is better than the TrueType font in terms of smoothness, detail, and faithfulness. The PostScript font is generally installed in back-end output devices such as laser printing or rip software, and its use on the front end relies on special software such as Adobe's ATM, because the compatibility of the PostScript font in operating system software is not ideal, it is mainly used for back-end output.

OpenTypeIt is also called the Type 2 font. It is another font format jointly developed by Microsoft and Adobe since 1995. It is also a postscript contour font, which is more powerful than TrueType. The most obvious advantage is that it can be embedded into TrueType software, therefore, excellent output quality can be achieved no matter whether displayed or printed on the screen. It also supports windows, Mac, and Linux platforms, Unicode character sets, and copyright protection. In addition, OpenType can also include multiple typographical features, such as connected words, up and down labels, and floral words. It can be said that it is a superset of Type 1 and TrueType.

Note:The OpenType standard defines the suffix of the OpenType file name. The suffix of the OpenType file containing the turetype font is. TTF, And the suffix of the file containing the PostScript font is. otf. If it is a pack file containing a series of TrueType fonts, the suffix is. TTC.

 

Original Website: http://www.blueidea.com/design/doc/2006/3411_2.asp