---
title: 字体与字阶 Typography
url: https://ui.zhaozimin.cn/foundations/typography/
markdown: https://ui.zhaozimin.cn/foundations/typography.md
group: 基础
origin: 设计系统源码（src/system），本仓库是唯一源头
source:
  - src/system/styles/v4/tokens.css  # https://ui.zhaozimin.cn/src/system/styles/v4/tokens.css
  - src/system/styles/v4/SPACING.md  # https://ui.zhaozimin.cn/src/system/styles/v4/SPACING.md
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.cn/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
tokens: [--zzm-font, --zzm-mono]
---

# 字体与字阶 Typography

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

## 字体栈

| 令牌 | 值 | 用途 |
|---|---|---|
| `--zzm-font` | `-apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif` |  |
| `--zzm-mono` | `ui-monospace, "SF Mono", Menlo, monospace` |  |

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

## 角色

## 字号阶

只用这些字号。半像素不会破坏节奏，因为行高已经落在 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

---

上一页：[色彩](https://ui.zhaozimin.cn/foundations/color.md) · 下一页：[间距与基线](https://ui.zhaozimin.cn/foundations/spacing.md) · 全站目录：https://ui.zhaozimin.cn/llms.txt