name: 网页排版 description: ‘基于Jason Santa Maria的《On Web Typography》的网页排版框架。适用于需要：(1) 为正文文本、标题和UI选择字体，(2) 评估字体在屏幕上的可读性质量，(3) 配对字体使其协调工作，(4) 设置最佳行长度、行高和字体大小，(5) 使用CSS实现响应式排版，(6) 构建引导读者的类型层次结构，(7) 优化Web字体加载性能。’ license: MIT metadata: author: wondelai version: “1.1.0”
网页排版
一个实用的指南，用于选择、配对和在网页上实现字体。排版服务于沟通 — 最好的排版是隐形的，让读者沉浸在内容中，而不是引人注意。
核心原则
排版是您内容的声音。 您选择的字体在阅读任何单词之前就设定了基调。一个法律网站不应该感觉有趣；一个儿童应用不应该感觉企业化。
“清晰酒杯”原则： 排版应该像一个水晶般清晰的酒杯 — 焦点在酒（内容）上，而不是玻璃（字体）。读者应该吸收意义，而不是注意到字母形状。
读者不阅读，他们扫描。 眼睛以7-9个字符一跳（眼跳），短暂停顿（注视）。良好的排版支持这种自然模式。
评分
目标：10/10。 当审查或创建排版实现时，基于以下原则的遵守程度评分为0-10。10/10意味着完全符合所有指导方针；较低的分数表示需要解决的差距。始终提供当前分数和达到10/10所需的具体改进。
两种类型的上下文
所有排版分为两类：
| 上下文 | 目的 | 优先级 |
|---|---|---|
| 瞬间类型 | 标题、按钮、导航、标志 | 个性、影响力、独特性 |
| 长期类型 | 正文文本、文章、文档 | 可读性、舒适性、持久性 |
工作马字体在“长期类型”方面表现出色 — 它们在不同大小、权重和上下文中通用，而不引人注意。例子：Georgia, Source Sans, Freight Text, FF Meta。
排版框架
1. 我们如何阅读
核心理念： 理解阅读机制是每个排版决策的基础。眼睛不平滑扫描 — 它们以跳跃方式移动，良好的排版支持这种自然模式。
为什么有效： 当排版与大脑处理文本的方式对齐 — 通过单词形状识别、一致节奏和清晰的字母形状区分 — 读者以更少的疲劳更快地吸收内容。对抗这些机制会产生摩擦，驱走读者。
关键见解：
- 眼跳 — 眼睛以7-9个字符的爆发跳跃，不平滑扫描。行长度和字母间距直接影响眼跳效率
- 注视点 — 眼睛短暂停顿以吸收内容。密集或间距不良的文本增加注视持续时间并减慢阅读
- 单词形状（bouma） — 经验丰富的读者识别单词轮廓，而不是单个字母。保持不同的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字符 */
letter-spacing: normal; /* 不要在正文文本上强制追踪 */
}
伦理边界： 排版决策应始终优先考虑读者的理解和舒适性，而不是视觉新颖性。牺牲可读性以换取审美效果排除读者并破坏内容的目的是。
见：references/typeface-anatomy.md 用于术语、字母形状部分和分类系统。
2. 评估字体
核心理念： 一个字体在技术、结构和实用质量检查通过后，才能在项目中占有一席之地。美丽的标本在屏幕上失败；严格的评估防止成本高昂的中途字体交换。
为什么有效： 屏幕渲染、可变带宽和多样设备施加了打印从未面临的约束。一个通过结构评估（一致笔画、开放计数器、不同字母形状）和实用评估（文件大小、许可、渲染）的字体将在所有真实世界条件下可靠地执行。
关键见解：
- 技术质量 — 一致的笔画权重，均匀颜色（视觉密度）跨越文本块，良好字偶对（AV, To, Ty），完整字符集（重音、标点、数字），和多个权重（至少：常规、粗体、斜体）
- 结构评估 — 足够的x高度（更大 = 更好的屏幕可读性），开放计数器和大孔（a, e, c形状），不同的字母形状（Il1, O0, rn vs. m），和适当的对比度（厚/薄笔画变化）
- 实用需求 — 在预期大小工作（在实际使用大小测试），在目标屏幕和浏览器上渲染良好，可接受的文件大小用于Web加载，和项目的适当许可
- 真实内容测试 — 始终用真实内容测试，不是Lorem ipsum。虚拟文本隐藏字符频率、单词长度和段落节奏的问题
产品应用：
| 上下文 | 应用 | 例子 |
|---|---|---|
| 正文文本选择 | 优先x高度、开放计数器、均匀颜色 | Source Serif Pro 用于长读，而不是Didot |
| 标题选择 | 优先个性和大尺寸时的独特性 | Playfair Display 用于编辑影响力 |
| UI/系统文本 | 优先小尺寸时的易认性和权重范围 | Inter 或 SF Pro 用于界面元素 |
| 多语言产品 | 验证目标语言的完整字形覆盖 | Noto Sans 用于广泛Unicode支持 |
| 性能关键站点 | 评估文件大小和子集选项 | 可变字体单文件 vs. 多个静态权重 |
| 品牌刷新 | 评估字体是否传达预期的个性 | 比较实际使用大小的样本与品牌属性 |
复制模式：
/* 在实际使用大小测试字体 */
body { font-size: 16px; } /* 最小正文大小 */
.caption { font-size: 0.75rem; } /* 压力测试小尺寸 */
h1 { font-size: 3rem; } /* 检查大尺寸字符 */
/* 用字体平滑验证渲染 */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
伦理边界： 始终在实施前验证字体许可。使用未许可字体暴露项目于法律风险，并破坏创建这些工具的字体设计社区。
见：references/evaluating-typefaces.md 用于详细质量评估标准和结构分析。
3. 选择字体
核心理念： 从目的开始，不是美学。内容的基调、阅读上下文、持续时间和个性应驱动字体选择 — 不是个人偏好或趋势追随。
为什么有效： 当字体选择基于内容需求时，结果感觉不可避免而不是任意。目的驱动的选择也在利益相关者审查中更好地生存，因为它们可以用清晰的推理而不是主观品味证明。
关键见解：
- 先定义工作 — 正文文本、标题和UI元素可能每个需要不同的字体。在浏览样本前澄清角色
- 匹配基调与内容 — 财务报告需要不同的字体比面包店菜单。字体应感觉像主题的自然声音
- 在实际大小测试 — 在72px美丽的字体可能在14px不可读。始终评估字体实际将被使用的大小
- 检查家族 — 在承诺前确保需要的权重、斜体和样式存在。中途发现缺失的权重强制妥协
- 安全起点 — 对于正文文本，Georgia, Source Serif Pro, Charter (serif) 和系统字体，Source Sans Pro, Inter, IBM Plex Sans (sans-serif) 可靠地跨上下文工作
产品应用：
| 上下文 | 应用 | 例子 |
|---|---|---|
| 内容密集站点 | 选择工作马serif或sans用于持续阅读 | Source Serif Pro 或 Charter 用于文章 |
| SaaS仪表板 | 选择清洁sans与强表格数字 | Inter 或 IBM Plex Sans 用于数据丰富界面 |
| 营销登陆页面 | 配对独特的显示字体与可读的正文字体 | Playfair Display 标题 + Source Sans Pro 正文 |
| 文档站点 | 优先清晰性和权重范围用于代码+散文 | IBM Plex Mono 用于代码，IBM Plex Sans 用于散文 |
| 品牌驱动产品 | 委托或许可体现品牌价值的字体 | 自定义字体或仔细选择的品牌个性匹配 |
| 可访问性重点 | 选择为最大易认性设计的字体 | Atkinson Hyperlegible 用于视力受损用户 |
复制模式：
/* 安全系统字体栈 */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, sans-serif;
}
/* 可靠的Web字体正文栈 */
body {
font-family: 'Source Sans Pro', -apple-system,
BlinkMacSystemFont, sans-serif;
}
伦理边界： 避免选择字体仅为了显得时髦或复杂，牺牲可读性。为了视觉风格而排除低视力或阅读困难的读者的排版失败其基本目的。
见：references/evaluating-typefaces.md 用于选择期间应用的质量评估。
4. 配对字体
核心理念： 成功的字体配对创造清晰的对比 — 字体应明显不同，不是令人困惑地相似。最多一到两种字体；更多需要例外技能。
为什么有效： 字体之间的对比创造视觉层次和节奏。当两种字体太相似时，它们产生无目的紧张 — 读者感觉有些“不对劲”而不知道为什么。清晰的结构对比（serif + sans, light + bold, humanist + geometric）让每个字体在和谐共存时扮演不同的角色。
关键见解：
- 对比类型 — 结构（serif + sans）、权重（light + regular）、时代（humanist + geometric）和宽度（condensed + normal）都创造有效对比
- 同一设计师策略 — 由一个人设计的字体通常共享DNA和谐化（例如，FF Meta + FF Meta Serif）
- 超级家族 — 设计为一起工作的字体家族消除猜测（例如，Roboto + Roboto Slab）
- 配对错误 — 两种serif或sans字体看起来几乎一样，两种字体都试图独特，混合文艺复兴和后现代无意图，一种字体在权重上压倒另一种
产品应用：
| 上下文 | 应用 | 例子 |
|---|---|---|
| 编辑站点 | Serif标题 + sans正文用于经典可读性 | Playfair Display + Source Sans Pro |
| 科技产品 | 超级家族用于保证和谐 | Roboto + Roboto Slab |
| 公司站点 | 同一设计师配对用于微妙凝聚力 | FF Meta + FF Meta Serif |
| 电子商务 | 独特的显示字体 + 中性正文 | 压缩标题字体 + 系统sans-serif正文 |
| 文档 | 单空格代码 + 来自同一家族的sans-serif散文 | IBM Plex Mono + IBM Plex Sans |
| 最小品牌 | 单一家族，权重变化 | Inter 在变化权重和大小 |
复制模式：
/* 经典serif + sans-serif配对 */
h1, h2, h3 {
font-family: 'Playfair Display', Georgia, serif;
}
body {
font-family: 'Source Sans Pro', -apple-system, sans-serif;
}
/* 超级家族配对 */
h1, h2, h3 {
font-family: 'Roboto Slab', serif;
}
body {
font-family: 'Roboto', sans-serif;
}
伦理边界： 当有疑问时，使用一个家族，权重变化，而不是强制配对。一个不匹配的配对创造认知摩擦，破坏内容，添加复杂性无目的服务于设计师的自我，而不是读者的需求。
见：references/pairing-strategies.md 用于特定组合、对比方法和证明的配对。
5. 排版测量
核心理念： 三个测量 — 字体大小、行长度和行高 — 形成舒适阅读的基础。把这些弄对比字体选择更重要。
为什么有效： 这些测量直接控制眼睛如何跨文本跟踪。最佳行长度（45-75字符）匹配眼跳模式。足够的行高（1.4-1.8）防止眼睛在返回扫描时跳到错误行。足够的字体大小（16-18px最小）确保字母形状足够大，以便在屏幕上舒适识别。
关键见解：
- 正文字体大小 — 16px最小；错误更大（18px）用于阅读密集站点。移动用户拿手机比设计师假设的更远
- 行长度（measure） — 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; } |
| 文档 | 稍宽的measure，增加的行高 | max-width: 75ch; line-height: 1.7; |
| 移动UI | 更大的正文大小，自动约束的measure | font-size: 17px; 与视口宽度约束 |
| 仪表板 | 更紧密的行高用于密集数据显示 | line-height: 1.3; 用于表格单元格和标签 |
| 登陆页面 | 慷慨的大小和间距用于可扫描性 | font-size: 1.25rem; line-height: 1.7; |
| 电子邮件模板 | 约束宽度用于电子邮件客户端兼容性 | max-width: 600px; 与内联大小 |
复制模式：
/* 最佳正文文本测量 */
.prose {
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
line-height: 1.6;
max-width: 65ch;
}
/* 更宽的列需要更多的行高 */
.wide-text {
max-width: 80ch;
line-height: 1.8;
}
/* 按上下文的行高调整 */
h1, h2 { line-height: 1.1-1.25; }
.ui-text { line-height: 1.3-1.4; }
.body-text { line-height: 1.5-1.7; }
伦理边界： 永不牺牲可读的测量以换取布局美学。将文本挤入窄列，小尺寸以“适合设计”优先视觉排列于人类理解。
见：references/responsive-typography.md 用于流体大小和基于视口的测量策略。
6. 构建类型层次结构
核心理念： 层次结构告诉读者什么最重要。通过大小、权重和颜色的受控变化创造区别 — 但不要一次组合所有杠杆。
为什么有效： 视觉层次模仿读者自然优先级信息。当级别之间的大小、权重和颜色差异是故意和一致的时，读者可以扫描页面并立即理解其结构。没有层次结构，一切竞争注意力，没有获胜。
关键见解：
- 三个杠杆 — 大小、权重和颜色。在相邻级别之间改变一个或两个；改变所有三个创造过度对比，浪费更深层次结构的空间
- 眯眼测试 — 眯眼看页面应仍然揭示层次结构。如果一切都模糊成相同，区别太微妙
- 一致缩放 — 在标题级别之间使用比率（1.2-1.5）。任意大小创造视觉噪音。一个模块化缩放创造节奏
- 不要跳级 — 从H1跳到H3打破读者对文档结构的心理模型
产品应用：
| 上下文 | 应用 | 例子 |
|---|---|---|
| 内容页面 | 大小 + 权重变化跨4-5级别 | H1 2.5rem/700, H2 1.75rem/600, 正文 1rem/400 |
| 仪表板 | 权重 + 颜色用于数据 vs. 标签区别 | 粗体 #111 用于值，常规 #666 用于标签 |
| 导航 | 大小 + 权重信号当前 vs. 可用 | 激活: 粗体, 未激活: 常规, 相同大小 |
| 营销页面 | 大尺寸跳跃用于戏剧性可扫描性 | 英雄 3.5rem, 部分头 2rem, 正文 1.125rem |
| 表单UI | 微妙权重移动用于标签 vs. 输入区别 | 标签: 600权重, 输入: 400权重 |
| 移动应用 | 更紧密的缩放由于有限视口 | H1 1.75rem, H2 1.25rem, 正文 1rem |
复制模式：
/* 类型层次结构与模块化缩放 */
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; }
h3 { font-size: 1.25rem; font-weight: 600; color: #333; }
body { font-size: 1rem; font-weight: 400; color: #333; }
.secondary { font-size: 0.875rem; color: #666; }
.caption { font-size: 0.75rem; color: #888; }
/* 标题节奏 */
h1, h2, h3 {
margin-top: 1.5em;
margin-bottom: 0.5em;
line-height: 1.2;
}
伦理边界： 层次结构应诚实地引导读者。使用视觉突出性引起对欺骗性元素的注意（小文本中的隐藏费用，粗体中的操纵性CTA）武器化排版对抗读者。
见：references/css-implementation.md 用于完整层次结构实现模式和可变字体技术。
7. 响应式排版和Web字体性能
核心理念： 类型必须适应屏幕和阅读上下文，Web字体必须高效加载。流体排版用clamp()消除断点跳跃，而战略字体加载防止布局移位和慢渲染。
为什么有效： 单一的固定字体大小不能服务320px手机和1440px桌面。流体缩放确保文本始终与其视口成比例。同时，Web字体默认渲染阻塞 — 未优化的加载导致不可见文本闪烁（FOIT）或无样式文本闪烁（FOUT），两者都降低阅读体验。
关键见解：
- 流体排版 —
clamp(min, preferred, max)平滑缩放字体大小在视口大小之间，消除媒体查询断点用于类型大小的需要 - 断点调整 — 移动 (<640px) 需要稍大的正文大小（17-18px）和更紧密的标题缩放；平板 (640-1024px) 使用标准大小，强制执行行长度限制；桌面 (>1024px) 可以使用更大的显示类型，同时保持行长度
- 字体加载策略 — 使用
font-display: swap立即显示回退文本，用<link rel="preload">预加载关键字体，和子集字体仅包括需要的字符 - 性能预算 — 目标在200KB总Web字体负载下。积极子集，优先WOFF2格式，和考虑可变字体替换多个静态权重文件
产品应用：
| 上下文 | 应用 | 例子 |
|---|---|---|
| 内容站点 | 流体正文和标题大小用clamp() | font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem) |
| 电子商务 | 预加载英雄字体，懒加载次要权重 | <link rel="preload" href="font.woff2" as="font"> |
| SaaS应用 | 系统字体栈用于UI，Web字体仅用于营销 | -apple-system 在应用中，自定义字体在登陆页面 |
| 全球产品 | 子集字体按语言减少负载 | 拉丁子集用于英文页面，CJK子集用于亚洲页面 |
| 性能关键 | 可变字体替换4-6静态文件 | 单一可变字体文件与权重轴300-700 |
| 渐进式Web应用 | 缓存在服务工人中用于离线使用 | caches.open('fonts').then(cache => cache.addAll(...)) |
复制模式：
/* 流体排版用clamp() */
body {
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}
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;
font-weight: 400;
unicode-range: U+0000-00FF; /* 拉丁子集 */
}
/* 在HTML头中预加载 */
/* <link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin> */
伦理边界： 性能优化不应以排除用户为代价。积极的子集丢弃非英语读者需要的字符，或移除强调所需的斜体/粗体权重，以速度为代价损害真实的人的方式交换包容性。
见：references/responsive-typography.md 用于流体类型实现和 references/css-implementation.md 用于@font-face、加载策略和可变字体。
常见错误
| 错误 | 为什么失败 | 修复 |
|---|---|---|
| 文本感觉拥挤 | 不足的行高创造视觉密度，使读者疲劳 | 增加行高到1.6+；添加段落间距 |
| 行太长，难以跟踪 | 超过75字符，眼睛在返回扫描时失去位置 | 添加max-width: 65ch到文本容器 |
| 标题看起来断开 | 标题上方的过度空间打破与以下内容的关联 | 减少标题上方空间；保持下方空间 |
| 文本在屏幕上看起来模糊 | 差的字体平滑设置或子像素渲染问题 | 检查字体平滑；尝试不同的权重；增加大小 |
| 字体加载慢 | 未优化的字体文件阻塞渲染和延迟首次内容绘制 | 子集字体；使用font-display: swap；预加载关键字体 |
| 正文文本太小 | 用户拿手机比假设的更远；小文本 strain 老眼 | 增加到18px；用真实用户在真实距离测试 |
| 层次结构不清晰 | 相邻级别之间不足的对比使一切竞争 | 增加级别之间的大小/权重差异 |
| 字体冲突 | 配对字体无清晰对比创造不可解的视觉紧张 | 简化到一个家族；或确保结构对比（serif + sans） |
| 使用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或手动断点 |
| 链接在周围文本中视觉不同？ | 用户不能识别交互元素 | 确保链接有颜色和/或下划线区别 |
参考文件
- typeface-anatomy.md: 术语、字母形状部分、分类系统
- evaluating-typefaces.md: 质量评估、结构分析、技术要求
- pairing-strategies.md: 组合字体、对比方法、证明的组合
- responsive-typography.md: 流体类型、视口单位、断点策略
- css-implementation.md: @font-face、加载策略、可变字体、性能
进一步阅读
On Web Typography 由 Jason Santa Maria Publisher: A Book Apart (2014) ISBN: 978-1937557065 Amazon
关于作者
Jason Santa Maria 是一个平面设计师、创意总监和教育家，其工作塑造了行业对网页排版的思考。他在Typekit（现在Adobe Fonts）担任创意总监，帮助将高质量字体带到网页设计师的规模。他共同创立了A Book Apart，为制作网站的人出版简短书籍，并且是网页标准和教育中的领先声音。Santa Maria在纽约视觉艺术学院（SVA）教学，并艺术指导出版物包括A List Apart。他的工作连接传统排版工艺与为屏幕设计的实际现实，而“On Web Typography”将他深厚的专业知识蒸馏成工作网页设计师的可访问、有观点的指南。