文档基础
字体与字号阶梯
中英文站的字体角色、字号阶梯、行高。
字号阶梯样例
样例用站点自托管的字体渲染,每行可复制对应的 CSS 简写。
Display 72 · Noto Sans SC Black 900 · 行高 1.12
把品牌,做成大家抢着要的东西
72px / 900H2 48 · Noto Sans SC Black 900
四类周边,一站搞定
48px / 900H3 24 · Noto Sans SC Bold
品牌周边定制
24px / 700Lead 18 · Noto Sans SC Regular · 行高 1.6
从创意、打样到量产交付,50 件起订,最快 7 天打样。
18px / 400Body 16 / Small 14 / Tiny 13 · Noto Sans SC
正文最小 14px;辅助说明可用 13px,但不用于关键信息。
16px / 400Number · Unbounded Bold
300+ · 120万+ · 7 天
40px / 700Eyebrow 14 · Unbounded SemiBold · 字距 1.5
WHAT WE DO
14px / 600字体栈
全部是 Google Fonts,免费可商用。字体栈与官网 global.css 一致。等宽字体只用于代码和参数值,不用于标题,不违反红线 12。
| 用在哪里 | CSS |
|---|---|
| 中文站 | font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif |
| 英文站标题 | font-family: 'Unbounded', 'Noto Sans', 'Noto Sans SC', system-ui, sans-serif |
| 英文站正文 | font-family: 'Noto Sans', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif |
| 代码和参数值(文档专用) | font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace |
字体角色
| 角色 | 中文站 | 英文站 |
|---|---|---|
| 展示标题(Hero、区块标题) | Noto Sans SC Black 900 | Unbounded Bold 700 |
| 小标题、按钮 | Noto Sans SC 700 | Unbounded 600 / 700 |
| 正文 | Noto Sans SC 400 / 500 | Noto Sans 400 / 500 |
| 数字、中文里夹的英文词 | Unbounded Bold | Unbounded Bold |
Spec 原文
全部是 Google Fonts,免费可商用。
| 角色 | 中文站 | 英文站 |
|---|---|---|
| 展示标题(Hero、区块标题) | Noto Sans SC Black 900 | Unbounded Bold 700 |
| 小标题、按钮 | Noto Sans SC 700 | Unbounded 600 / 700 |
| 正文 | Noto Sans SC 400 / 500 | Noto Sans 400 / 500 |
| 数字、中文里夹的英文词 | Unbounded Bold | Unbounded Bold |
字号阶梯
- 中文:72 / 48 / 32 / 24 / 18 / 16 / 14,另有 13 只用于标签和辅助说明。
- 英文:Hero 56、区块标题 40,这两档字距 −1px;其余和中文一样。
- 正文行高 1.6。
站酷快乐体(ZCOOL KuaiLe)停用。 它的手写稚气和自绘几何字标不是一家人,中文标语也已经用 Noto Sans SC Black。中文标题和标语用同一个字族。