Mastering Font Choices: From Serif vs Sans-Serif to CSS Fallbacks

Introduction

Many developers are good at code but get confused by fonts. This article explains essential font knowledge that developers, product managers, and designers need to discuss repeatedly.

Font Classification

Common fonts are divided into two categories: serif and sans-serif .

1. serif : extra decorations at the start and end of strokes, varying stroke thickness. Typical serif fonts include Songti, KaiTi, Times New Roman.

2. sans-serif : uniform stroke thickness, simple and strong, suitable for headings and ads. Typical sans-serif fonts include Hei, Microsoft Yahei, Arial, PingFang SC, San Francisco, Droid Sans.

Note : Serif fonts are rarely used today; non‑serif fonts better match modern aesthetics. Avoid using Songti in PPT; use system defaults (Yahei on Windows, PingFang on macOS).

Font Families in CSS

CSS font‑family groups fonts into five families:

serif

sans-serif

monospace

cursive

fantasy

These families are not specific fonts; the browser selects an available font from the family.

Multiple‑Font Fallback

The fallback mechanism selects the next font when the previous one is unavailable.

<code>.div{font-family:"PingFang SC","Microsoft Yahei",sans-serif;}</code>

This CSS makes iOS/macOS use PingFang, Windows use Yahei, and otherwise any sans‑serif.

font-weight: Font Boldness

The

font-weight

property often confuses front‑end and product teams. Values can be numeric (100‑900) or keywords (

normal

= 400,

bold

= 700).

On Android browsers, only values ≥700 produce a visible change; lower values are ignored because the font does not support those weights.

Support depends on the font: Yahei only supports two weights, treating 500 as 400; PingFang supports at least six weights.

Boldness on Major Platforms

Testing shows the following default font boldness behavior:

iOS (PingFang): 500 and 600 produce different boldness; ≥600 are identical.

Android (Droid Sans): only ≥700 becomes bold, with identical effect.

macOS (PingFang): similar to iOS.

Windows (Yahei): only ≥600 becomes bold, with identical effect.

Font Licensing

Most fonts are not free; commercial use requires a license. Free fonts exist (e.g., Source Han Sans, Alibaba PuHuiTi) but are limited. Companies often purchase or develop their own font libraries to avoid legal issues.

When a designer selects a font like

FZLTZCHK

(Fangzheng Lanting), it is likely a paid font, and developers must warn the product team.

Some companies, such as JD, create proprietary fonts (e.g.,

JDZH

) for internal use.

Conclusion

Fonts may seem small, but they reveal deeper design considerations. As Steve Jobs noted, beautiful typography became a defining feature of modern computers.

References: http://www.ayqy.net/blog/serif%EF%BC%8Csans-serif%EF%BC%8Cmonospace%EF%BC%8Ccursive%E5%92%8Cfantasy/