web-typography

Web Typography

一份关于如何为 Web 选择、搭配和实现字体的实用指南。最好的排版是无形的——它让读者沉浸在内容中，而不是引人注意。

核心原则

排版是内容的声音。 在读者读到任何文字之前，你选择的字体就已定下基调——法律网站不该显得活泼，儿童应用也不该显得像企业产品。遵循“透明酒杯”原则：排版应像一只晶莹剔透的酒杯，让人关注酒（内容），而不是杯子（字体）。

评分

目标：10/10。 得分 = 实现满足的 10 项快速诊断条目数。等级：9-10 = 正文至少 16px、每行长度小于 75ch、行高至少 1.4、层级对比清晰、字体负载小于 200KB、设置了回退字体，并且在 200% 缩放下仍可用；5-6 = 可读，但缺少行长控制、回退字体或缩放适应性；<=3 = 正文小于 16px、未限制行长、出现 FOIT，或层级难以辨认。务必说明当前得分以及未通过的具体诊断条目。

字体的两种使用场景

所有排版都属于以下两类：

场景	用途	优先考虑
用于一时的字体	标题、按钮、导航、徽标	个性、冲击力、独特性
用于长时间阅读的字体	正文、文章、文档	可读性、舒适度、耐读性

实用型字体擅长用于“长时间阅读”——能灵活适应不同字号、字重和场景，又不会引人注意。例如：Georgia、Source Sans、Freight Text、FF Meta。

排版框架

1. 我们如何阅读

核心概念： 理解阅读机制是做出每项排版决策的基础。眼睛不会平滑地扫视文字，而是以一连串跳跃的方式移动。

原理： 违背这些机制会造成阻碍，让读者望而却步；顺应这些机制则能让读者更快吸收内容，减轻疲劳。

关键要点：

• 眼跳——眼睛每次会跳过 7-9 个字符；行长和字间距会直接影响眼跳效率
• 注视——眼睛会短暂停留以吸收内容；文字密集或间距不佳会减慢阅读速度
• 词形（bouma）——有经验的读者识别的是词语轮廓，而非单个字母
• 易辨性与可读性——易辨性指字符是否容易区分（字体设计所关注的问题）；可读性指能否长时间舒适地阅读文本（排版所关注的问题，包括字号、间距和行长）。易辨的字体，排版后仍可能难以阅读

产品应用：

场景	应用方式	示例
长篇内容	优化以保证持久舒适的阅读体验	正文 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 characters */
}

另请参阅：references/typeface-anatomy.md，当你需要为字母造型的各个部分（x 高度、字腔、字腔开口）命名，或将某款字体归入分类体系以说明选择理由时，可参考此文档。

2. 评估字体

核心概念： 字体必须通过技术、结构和实用性方面的质量检查，才能用于项目。屏幕上表现出色的字体样张，也可能不适合实际使用。

为何有效： 屏幕渲染、带宽变化和多样化的设备都带来了印刷品从未遇到的限制。严格评估可以避免项目中途更换字体造成高昂成本。

关键要点：

• 技术质量 — 笔画粗细一致、文本块的视觉色彩均匀、字偶距良好（AV、To、Ty）、字符集完整、提供多种字重（至少包括常规、粗体、斜体）
• 结构评估 — x 高度充足（屏幕上更易阅读）、字腔和字口开阔（a、e、c）、字形易于区分（Il1、O0、rn 与 m）
• 实际需求 — 在目标屏幕上以实际使用字号测试、检查文件大小、确认许可证
• 真实内容测试 — Lorem ipsum 会掩盖字符频率、单词长度和段落节奏方面的问题

产品应用：

场景	应用	示例
正文字体选择	优先考虑 x 高度、开阔的字腔和均匀的视觉色彩	长篇阅读选择 Source Serif Pro，而非 Didot
UI/系统文本	优先考虑小字号可读性和字重范围	界面元素使用 Inter 或 SF Pro
多语言产品	确认目标语言所需的字形覆盖范围	Noto Sans 提供广泛的 Unicode 支持

文案模板：

/* Stress-test at every actual use size */
body { font-size: 16px; }
.caption { font-size: 0.75rem; }
h1 { font-size: 3rem; }

道德边界： 发布字体前，务必确认其 Web 许可证——桌面/印刷许可证很少涵盖 Web 嵌入，未经授权使用会带来实际的法律责任。

另请参阅：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

文案模板：

/* Web font with system fallback stack */
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

文案模式：

/* Classic serif + sans-serif pairing */
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;
}
/* Line height by context */
h1, h2 { line-height: 1.1; }      /* headlines: 1.1-1.25 */
.ui-text { line-height: 1.35; }   /* UI: 1.3-1.4 */
.body-text { line-height: 1.6; }  /* body: 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; }
/* Headings: more space above than below */
h1, h2, h3 { margin: 1.5em 0 0.5em; line-height: 1.2; }

伦理边界： 不要把费用、免责声明或退出选项设为小字号或低对比度，让用户难以注意到；通过层级隐藏用户需要了解的重要信息，就是在利用字体设计损害读者利益。

实现 CSS 时请参阅：references/css-implementation.md — 涵盖完整的层级模式、@font-face 加载、font-variation-settings 轴以及使用 pyftsubset 进行子集化。

7. 响应式字体排版与 Web 字体性能

核心概念： 字体必须适配屏幕，Web 字体也必须高效加载。使用 clamp() 实现流体排版，避免断点跳变；采用合理的字体加载策略，避免布局偏移和渲染缓慢。

为什么有效： 固定字号无法同时适用于 320px 手机屏幕和 1440px 桌面屏幕。Web 字体默认会阻塞渲染；未经优化的加载会导致不可见文本闪烁（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; /* Latin subset */
}
/* In <head>: <link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin> */

伦理边界： 不要为了优化性能而排除用户——删除非英语读者所需字符的子集化，或移除强调内容所需的斜体／粗体字重，都是以牺牲包容性换取速度。

常见错误

错误	失败原因	修正方法
文本显得拥挤	行高太小会让读者感到疲劳	将 line-height 增至 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》，作者 Jason Santa Maria（A Book Apart，2014）

关于作者

Jason Santa Maria 是一位平面设计师和教育工作者，曾任 Typekit（现为 Adobe Fonts）的创意总监，并共同创立了 A Book Apart。他在纽约视觉艺术学院任教；《On Web Typography》凝练呈现了他如何将传统字体设计技艺与屏幕设计的现实需求相结合。