本页面借助 AI 辅助翻译。英文原文为权威版本。
排版层级在读者读到第一句话之前，就告诉他们这个页面讲什么、如何组织、从哪里进入。2005 年版建议以 1.2 到 1.5 之间的一致比率设定各层级字号，并警告基础字号选得不好会在缩放时崩坏。这两点都站得住，但各自都长出了原版无法触及的第二个维度：比例如今是流体的而非固定的；网页上的层级也不再只是视觉的——它还必须是结构性的，因为相当一部分读者根本看不到它。
自 2005 年以来的变化
1.2–1.5 比率的建议成熟为如今的标准实践——模数化字号比例：页面上的每个字号都由基础字号反复乘以同一个比率推导而来。常见比率借音乐音程得名——1.2（小三度）、1.25（大三度）、1.333（纯四度）、1.5（纯五度）——原有区间依旧恰当，只是多了一层细化：比率应当契合媒介。信息密集的产品界面和长篇阅读适合温和的比率（1.125–1.25），既能产出足够多可区分的字号，又不会出现巨型标题；编辑类和营销页面则撑得起 1.333 或 1.5。在数据密集的应用里生成 60 像素 h2 的比率，对那个语境而言就是错误的比率。
更大的技术变化在于，一套比例不必再是一组固定的数字。CSS 的 clamp() 让比例的每一级都可以流动：字号由最小值、视口相对的首选值和最大值定义，标题在手机与桌面之间平滑缩放，而不是在断点处跳变。构建良好的流体比例实际上在小屏幕上使用较小的比率、在大屏幕上使用较大的比率——这正与印刷设计师一贯根据版面调整展示字号的做法吻合。有一条无障碍警示必不可少：视口相对的中间项必须混入基于 rem 的分量（例如把 rem 与 vw 结合的计算式），绝不能使用纯视口单位。只用 vw 设定的文字无视用户的字号偏好，也不响应浏览器的文本缩放，破坏了 WCAG 的调整大小与回流要求。每个 clamp() 表达式都应尊重把基础字号调到 200% 的用户。
原版关于缩放行为的警告——被截断的框架、消失的按钮标签、150% 下错乱的阅读顺序——已被写入规范。WCAG 要求文本放大到 200% 不丢失内容（1.4.4 调整文本大小），内容在 320 CSS 像素宽度下回流（1.4.10）。当年“为缩放而设计”的忠告，如今就是合规本身。
层级必须是结构性的，而不仅是视觉性的
本章最重要的新增内容是看不见的。屏幕阅读器用户感知不到某一行是 32 像素的粗体；他们感知到的是它是不是——以及是不是某个特定层级的——标题元素。屏幕阅读器用户的日常操作是调出标题列表并在其间跳转；一个“标题”只是放大加粗段落的页面，给他们的结构等于零。这正是 WCAG 成功标准 1.3.1“信息与关系”（A 级）的要求：通过视觉呈现传达的信息——包括层级——必须同时可被程序识别。
实践纪律分两半。其一，每个视觉上的标题都必须是真正的标题元素（h1 至 h6），且标题级别要反映文档的大纲：一个 h1 对应页面主题，h2 对应主要章节，h3 对应其小节，向下不得跳级。其二——设计师最常在这里出错——语义级别与视觉尺寸必须解耦。正确的标题级别由文档结构决定；正确的尺寸由设计决定。两者冲突时（应当低调的 h2、值得突出的 h4），保留结构级别，用 class 重新设定样式。为了默认尺寸去挑选标签，是网页上大多数大纲坏掉的根源。
字号之外的层级
2005 年的那一章把层级当作字号问题。成熟的实践把工作分摊到四个变量上——字号、字重、留白与色彩——而字号往往是其中效率最低的。字重上调一档（比如从 400 到 600），或标题上方的一段留白，都能像字号跳升一样清晰地宣告新章节的开始，却不占用纵向空间，也不挤压小屏幕。这既关乎经济性，也关乎无障碍：完全依赖字号的层级在窄视口下容易垮塌——展示级字号不得不缩小——而基于字重与留白的区分在任何视口下都能存活。可变字体让字重成为连续的轴，中间字重可以精确调校到某一层级所需的对比。色彩与次要线索绝不能独自承载层级——它们必须叠加在结构化标记和至少一种其他视觉信号之上，标题文字也仍需满足对比度要求。
还有两个较小的现代细化。多行标题受益于 text-wrap: balance，它使行长均衡，标题不会在最后一行孤悬一个词——一行小小的 CSS 声明，替代了多年的手工断行调整。标题的行距应在比例的每一级单独收紧（约 1.1–1.25，见前章），而不是从正文继承。
基础字号，正如原版所坚持的，依然至关重要：整套比例都由它乘出。现代的下限是浏览器默认的 1rem（默认 16px）正文——用 rem 而非像素设定，让用户偏好得以传导——长篇阅读往往在 1.125–1.25rem 时体验更佳。
CSS 实现
:root {
/* a fluid modular scale, ratio ≈ 1.25, anchored in rem */
--step-0: 1rem;
--step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
--step-2: clamp(1.55rem, 1.35rem + 1vw, 2.2rem);
--step-3: clamp(1.95rem, 1.55rem + 2vw, 3.2rem);
}
h1 { font-size: var(--step-3); text-wrap: balance; }
h2 { font-size: var(--step-2); text-wrap: balance; }
h3 { font-size: var(--step-1); }建议
- 从模数比例构建字号，比率大致在 1.2–1.5 之间，依内容密度选取。
- 用 clamp() 让比例流动，首选值中始终混入 rem 分量，以尊重用户的字号设置。
- 按 WCAG 1.3.1 使用真正的标题元素、遵循逻辑大纲——一个 h1，不跳级；绝不为尺寸而挑选标签。
- 语义与外观解耦：当结构与设计不一致时，用 class 为标题层级设定样式。
- 用字重与留白（而不只是字号）表达层级；避免只依赖字号或色彩的层级。
- 正文至少 1rem 并使用相对单位，验证层级在 200% 文本缩放与 320px 回流下依然成立。
- 为标题应用 text-wrap: balance 并收紧行距。