typography.md
基础 · FOUNDATION

字体与字阶 Typography

系统字体,没有网络字体。字号沿用 0.5 步进的字阶,不再发明新字号;行高一律写 px,且是 4 的倍数。

字体栈

样本令牌用途
Aa-apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
Aaui-monospace, "SF Mono", Menlo, monospace

中文依次落到 PingFang SC(Mac / iOS)→ Hiragino Sans GB → Microsoft YaHei(Windows)。所以「1:1」严格成立于苹果设备。不要为了统一而引入网络字体——系统字体本身就是这套设计的一部分。

角色

字号阶

只用这些字号。半像素不会破坏节奏,因为行高已经落在 4pt 基线上。

字号行高用在哪
9.5—(单行)角标、编号 chip、会员标签
10 / 10.516mono 标签、元数据、档位胶囊
11.516小说明、卡片「适合 · …」
12 / 12.520面包屑、说明文字、按钮 sm、输入框
13 / 13.520按钮 md、侧栏导航、表格正文
14 / 14.520–24正文、按钮 lg、课节卡标题
1624卡片标题
22 / 2632页面标题、节标题
38–4848 / 56首屏大标题

字重

常用 400(正文)/ 450(未选中的导航与页签)/ 600(按钮、当前项、强调)/ 650(卡片标题)/ 700(页面标题)/ 750(首屏大标题)。系统字体支持可变字重,450、650、750 都能正确渲染。

铁律

✓ 要显式行高写 px,并且是 4 的倍数:13px 正文配 20px,16px 标题配 24px
✗ 不要发明字阶以外的新字号
✓ 要无单位行高只允许 1(单行字形复位)
✗ 不要引入 Inter、Nunito 等网络字体
✓ 要元数据、编号、代码、节标签用 mono
✗ 不要正文用 mono