为网页项目选择、搭配并实现字体。当用户提及“字体搭配”、“选择哪种字体”、“行高”、“响应式排版”、“网页字体加载”、“字体层级”、“可变字体”、“FOUT/FOIT”、“排版比例”或“文字难以阅读”时使用。在系统字体与网页字体之间做选择、优化字体加载性能、或设计可读性强的长文内容时也会触发。涵盖可读性评估、CSS实现和性能优化。如需整体UI设计系统，请参考 refactoring-ui。如需戏剧化的排版体验，请参考 top-design。
Web Typography
一份关于为网页选择、搭配和实现字体的实用指南。最好的排版是隐形的——它让读者沉浸于内容，而非吸引注意力到自身。
核心原则
排版是内容的声调。 你选择的字体在第一个字被阅读之前就设定了基调——法律网站不应显得俏皮，儿童应用不应显得商务。遵循“透明酒杯”原则：排版应像清澈的酒杯，让焦点保持在酒（内容）上，而非杯子（字体）。
评分
目标：10/10。 分数 = 10项快速诊断中满足的行数。分档：9-10 = 正文字体16px+，行长小于75字符，行高1.4+，层级对比清晰，字体加载量小于200KB，设置后备字体，支持200%缩放；5-6 = 可读但缺少行长控制、后备字体或缩放弹性；<=3 = 正文字体小于16px，无行长限制，FOIT，或层级不可读。始终说明当前分数和未满足的具体诊断项。
字体的两种场景
所有排版分为两类：
| 场景 | 目的 | 优先级 |
|---|---|---|
| 瞬间字体 | 标题、按钮、导航、标志 | 个性、冲击力、独特性 |
| 相伴字体 | 正文、文章、文档 | 可读性、舒适度、耐久性 |
主力字体擅长“相伴字体”——在不同尺寸、字重和场景中保持通用而不引人注目。例如：Georgia、Source Sans、Freight Text、FF Meta。
排版框架
1. 我们如何阅读
核心概念： 理解阅读机制是所有排版决策的基础。眼睛并非平滑扫描——而是跳跃式移动。
为何有效： 对抗这些机制会产生摩擦，驱赶读者；顺应它们能让读者更快吸收内容，减少疲劳。
关键洞察：
- 眼跳 — 眼睛以7-9个字符为单位跳跃；行长和字间距直接影响眼跳效率
- 注视 — 眼睛短暂停顿以吸收内容；密集或间距不当的文字会减慢阅读
- 词形（bouma） — 有经验的读者识别单词轮廓，而非单个字母
- 易读性 vs. 可读性 — 易读性指字符能否被区分（字体问题）；可读性指文本能否长时间舒适阅读（排版问题：大小、间距、行长）。易读的字体也可能被设置得不可读
产品应用：
| 场景 | 应用 | 示例 |
|---|---|---|
| 长文内容 | 优化持续舒适度 | 16-18px正文，1.5-1.7行高，45-75字符行长 |
| 仪表盘UI | 优化快速扫描 | 清晰的字重层级，数据组之间的空白 |
| 移动端阅读 | 考虑距离和光线 | 较大正文（17-18px），更高对比度 |
代码示例：
.prose {
font-size: 1.125rem; /* 18px */
line-height: 1.6;
max-width: 65ch; /* ~45-75字符 */
}
参见：references/typeface-anatomy.md 当需要命名字母部件（x高度、字怀、开口）或将字体置于分类系统中以证明选择时。
2. 评估字体
核心概念： 字体必须通过技术、结构和实用质量检查，才能被用于项目。漂亮的样本在屏幕上可能失败。
为何有效： 屏幕渲染、可变带宽和多样设备带来了印刷从未面临的限制。严格评估可避免项目中期的昂贵字体替换。
关键洞察：
- 技术质量 — 一致的笔画粗细，文本块间均匀的视觉颜色，良好的字偶间距（AV, To, Ty），完整的字符集，多个字重（至少：常规、粗体、斜体）
- 结构评估 — 较大的x高度（更好的屏幕可读性），开放的字怀和开口（a, e, c），清晰的字母形状（Il1, O0, rn vs. m）
- 实用需求 — 在实际使用尺寸下于目标屏幕上测试，检查文件大小，验证许可
- 真实内容测试 — Lorem ipsum会隐藏字符频率、单词长度和段落节奏的问题
产品应用：
| 场景 | 应用 | 示例 |
|---|---|---|
| 正文选择 | 优先考虑x高度、开放字怀、均匀颜色 | 长文阅读选Source Serif Pro而非Didot |
| UI/系统文本 | 优先考虑小尺寸易读性和字重范围 | 界面元素选Inter或SF Pro |
| 多语言产品 | 验证目标语言的字符覆盖 | Noto Sans用于广泛的Unicode支持 |
代码示例：
/* 在每个实际使用尺寸下进行压力测试 */
body { font-size: 16px; }
.caption { font-size: 0.75rem; }
h1 { font-size: 3rem; }
道德边界： 在发布字体前务必验证网页许可——桌面/印刷许可很少涵盖网页嵌入，未经许可使用会带来真实的法律风险。
参见：references/evaluating-typefaces.md 当审查候选字体时——完整质量检查清单、红旗表格和需检查的结构标准。
3. 选择字体
核心概念： 从目的出发，而非审美。内容的基调、阅读场景和时长应驱动选择——而非个人偏好或潮流。
为何有效： 目的驱动的选择显得必然而非随意，并且能通过推理而非品味来证明，从而经受住利益相关者的审查。
关键洞察：
- 先定义任务 — 正文、标题和UI元素可能需要不同字体
- 匹配内容基调 — 财务报告需要与面包店菜单不同的声音
- 检查字族 — 确认所需字重、斜体和样式存在后再承诺
- 安全起点 — 衬线正文：Georgia、Source Serif Pro、Charter；无衬线正文：系统字体、Source Sans Pro、Inter、IBM Plex Sans
产品应用：
| 场景 | 应用 | 示例 |
|---|---|---|
| 内容密集型网站 | 主力衬线或无衬线用于持续阅读 | 文章选Source Serif Pro或Charter |
| SaaS仪表盘 | 干净无衬线，带强表格数字 | 数据密集型UI选Inter或IBM Plex Sans |
| 无障碍优先 | 专为最大易读性设计的字体 | 视障用户选Atkinson Hyperlegible |
代码示例：
/* 网页字体搭配系统后备字体栈 */
body {
font-family: 'Source Sans Pro', -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
参见：references/evaluating-typefaces.md 当缩小候选范围或权衡免费与付费字体时——并排比较方法和质量选项短名单。
4. 搭配字体
核心概念： 成功的搭配创造清晰的对比——字体应明显不同，而非令人困惑地相似。最多使用一到两种字体。
为何有效： 清晰的结构对比（衬线+无衬线、细+粗、人文主义+几何）让每种字体有明确角色。过于相似的字体产生无目的的张力——读者感觉“不对劲”却不知原因。
关键洞察：
- 对比类型 — 结构（衬线+无衬线）、字重（细+常规）、时代（人文主义+几何）、宽度（窄+正常）
- 同设计师策略 — 同一设计师的字体常共享和谐基因（FF Meta + FF Meta Serif）
- 超级字族 — 设计为协同工作的字族消除猜测（Roboto + Roboto Slab）
- 搭配失败 — 两个几乎相同的字体，两者争夺注意力，一个压倒另一个
产品应用：
| 场景 | 应用 | 示例 |
|---|---|---|
| 编辑网站 | 衬线标题 + 无衬线正文 | Playfair Display + Source Sans Pro |
| 文档 | 等宽代码 + 同族无衬线散文 | IBM Plex Mono + IBM Plex Sans |
| 极简品牌 | 单字族通过字重变化 | Inter在不同字重和尺寸下 |
代码示例：
/* 经典衬线+无衬线搭配 */
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }
body { font-family: 'Source Sans Pro', -apple-system, sans-serif; }
参见：references/pairing-strategies.md 当选择第二种字体时——经过验证的组合、对比类型表、同设计师/超级字族捷径。
5. 排版度量
核心概念： 三个度量——字号、行长和行高——构成舒适阅读的基础。正确设置这些比字体选择更重要。
为何有效： 这些度量控制眼睛如何横向和纵向追踪文本：最佳行长匹配眼跳模式，足够行高防止回扫时跳错行，足够大小使字母在屏幕上可识别。
关键洞察：
- 正文字号 — 最小16px；阅读密集型网站更大（18px）；移动用户持手机距离比设计师假设的更远
- 行长 — 理想45-75字符，最佳66字符；使用
ch单位或max-width强制 - 行高 — 正文1.4-1.8；行长越长行高越大；标题需要更紧（1.1-1.25）
- 标题比例 — 层级间一致比例（1.2-1.5）创建层级而不极端
产品应用：
| 场景 | 应用 | 示例 |
|---|---|---|
| 博客/文章 | 65ch最大宽度，1.6行高 | .prose { max-width: 65ch; line-height: 1.6; } |
| 仪表盘 | 密集数据用更紧行高 | 表格单元格和标签用 line-height: 1.3; |
| 着陆页 | 宽松尺寸便于扫描 | font-size: 1.25rem; line-height: 1.7; |
代码示例：
.prose {
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
line-height: 1.6;
max-width: 65ch;
}
/* 按场景设置行高 */
h1, h2 { line-height: 1.1; } /* 标题：1.1-1.25 */
.ui-text { line-height: 1.35; } /* UI：1.3-1.4 */
.body-text { line-height: 1.6; } /* 正文：1.5-1.7 */
参见：references/responsive-typography.md 当编写clamp()公式时——如何推导最小值/首选值/最大值和基于视口的度量策略。
6. 构建字体层级
核心概念： 层级告诉读者什么最重要。通过大小、字重和颜色的可控变化创造区分——但不要同时拉动所有三个杠杆。
为何有效： 层级间有意的、一致的差异让读者一眼把握页面结构；没有层级，一切都在竞争，没有胜者。
关键洞察：
- 三个杠杆 — 大小、字重、颜色；相邻层级间变化一或两个，绝不同时变化三个
- 眯眼测试 — 眯眼看页面仍应显示层级
- 一致比例 — 标题层级间的模块化比例（1.2-1.5）创造节奏；任意尺寸制造噪音
- 不要跳过层级 — 从H1跳到H3打破读者的心智模型
产品应用：
| 场景 | 应用 | 示例 |
|---|---|---|
| 内容页面 | 4-5层级间大小+字重 | H1 2.5rem/700, H2 1.75rem/600, 正文 1rem/400 |
| 仪表盘 | 数据与标签间字重+颜色 | 粗体#111值，常规#666标签 |
| 表单UI | 标签的微妙字重变化 | 标签：600字重，输入：400字重 |
代码示例：
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 700; color: #111; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 600; color: #111; }
body { font-size: 1rem; font-weight: 400; color: #333; }
.secondary { font-size: 0.875rem; color: #666; }
/* 标题：上方间距大于下方 */
h1, h2, h3 { margin: 1.5em 0 0.5em; line-height: 1.2; }
道德边界： 不要将费用、免责声明或退出选项埋在小号或低对比度字体中，以降低用户需要看到的内容的重要性——隐藏重要信息的层级将排版武器化，损害读者利益。
参见：references/css-implementation.md 当实现CSS时——完整层级模式、@font-face加载、font-variation-settings轴、以及使用pyftsubset进行子集化。
7. 响应式排版与网页字体性能
核心概念： 字体必须适应屏幕，网页字体必须高效加载。使用clamp()的流式排版消除断点跳跃；策略性字体加载防止布局偏移和缓慢渲染。
为何有效： 固定字号无法同时服务于320px手机和1440px桌面。网页字体默认阻塞渲染——未优化的加载导致不可见文本闪烁（FOIT）或无样式文本闪烁（FOUT）。
关键洞察：
- 流式排版 —
clamp(min, preferred, max)在视口间平滑缩放，无需媒体查询 - 断点调整 — 移动端需要稍大正文（17-18px）和更紧的标题比例；桌面端可推大展示尺寸同时保持行长限制
- 加载策略 —
font-display: swap立即显示后备文本；预加载关键字体；子集化到所需字符 - 性能预算 — 总字体加载量小于200KB；优先WOFF2；一个可变字体可替代4-6个静态字重文件
产品应用：
| 场景 | 应用 | 示例 |
|---|---|---|
| 内容网站 | 使用clamp()的流式尺寸 | font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem) |
| 电商 | 预加载主字体，懒加载次要字重 | <link rel="preload" href="font.woff2" as="font"> |
| 全球产品 | 按语言子集化以减小加载量 | 英文用拉丁子集，亚洲页面用CJK子集 |
代码示例：
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
@font-face {
font-family: 'Custom Font';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
unicode-range: U+0000-00FF; /* 拉丁子集 */
}
/* 在<head>中：<link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin> */
道德边界： 不要为了速度而牺牲用户——子集化丢弃非英语读者需要的字符，或移除强调所需的斜体/粗体字重，是以包容性换取速度。
常见错误
| 错误 | 失败原因 | 修复 |
|---|---|---|
| 文字显得拥挤 | 行高过紧使读者疲劳 | 增加行高至1.6+；增加段落间距 |
| 行太长 | 超过75字符后眼睛丢失回扫位置 | 文本容器设置max-width: 65ch |
| 标题显得脱节 | 上方过多空间打破与内容的关联 | 减少标题上方空间；保持下方空间 |
| 文字显得模糊 | 字体平滑或亚像素渲染问题 | 检查字体平滑；尝试不同字重；增大尺寸 |
| 字体加载缓慢 | 未优化的文件阻塞渲染 | 子集化；font-display: swap；预加载关键字体 |
| 正文字体太小 | 手机持握距离比假设远；使年长用户眼睛疲劳 | 增大至18px；在实际距离测试 |
| 层级不清晰 | 层级间对比不足 | 增加大小/字重差异 |
| 字体冲突 | 搭配缺乏清晰对比产生张力 | 使用同一字族，或确保结构对比（衬线+无衬线） |
| Lorem ipsum测试 | 虚拟文本隐藏节奏和频率问题 | 使用真实、有代表性的内容测试 |
快速诊断
| 问题 | 如果否 | 行动 |
|---|---|---|
| 正文字体是否16px或更大？ | 太小，无法舒适阅读 | 至少16px；阅读密集型页面首选18px |
| 行长是否小于75字符？ | 眼睛在回扫时丢失位置 | 散文容器设置max-width: 65ch |
| 正文行高是否1.4+？ | 行显得拥挤，阅读变慢 | 增加至1.5-1.7 |
| 字体层级间是否有清晰对比？ | 层级不可见，扫描失败 | 增加大小或字重差异 |
| 是否在实际尺寸的真实屏幕上测试？ | 生产环境出现渲染意外 | 在目标设备上测试每个使用尺寸 |
| 总字体加载量是否小于200KB？ | 加载慢影响用户体验和SEO | 子集化，WOFF2，考虑可变字体 |
| 是否指定了后备字体？ | FOIT留下空白文本 | 每个font-family设置系统后备 |
| 页面在200%缩放时是否正常工作？ | 低视力用户无障碍失败 | 修复200%缩放时的溢出和截断 |
| 标题是否没有孤词？ | 末尾单词显得不完整 | text-wrap: balance或手动断行 |
| 链接是否视觉上可区分？ | 用户找不到交互元素 | 颜色和/或下划线区分 |
延伸阅读
- "On Web Typography" by Jason Santa Maria (A Book Apart, 2014)
关于作者
Jason Santa Maria 是一位平面设计师和教育家，曾担任Typekit（现Adobe Fonts）创意总监，并联合创办了A Book Apart。他在纽约视觉艺术学院任教，On Web Typography 融合了传统排版工艺与屏幕设计现实之间的桥梁。
