Analysis of cross-platform font effect

(Some of the pictures in this article because the size limit does not reflect the actual effect, please click the big picture to view)
In the process of visually restoring a design manuscript, some problems with font restoration are often generated.

For example, after restoring some large text, the actual visual effect is inferior to the effect in Photoshop; After the design manuscript on the Mac is restored, it is still "XXFarEastFont-Arial" and "bold", but the font is much larger when it is restored, and the Web page that is done in Windows looks a bit strange on the Mac.

This article mainly discusses the font, the main content is divided into two parts:

Analysis of Font Usability
Second, the actual display of font effect analysis

Conclusion

Because the article is longer, the conclusion precedes:
1. MAC & Windows Public available English and digital fonts are: Arial, Arial Black, comic Sans MS, Courier New, Georgia, Impact Times New Roman, Trebuchet MS,
Verdana
Windows can be available in Chinese fonts (easy) XXFarEastFont-Arial, XXFarEastFont-Arial, Song, boldface, italics, Microsoft Jache (part system applicable).
Mac can be used in Chinese fonts (XXFarEastFont-Arial), Song, XXFarEastFont-Arial, XXFarEastFont-Arial and XXFarEastFont-Arial.
Under the MAC Web page font settings, reference to Apple's official website practice, you can use XXFarEastFont-Arial, maintain the system with the Mac itself font consistency.
2. For Microsoft Jas, in the operating system, the coverage rate is only less than 30%, users who do not have the font installed can use Arial or bold substitution, if necessary, consider specifying alternative fonts.
3. In Mac, the Mac font settings are not made for Macs, and the font of the Web page will be converted to the Mac font according to certain rules.
4. Text 12px font is recommended to use the song body. 12-17PX is clearer than Microsoft James Black.

, font usability analysis A. Chinese font:

It is noteworthy that there are no common Chinese fonts under Mac and Windows (a detailed comparison of subsequent discussions)
The specific pre-installed Simplified Chinese font list is as follows:

"About Microsoft's JAS coverage"
According to statistics, the recent Win7+vista market share of the contract in about 25% floating, this part of the user built-in Microsoft Ya black, and for not active installation of Microsoft YA Black XP users, in the page using Microsoft Ya Black, the text will use the song body substitution.

B. English font:

According to statistics (http://media.24ways.org/2007/17/fontmatrix.html), Mac and Windows common public fonts are:

When the page uses the movable type, may contact the stylist to use the above Chinese and English font as far as possible. Use these fonts to avoid the use of pictures, reduce user load bandwidth costs, improve the loading speed of the page.

second, the actual display effect analysis of the font a. Photoshop Design effect vs Web actual display effect

Microsoft has provided a font smoothing technique called ClearType, but under XP, ClearType is closed by default. So in Vista and Vista above systems, font rendering is smoother than XP. In Mac Os X, the font rendering is more plump, the edge is more blurred, the visual will appear more "coarse" some.

Overall:
"Mac OS X's font rendering emphasizes faithful font design, maximizing the appearance of fonts." Edge smoothing is to better convey the details of the curve in the font design, and in this approach, it is possible to cause the ambiguity of the small font size.
The font rendering of Windows emphasizes the sharpness and clarity of the text. In the operating system interface and the text of the Web page, such as small size is clear, but significantly sacrificing the original font. “
--Excerpt from http://www.zhihu.com/question/19573048

For more information on font rendering, read http://blog.typekit.com/2010/10/15/type-rendering-operating-systems/

B. In Mac, the difference of font

In Mac, the difference of font is mainly embodied in Chinese.

Based on the Mac design manuscript Windows can not reproduce the Mac under the font effect

Some designers may use a Mac to design, but will find that the Mac design of the page after the restore, font visual differences,
This is because the Mac under the song and the song in Windows, Mac under the black Body and windows under the black body is different.
Under Windows System, its "song Body" = "Medium Yi Song Body", "bold" = "Medium Easy Blackbody"
Under the Mac system, its "xxfareastfont-arial" = "XXFarEastFont-Arial", and "blackbody" = "XXFarEastFont-Arial", while the actual Chinese blackbody is not bold and bold, which comes from the original "Chinese fine Black" and "XXFarEastFont-Arial".

The specific comparison is as follows:

Therefore, in the design of the Mac, please note that Windows under the font effect and Mac under the font effect is different, and then, after the design to restore the page, the font effect will naturally and the design manuscript has a certain gap.

a Web page with a Mac access pin to Windows Mac will use its own font instead

In page restore, you can manually set the Web page to use a Mac platform font under the Mac, and if not, use the default font in Browser preferences.
Under Mac, Safari defaults to using XXFarEastFont-Arial, and Chrome defaults to using XXFarEastFont-Arial bold. As shown in the following illustration:

Fonts on the Web, if set in English fonts, will affect the corresponding Chinese default font.
If the default font is not a serif font such as Arial, Verdana, Trebuchet, Impact, the Chinese font is automatically selected as a non liner font in Chinese boldface. (bold when using impact)
If the default font is a serif font such as Georgia, Times New Roman, then the Chinese font is automatically selected as a serif font XXFarEastFont-Arial.

The General Mac will select fonts according to this rule, but after testing, in particular,
Courier new=> XXFarEastFont-Arial Bold
Comic Sans Ms=> Chinese italics

The specific display logic is as follows:

For different browsers, the actual display of the effect in the Mac is as follows,

We can find in the test that the XXFarEastFont-Arial is not normally bold in chrome.

C. On the use of 13px, 15px, 17px of the song Body

Windows has its own dot-matrix (XXFarEastFont-Arial) from Vista only provides 12, 14, px These three size lattice, and 13, 15, PX is a small number of lattice (that is, each word occupies a large space of 1 px, but the lattice has not changed).

For 13, 15, 17px of the song, its size is the same as the small one, but more than 1px spacing.
So in Photoshop 13, 15, 17px song body can not be normal restore on the web, design should avoid the use of 13, 15, 17px of the song body.

D. Specific font display effect list

Chinese text:

Test font Size: 12, 13, 14, 16, 18, 24, 30, 36px
which can be seen,
1. The jagged character of bold is more serious,
2. When the font size is small, Song and italics are less effective than the bold ones.
3. In the small print body, the song body is more clear than the Microsoft Ya Black,
(Because the song body uses the dot-matrix representation when 12-17px, less than 12px and greater than 17px will be the font contour grid.)
That is, the 12-17px display "dot Matrix", less than 12px and greater than 17px display "contour"
And Microsoft Jas only provides "contour", when the font is smaller, it will appear unclear, so for the text suggested the use of the song body. ）

English text:

according to the above icons can be seen in different font size under different thickness of the display effect.


if necessary please compare the actual effect to use.

Conclusion

In a Web page build, fonts may be a point that can easily be overlooked. In the design, it is natural to think that a font selected in Photoshop, select the corresponding font in the Web, there will be a corresponding effect.
However, there are often some differences in reality, especially in the case of Cross-platform, the difference is more obvious.
This behavior can cause visual restores to be different from the expected results. Causing a round-trip change, or even a situation far below expectations.
So in order to better ensure the visual quality of the actual product, the font is also an entry point that can not be neglected. ———————————————————————————————————————————
Resources:
http://www.zhihu.com/question/19573048 mac  on font rendering and  Windows  What's the difference
http://www.zhihu.com/question/20440679 now in web design why few people use  11px, 13px, 15px  Odd-numbered fonts
http://techsingular.net/?p=164 mac os x fonts
http://ucdchina.com/snap/12274 Mac win Web page font display scheme
http://www.pjhome.net/article/Web/mac_os_fonts.htm Some research on OS fonts
http://dancewithnet.com/2009/11/22/ default-web-font-style/Default Web font style
http://www.kendraschaefer.com/2012/06/ Chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese /
chinese standard web fonts: a guide to css font family  Declarations for web design in simpLified
Chinese

Source: http://isux.tencent.com/?p=5058