A Few Details of Typesetting Chinese Web Pages, v2

When mixing Chinese and English, a few details deserve separate attention.

Line Height

Latin letters have ascenders and descenders, which gives them some built-in visual breathing room; Chinese characters are square, and each one fills its entire cell. So Chinese body text needs a larger line height. Around 1.7 reads comfortably, while the 1.4–1.5 common on English web pages is too cramped for Chinese.

Line Width

If a line is too long, the eye easily loses its place when moving to the next line; if it's too short, lines wrap too often. With 17px body text, a content width of around 680px gives roughly 40 Chinese characters per line.

Fonts

I don't embed web fonts and use the system font stack directly: PingFang SC, Hiragino, Noto Sans CJK. Chinese font files easily run to several MB, so the cost of embedding far outweighs the benefit¹.

Other

• Don't use text-wrap: pretty for body text: in English it avoids a lone word on the last line, but in Chinese paragraphs it makes line endings ragged
• Use text-wrap: balance for headings, so multi-line headings have more even line lengths
• Spacing between Chinese and English (still deciding whether to use text-autospace)