基础 · FOUNDATION
字体与字阶 Typography
系统字体,没有网络字体。字号沿用 0.5 步进的字阶,不再发明新字号;行高一律写 px,且是 4 的倍数。
字体栈
| 样本 | 令牌 | 值 | 用途 |
|---|---|---|---|
| Aa | -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif | ||
| Aa | ui-monospace, "SF Mono", Menlo, monospace |
中文依次落到 PingFang SC(Mac / iOS)→ Hiragino Sans GB → Microsoft YaHei(Windows)。所以「1:1」严格成立于苹果设备。不要为了统一而引入网络字体——系统字体本身就是这套设计的一部分。
角色
把知识,变成产品
display · 38–40 / 48 · 750 · 字距 -.5px
课程总览与学习地图
title · 22–26 / 32 · 700
Obsidian 知识管理
card title · 16 / 24 · 650
正文:段落与列表的默认字号,行距宽裕,便于久读。
body · 13–14 / 20–24 · 400
说明文字:卡片简介、表单提示、次要信息。
caption · 12.5 / 20 · 400
03 · 按钮 · 微拟物
label · mono 10 · 字距 1.5px · 节标签与分组名
6 系列 · 67 节 · 15 分钟
meta · mono 10–12 · 元数据、时长、编号、代码
字号阶
只用这些字号。半像素不会破坏节奏,因为行高已经落在 4pt 基线上。
| 字号 | 行高 | 用在哪 |
|---|---|---|
| 9.5 | —(单行) | 角标、编号 chip、会员标签 |
| 10 / 10.5 | 16 | mono 标签、元数据、档位胶囊 |
| 11.5 | 16 | 小说明、卡片「适合 · …」 |
| 12 / 12.5 | 20 | 面包屑、说明文字、按钮 sm、输入框 |
| 13 / 13.5 | 20 | 按钮 md、侧栏导航、表格正文 |
| 14 / 14.5 | 20–24 | 正文、按钮 lg、课节卡标题 |
| 16 | 24 | 卡片标题 |
| 22 / 26 | 32 | 页面标题、节标题 |
| 38–48 | 48 / 56 | 首屏大标题 |
字重
常用 400(正文)/ 450(未选中的导航与页签)/ 600(按钮、当前项、强调)/ 650(卡片标题)/ 700(页面标题)/ 750(首屏大标题)。系统字体支持可变字重,450、650、750 都能正确渲染。
铁律
✓ 要显式行高写 px,并且是 4 的倍数:13px 正文配 20px,16px 标题配 24px
✗ 不要发明字阶以外的新字号
✓ 要无单位行高只允许
1(单行字形复位)✗ 不要引入 Inter、Nunito 等网络字体
✓ 要元数据、编号、代码、节标签用 mono
✗ 不要正文用 mono