Type Scale
Use only three to four font sizes across the whole site. The fewer the levels, the clearer each one's meaning.
What you'll run into
- 页面上有七八种字号，但读起来还是平的
- 每加一个新元素都要纠结用多大的字
- 同类信息在不同页面上字号不一样
More sizes doesn't mean more hierarchy. When adjacent levels differ by only a pixel or two, users can't perceive the difference—they just feel it's "a bit uneven." Hierarchy comes from gaps, not from the number of levels.
How to define the scale
| 级别 | 桌面端 | 移动端 | 用在哪 |
|---|---|---|---|
| 大标题 | 28–32px | 22–24px | 页面主标题，一屏只有一个 |
| 小标题 | 16–18px | 16px | 区块标题、卡片标题 |
| 正文 | 14–15px | 15–16px | 主要内容。移动端反而要大一点 |
| 辅助 | 12–13px | 12px | 时间、状态、说明文字 |
When you need more steps, generate them with a geometric ratio: starting from body text, multiply by 1.25 or 1.333 going up and divide by the same ratio going down. The resulting scale is naturally harmonious.
Three dimensions beyond size
Hierarchy doesn't have to come entirely from size. Most of the time, bolding and graying are more restrained than enlarging.
| 维度 | 怎么用 | 好处 |
|---|---|---|
| 字重 | 常规和加粗两档就够 | 不改变占位空间，布局不用调 |
| 颜色深浅 | 主文字近黑、次要文字中灰、辅助文字浅灰 | 同一个字号能拉出三个层级 |
| 间距 | 重要的周围留更多空间 | 完全不改字本身，最干净的一种 |
- Don't go too thin with Chinese. Light blurs at small sizes. Use regular for body text, medium or bold for emphasis.
- Set font size and line height as a pair. Each size gets a fixed line height — don't let the AI compute it fresh every time.
- Use variables. Same as spacing — define them as tokens, change once, applies everywhere.