Craig Hart
  • About
TOC

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, temporibus minima. Repellat et consectetur quibusdam illo itaque tenetur. Ratione excepturi itaque deleniti cumque ut, modi delectus minima ducimus quia. Consequuntur.

Web

How Chinese Fonts Work on the Web

A simple explanation of how serif and sans-serif Chinese fonts behave on the web, with practical guidance on regional glyphs, system fallbacks, and the lang attribute.

Featured

If you work with Chinese on the web, serif and sans-serif are only part of the story. The harder part is that Chinese text does not render the same way across regions, even when the underlying character is technically the same. Mainland China mainly uses Simplified Chinese. Taiwan and Hong Kong mainly use Traditional Chinese. But the difference is not simply “simplified versus traditional.” Many characters are shared, and some even use the same Unicode code point while still appearing with different glyph shapes in different regions. That is why a piece of Chinese text can look subtly wrong even when every character is technically valid. A reader in Taiwan may notice that Traditional Chinese text was entered on a mainland system. A reader in mainland China may feel that Simplified Chinese text looks slightly off when it is rendered in a Taiwan-oriented environment. These differences usually show up in glyph forms, punctuation, and overall typographic texture. Fonts are the last mile of that rendering process. Most operating systems already include multiple Chinese font families for different regions. On macOS, for example, PingFang has regional variants such as SC, HK, TC, and MO. There are also serif families such as Songti SC and Apple LiSung. On the web, there is no single font-family value that will make every Chinese reader happy. The browser cannot reliably guess which regional glyph variant you intended from Unicode alone. In practice, the best approach is to work with the platform instead of fighting it. A simple and practical approach looks like this:

  1. End your font stack with strong system fallbacks such as -apple-system, BlinkMacSystemFont, and sans-serif. If your preferred font is unavailable, the operating system can still choose a valid local font.
  2. Always set the HTML lang attribute correctly, and update it when the interface language changes. This helps the shaping engine choose more appropriate glyphs and punctuation behavior.
  3. Use region-specific font stacks for Chinese when needed.
    • For zh-CN, prefer Simplified Chinese fonts such as PingFang SC or Songti SC.
    • For zh-HK, prefer Hong Kong variants such as PingFang HK.
    • For zh-TW, prefer Taiwan variants such as PingFang TC.
  4. When the interface is not explicitly Chinese, let the system fallback handle Chinese text. On a device configured for Taiwan, text will usually render with Taiwan-style glyphs. The same logic applies to other locales. The important point is this: Chinese typography on the web is not just about choosing between serif and sans-serif. It is also about choosing the right regional behavior. If you get the language tag and fallback strategy right, the system can do much of the hard work for you. This is the simplest way to think about it: pick a sensible font stack, set lang accurately, and respect regional conventions instead of trying to force one universal Chinese font solution.

  • About
  • Works
  • Writings
  • Links
  • Podcasts
  • Books
  • Music
  • Tools
  • Privacy
  • 𝕏
  • GitHub
  • Threads
  • Weibo
  • Telegram
© 2026 Craig Hart.All rights reserved.