Typography Basics
Size, line height, weight, tracking. Chinese typography doesn't share English's parameters.
Nine-tenths of what's on an interface is text. Get the type wrong and no amount of decoration will save it. Size, line height, weight, and tracking all affect each other — change one and you usually have to adjust the others, which is exactly why you should lock a set once rather than letting each generated screen improvise.
What you'll run into:
- You can't say what's ugly, but it's tiring to read
- Seven or eight sizes exist, and changing one forces changes across the board
- Chinese interfaces made from English templates always feel cramped
How to set font size
| Use | Common range | Notes |
|---|---|---|
| Level-1 heading | 24–36px | Main page heading — one per screen |
| Level-2 heading | 16–24px | Section headings, for dividing the page |
| Body | 14–16px | Main reading content. 14 is normal, 16 is emphasized body |
| Caption | 12px | The practical minimum for web. Dates, copyright, notes |
12px is the floor; below that it gets hard to read on most screens. On mobile, body text can be slightly larger than desktop because viewing distance is closer. There are four common ways to pair a title with text: icon plus text, plain colored text, container plus text (text inside a box), and colored text. Pick one and stay consistent across the site — mixing them breaks the hierarchy.
Line height, letter spacing, paragraph spacing
| Parameter | Recommended | What goes wrong |
|---|---|---|
| Line height | 1.2–1.5x the size; Chinese body 1.6–1.8 | Too small and lines stick together; too large and paragraphs fall apart and you lose the next line |
| Letter spacing | About 20% of the size; usually untuned for Chinese body | Loosening Chinese spacing breaks word grouping; headings may need a nudge |
| Paragraph spacing | 0.5–1x the line height | Below line height, paragraphs blend; above 2x, content looks disconnected |
| Page margin | 5%–15% of page width | Too narrow feels crowded; content flush to the edge looks unfinished |
| Line length | 25–35 Chinese characters | Too wide and you can't find the next line; too narrow and it wraps too often |
The line height row deserves special attention: English UIs commonly use 1.4, but Chinese glyphs are square with no ascenders or descenders, so the visual density is higher and the same 1.4 feels cramped. Chinese body text goes up around 1.7. Typography as a craft is about arranging type to be clear, readable, and attractive — the Chinese/English difference is just one facet of it. typography
How to choose a font
- Use sans-serif for UI; serif is fine for long-form text and headlines. Sans-serif has uniform weight and no ornament, suited to flat interfaces; serif has feet, suited to posters and promotional material.
- System fonts are fine for Chinese. PingFang, Source Han Sans, Microsoft YaHei. If you use a web font, mind the Chinese character set size — a single weight is often several megabytes.
- One to three fonts, no more. Usually one body font plus one heading font. More than three gets messy.
- Font weight works better than switching fonts. Regular and bold of the same font can pull apart hierarchy far more safely than changing fonts.
Pitfalls in Chinese
- Leave a space between CJK and Latin. "Use AI to generate" reads better than "UseAI to generate." Same between digits and Chinese. The space lets both writing systems get their own sense of grouping back.
- Chinese has no italics. The browser-forced slant looks bad; emphasize with bold or color instead.
- Punctuation takes a full-width cell. Consecutive punctuation leaves visible gaps, most obvious in headings — adjust manually when needed.
- Don't justify Chinese. Justification stretches letter spacing, and Chinese is already monospaced — stretching makes it harder to read. Left-align instead.
- Don't go too thin. Thin weights blur easily in Chinese, especially at small sizes. Use regular for body, never Light.
Once size, line height, and tracking all converge to fixed values (see Type Scale), a Chinese interface is well on its way to looking tidy.