Font problems in Web and typography

web| problem

About the font of the discussion, in fact, whether foreign or domestic, there have been a lot, but I found that most of the content or biased, or not comprehensive, the following I tried to summarize their views over a period of time, in order to put forward a relatively easy to accept the proposal of CSS font selection.

It's a matter of size.

The size of the font is always a problem that bothers people, in absolute units or relative units? Or specifically, in what unit? Ex? Em? Pt? Px? Percentage? Let's look at the instructions in the CSS 2.1 Spec:

1. Relative size includes: Em, ex, PX
2. Absolute size includes: in, CM, MM, PT, PC
3, EM is relative to the size of the font-size, such as Margin:1.2em is to set the 1.2-character width of the margin, when the EM itself for font-size, refers to the relative size of the elements it inherits.
4, the percentage is also relative to font-size.

So I think, em and percentages are not fit to set the size of the font, because there are too many factors to change each other, the modification of a place may affect many other places. Ex is based on the height of the Latin alphabet X, which is not suitable for the size of the Chinese character, so it is also deprecated. PX is based on the resolution of the current display device, the same PX corresponding to different devices-such as screen or paper-The actual size will be a certain difference.

So I think that if the page should exist as the absolute frame of reference length, then PT and PX should be preferred, the other length according to this absolute frame of reference, according to the percentage or em to change.

here are the differences between the size of the Web page and the print. 99% of pages are used to read on the screen, and the problem is, the resolution of the screen is much lower than the paper, so if the font according to the paper printed on the size of the display, it is certainly not clear, only in terms of English fonts, many fine points, lines can not be so low in the resolution of the show, So we can only use fonts specifically designed for screen display.

The pros and cons of these fonts are difficult to comment on, and there is a view that while paper printing tends to be more readable than serif (sans-serif) fonts, serif fonts are better on the screen. so Microsoft has touted Verdana as the most suitable font for Web page use. I usually prefer to use Verdana, Arial more than times, Georgia.

For Chinese fonts The situation is different, the Chinese font on the screen clearly depends on the dot matrix font, or simply, Microsoft with Windows provided by the song and the new Song (SimSun & Nsimsun), this font is Hua Kang Company (dynalab) design, the 9pt to 12pt fonts are designed with the corresponding lattice font. The most widely used are the 9pt, 10.5pt, and 12pt fonts:

What about the characters that are bigger than this size? Depends on the operating system's font rounding (Anti-alias, hereinafter referred to as AA) technology, generally it is considered that Mac OS X and Linux under the AA than Windows ClearType much better. However, it is more dangerous to use too large a Chinese character.

It's a matter of space.

Today, a new section, originally planned, and yesterday when I forgot to write.

The space here refers to letter-spacing and Line-height, that is, word spacing and line spacing. First of all, good line spacing is the most important part of typesetting, you may not be free to choose the font, the choice of font size is also subject to a number of restrictions, but at least the choice of line spacing can be completely controlled by themselves.

The so-called line-height, refers to the distance between the two lines of the baseline (Base-line), what is the baseline? The red line in the figure below is that for Chinese characters, it should be the horizontal line at the bottom.

In the printing typesetting, the custom uses the PT to specify the row height, for example so-called uses the 12/14pt typesetting, is the font size 12pt, the row high 14pt, but the Web seems to be accustomed to use the percentage to set, this is a matter of opinion, as long as oneself looks pleasing to the eye on the line. However, it must be noted that the browser default row height is not enough, especially for people who want to read for a long time, row height-font size at least 2pt or more. More demanding typesetting scientists usually recommend more than 3pt, but after all, the Web can be casual.

But Letter-spacing is another thing, I have not learned calligraphy, Chinese characters are not good enough to say, but the spacing of English letters should not be casually adjusted, especially not uniform adjustment. Because in fact,Type1, TrueType, OpenType These font formats contain a thing called kerning table, which is the fine tuning of the letter spacing. Why do you do this fine tuning? Two simple examples are AV and We, without fine-tuning, the distance between "A" and "V" would be too wide, and "E" would not fit as well with "W" as we normally write, and the following figure shows the kerning effect of using the Sabon next font in Adobe Reader:

Most of the User agents, including your browser, will automatically do this fine-tuning according to the kerning table of the font, but if you use CSS to modify letter-spacing, the work will be in vain. So I suggest not to adjust letter-spacing casually. For example, WordPress's original Classic Theme (Dave Shea design, Matt modified), he made this problem.

It's a matter of style.

When it comes to English fonts, you can pull out a lot of anecdotes, but here's a word about WEB development.

On the Times New Roman, first of all, unlike the general reservations, thetimes should not be a font suitable for long periods of reading, especially for books, as it is well known that the Times started out as a font designed for newspapers, and in order to adapt to the newspaper in the poor quality of the paper's Fast printing environment, the font line has to be exaggerated, otherwise the details are easily damaged by ink , so the Times used in books is actually a very irresponsible way.

More irresponsible than this is the Times new roman,times new Roman is actually a compression (condensed) of the times, more slender than the original times, more difficult to read. The following comparison should be easier to distinguish between the pros and cons:

Comparison of times with New Roman (click on the image to enlarge )