排版系统与字号阶
模块化字号阶、行高比、响应式 clamp() 字号，处处可读文本。
设计令牌进阶
为什么
不一致字号（这里 14px、那里 13px、模态 15px）让 UI 显得不用心并损害可读性。从一比率的模块化阶给出和谐字号，跨视口流畅缩放。
Tokens Studio（原 Figma Tokens）有 50 万以上安装量，W3C 设计令牌格式模块即将成为候选推荐。令牌从单一来源实现暗色模式、多品牌主题和平台一致性。
何时使用
设计屏前定义字号阶。若已用 8+ 字号，审计并合并到阶上 — 多数产品仅需 5-7 字号。
如何做
1. 选基 — 16px（1rem）正文，浏览器默认且最可读
2. 选比率 — 1.25（大三度）密集 UI，1.333（纯四度）编辑型
3. 生成阶 — base × ratio^n，n 从 -2..+4，四舍五入到 rem 保留 2 位
4. 行高 — 正文 1.5、标题 1.25、展示 1.1
5. 流体字号 — clamp(min, preferred vw, max) 使标题随视口增长
6. 字体加载 — 预加载 woff2、font-display: swap、子集 latin + cjk
7. 令牌 — --font-size-{-2..4}、--line-height-{body|heading|display}
示例
// typography-tokens.css — 模块化阶（比率 1.25，基 1rem）
:root {
--font-size--2: 0.64rem; /* 10px — 说明 */
--font-size--1: 0.80rem; /* 13px — 小 */
--font-size-0: 1.00rem; /* 16px — 正文 */
--font-size-1: 1.25rem; /* 20px — h4 */
--font-size-2: 1.56rem; /* 25px — h3 */
--font-size-3: 1.95rem; /* 31px — h2 */
--font-size-4: 2.44rem; /* 39px — h1 */
--line-height-body: 1.5;
--line-height-heading: 1.25;
}
/* 流体 h1 — 640px 到 1024px 视口间从 28px 增到 39px */
h1 {
font-size: clamp(1.75rem, 2vw + 1rem, var(--font-size-4));
line-height: var(--line-height-heading);
}
/* 字体加载 — 预加载 + swap 避免 FOIT */
/* <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin> */
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-display: swap; }
常见问题
- ⚠字号过多 — 用 14 个字号，半数差 1px，无法保持一致
- ⚠固定 px 字号 — 不随用户浏览器字号设置缩放，破坏 a11y
- ⚠字体加载 FOIT — web 字体下载时文本不可见 3s
最佳实践
- ✓用 rem 非 px — 尊重用户字号设置，WCAG 1.4.4 缩放所必需
- ✓阶上限 7 字号 — 若需第 8 个，层级错了，重设计
- ✓始终 font-display: swap — 立即显示回退文本，字体到达时替换