Typography Basics
Nine-tenths of what's on an interface is text. Get the type wrong and no amount of decoration will save it.
What you'll run into
- 页面说不上哪里丑，但就是读着累
- 字号定了七八种，改一处要连带改一片
- 照着英文模板做出来的中文界面，总觉得挤
How to set font size
| 用途 | 常用范围 | 说明 |
|---|---|---|
| 一级标题 | 24–36px | 页面主标题，一屏只有一个 |
| 二级标题 | 16–24px | 区块标题，用来分节 |
| 正文 | 14–16px | 主要阅读内容。14 是普通正文，16 是需要强调的正文 |
| 辅助信息 | 12px | 网页最小可用字号。日期、版权、注释 |
There are four common combinations of title and 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, tracking, paragraph spacing
| 参数 | 推荐值 | 调错了会怎样 |
|---|---|---|
| 行距 | 字号的 1.2–1.5 倍 中文正文取 1.6–1.8 | 太小行与行粘住，太大段落会散掉，读的时候找不到下一行 |
| 字距 | 约字号的 20% 中文正文通常不调 | 中文加字距会破坏词语的成组感，标题可以微调 |
| 段落间距 | 行距的 0.5–1 倍 | 小于行距就分不出段，大于两倍会让内容看着不连贯 |
| 页边距 | 页面宽度的 5%–15% | 太窄显得拥挤，内容贴边像没排完 |
| 正文栏宽 | 中文一行 25–35 字 | 太宽读到行尾找不回行首，太窄换行太频繁 |
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
- 中英混排要留空隙。「使用 AI 生成」比「使用AI生成」好读。数字和中文之间同理。
- 中文没有斜体。系统硬拉出来的斜体很难看，要强调就用加粗或换颜色。
- 标点占一个全角宽。连续的标点会出现明显空隙，标题里尤其明显，必要时手动调。
- 中文不适合两端对齐。两端对齐会拉开字距，中文本来就是等宽的，拉完更难读。左对齐就好。
- 字重不要太细。细体在中文上很容易糊，尤其小字号。正文用常规，别用 Light。