In this article, we will introduce common web fonts, including Chinese and English:

English

Sans-serif

  • Helvetica:Rated as designers' favorite font, Realist style, clean and modern lines, very sought after. It is considered the best web font on Mac, but displays terribly on Windows due to hinting.
  • Arial:A "clone" of Helvetica, very similar to Helvetica, with small differences in details like R and G. If the font size is too small and there is too much text, it can be a bit tiring to read. Displays normally on both Windows and Mac.
  • Lucida Family:Lucida Grande is the standard font for Mac OS UI, belonging to the humanist style, slightly more lively. It displays better on Mac than on Windows.
  • Verdana:A font designed specifically for screen display, humanist style, still clearly legible at small font sizes, but with severely missing font details; best not used for headings.
  • Tahoma:Also humanist style, somewhat similar to Verdana, but slightly narrower with slightly smaller counters. It was once the standard font for Windows, and has been installed by default on Mac since 10.5.
  • Trebuchet MS:A humanist-style font designed for Microsoft. Personally, I think its personality is too prominent, and it may not fit if used poorly.

Serif

  • Georgia:Basically, the serif font suitable for body text on screen is none other than Georgia. Thick strokes, clear serifs, larger outlines, clear display even at small sizes, and the details are still acceptable.
  • Times:Times was designed for newspapers, characterized by fitting more text into limited space. Its strokes are weaker, and small-size body text on screen looks tiring. When Engadget redesigned and used Times for body text, it was heavily criticized and then switched to Georgia.

Chinese

  • SimSun (Zhongyi Songti):The most common font on Windows. Small fonts use bitmaps, large fonts use TrueType, but large fonts don't look good, so it's best not to use it for headings.
  • Microsoft YaHei:A font newly introduced after Vista. It displays well with ClearType enabled, but appears blurry without ClearType.
  • STXihei (Huawen Xihei):The default Chinese font on Mac.
  • Droid Sans and the derivative WenQuanYi Micro Hei:The Chinese font in Android, also the default Chinese in most Linux distributions. Of course, some use WenQuanYi Zen Hei, but that's less common now.

Note:CSS3 started supporting embedded fonts, so the choices for English fonts suddenly increased a lot, but Chinese fonts, due to their large file sizes, still only have those few options.

Web Font Effects

Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (22px)
abcdefghijklmnopqrstuvwxyz 0123456789
Impact
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (22px)
abcdefghijklmnopqrstuvwxyz 0123456789
Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
Trebuchet MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
Microsoft YaHei
24px Microsoft YaHei Chinese fontBold Chinese font © Yifangtian
ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
20px Microsoft YaHei Chinese fontBold Chinese font © Yifangtian
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
SimSun
26px SimSun Chinese fontBold Chinese font
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
18px SimSun Chinese fontBold Chinese font
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
SimHei* Use bold with caution
26px SimHei Chinese fontBold Chinese font
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
18px SimHei Chinese fontBold Chinese font
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789

English Non-Monospace Fonts

Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Comic Sans MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ 10px
abcdefghijklmnopqrstuvwxyz 0123456789
Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Tahoma
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Time News Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
Trebuchet MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789

English Monospace Fonts

Courier New
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Hei
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Monaco
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
simhei
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789

Chinese Fonts

SimSun
14px SimSun Chinese fontBold Chinese font
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
12px SimSun Chinese fontBold Chinese font
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Microsoft YaHei
14px Microsoft YaHei Chinese fontBold Chinese font
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
12px Microsoft YaHei Chinese fontBold Chinese font
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
MingLiU 11px Chinese font
11px clear Chinese fontBold Chinese font (11px)
PMingLiU 11px Chinese font
11px clear Chinese fontBold Chinese font (11px)
Common 11px usage examples: Tahoma, Verdana, Arial, PMingLiU, MingLiU
11px clear Chinese fontBold Chinese font (11px)
MS UI Gothic 10px Chinese font
It is said that this font displays Traditional Chinese slightly better, but it's still not very clear.(10px)