Bilingual typography, done quietly

Most bilingual blogs fail in the same place: the two scripts look like they were never introduced to each other. The fix is mostly font pairing and three numbers.

The pairing

Latin text is set in Geist, a grotesk with a wide enough aperture to stay legible at 15px. Chinese body text is set in Noto Serif SC, a serif that carries weight without shouting. Headings switch to Noto Sans SC at 800 weight, where the strokes are dense enough to anchor a section.

--font-geist-sans: /* Geist, via next/font */
--font-noto-serif-sc: /* Noto Serif SC, body */
--font-noto-sans-sc: /* Noto Sans SC, headings */

The three numbers

A bilingual column becomes readable the moment these three are right.

body { line-height: 1.8; }
article { max-width: 680px; }
p { margin-block: 1.6em; }

• 1.8 line height. CJK glyphs are taller and denser; 1.5 reads as cramped.
• 680px column. Beyond it the return sweep breaks on both scripts.
• 1.6em paragraph spacing. White space is how the eye knows a beat passed.

A paragraph in practice

中英文混排时，最容易出现的问题是基线不齐与字重失衡。解决方法其实并不复杂：英文使用无衬线、中文正文使用衬线，再把行高拉到 1.8，把段落间距留足。剩下的，交给留白。

Read that paragraph next to the one above it. The two scripts are finally on speaking terms — not because they match, but because each is set to its own comfortable measure and given room to breathe.

What to avoid

• Forcing one font for both scripts. They will both look slightly wrong.
• Sub-pixel line heights. Use unitless 1.8, never 1.8em on line-height.
• Justifying text on the web. It creates rivers of whitespace in both languages.

Get those right and the typography disappears, which is the whole point.