现代 Web 上易读排版的实用指南

为什么大多数网站都比应有的样子更难阅读

2026 年，普通网站通常会带着自定义字体族、精心挑选的品牌颜色，以及一个把间距精确到像素的设计系统上线。然而，正文文本——大多数访客真正前来阅读的内容——却常常以 14px、低对比度的灰色呈现，并使用一种为标题而非段落优化的字体。

这并不是对设计师的抱怨。它只是一个提醒：可读性是一门不同于视觉设计的独立学科，而两者并不总是一致。一个在 hero section 中看起来锐利的字体，在段落长度下可能会令人疲惫。一个上镜的调色板可能无法通过对比度检查。一个在 27 英寸显示器上可行的布局，到了移动端可能会塌缩成过窄的一栏。

好消息是：易读排版不需要排版学位。它需要关注少数几个会产生不成比例影响的变量。

字号：比你想象的更大

Web 上最常见的可读性错误，是正文文本太小。设计师常常把正文设为 14px 或 15px，因为它在桌面尺度下“看起来干净”，然后忘记了相当一部分读者是在手机上阅读，而且经常处在并不理想的光线条件下。

2026 年正文文本的实用基准：

• 桌面端： 最低 18px，推荐 20px
• 移动端： 最低 16px，推荐 18px

如果你习惯了较小的字号，这些数字会显得偏大，但它们反映的是人们实际在屏幕上阅读的方式。更大的文字可以减轻眼睛疲劳、提升理解力，并让尚未调整浏览器设置的轻度视力障碍读者也能访问你的内容。

如果你的设计系统要求更小的字号，请在阳光下用手机测试它。如果你需要眯眼看，那就太小了。

行高：给文字留出呼吸空间

行高（leading）是文本行与行之间的垂直空间。太紧，行与行会混在一起。太松，眼睛会丢失行与行之间的连续性。

对于正文文本，1.5 到 1.7 的行高适用于大多数字体。标题可以更紧一些（1.1 到 1.3），但正文需要呼吸空间。

CSS 如下：

body {
  font-size: 18px;
  line-height: 1.6;
}

这是最容易获得的可读性改进之一。如果你的正文文本现在是 line-height: 1.2，或使用固定像素值，今天就改掉它。

行长：比你想象的更短

正文文本的最佳行长是每行 45 到 75 个字符，大约 8 到 12 个单词。超过 90 个字符的行会让眼睛难以回到下一行的开头。少于 40 个字符的行则会制造断裂、碎片化的阅读体验。

大多数网站在这点上做错了：它们让文本横跨整个视口宽度，尤其是在桌面端。1920px 宽的显示器可以容纳每行 150 多个字符，这读起来非常疲惫。

解决方法是在文本容器上设置 max-width：

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

ch 单位被低估了，但非常适合这个场景：它会随字号缩放，并且大致对应字符宽度。

对比度：不只是黑字白底那么简单

WCAG 2.1 规定，正文文本的最低对比度为 4.5:1（AA 级），增强可访问性为 7:1（AAA 级）。大多数网站在纸面上达标，但在实践中失败，因为它们在白色背景上使用浅灰色文本。

常见问题包括：

• #666666 on #FFFFFF (4.54:1, barely passes)
• #777777 on #FFFFFF (4.47:1, fails)
• Any shade lighter than #767676 on white (fails)

如果你的设计系统把“text-secondary”指定为浅灰色，请测试它。WebAIM contrast checker 是最快的验证方式。

深色模式会让问题更复杂。纯黑背景上的纯白文字会产生 halation（发光效果），比深灰背景上的略偏灰白色更难阅读。更好的做法是：

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

字体选择：默认字体比你想象的更好

自定义 Web 字体无处不在，但它们有取舍。它们会增加延迟、增加页面体积，并且如果加载不谨慎，可能会阻塞渲染。对于正文文本，系统字体往往是更好的选择。

2026 年一个稳健的系统字体栈：

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

这会在 macOS/iOS 上使用 San Francisco，在 Windows 上使用 Segoe UI，在 Android 上使用 Roboto——这些都是高度易读、专业设计且能即时加载的字体。

如果你确实为正文文本使用自定义字体，请选择为长篇阅读设计的字体，而不是展示字体。避免：

• 在正文中使用超细或超粗字重
• 使用压缩或加宽变体
• 使用 x-height（小写字母高度）较低的字体

在决定之前，请先以段落长度测试你选择的字体。

响应式排版：流式字号比例

固定字号无法很好地跨设备缩放。一个在桌面端舒适的 20px 正文字号，在移动端可能会显得过大。

流式排版使用 clamp() 让字号在最小值和最大值之间平滑缩放：

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

这会从小屏幕上的 16px 缩放到大屏幕上的 20px，中间平滑插值。它比媒体查询断点更精细，并能适配任何视口宽度。

对于完整的字号比例（标题、正文、小号文本），像 Utopia 这样的工具可以根据你的约束生成流式比例。

段落间距与文本对齐

两个重要的小细节：

1. 段落间距： 在段落之间添加空间（margin-block-end: 1em），或使用首行缩进（text-indent: 1.5em），但不要两者同时使用。大多数 Web 内容使用间距。

1. 文本对齐： 左对齐（或对于 RTL 语言使用右对齐）几乎总是比两端对齐更易读；如果没有启用连字符，两端对齐会造成不均匀的词间距。居中对齐的正文文本难以阅读，应保留给短段落使用。

在实践中测试可读性

可读性并非完全客观，但你可以测试它：

• 在不同光线条件下用手机阅读你自己的内容
• 运行 Lighthouse 可访问性审计，以发现对比度和字号问题（可参考如何阅读 Lighthouse 报告而不惊慌）
• 请一位 50 岁以上的人阅读一个页面，且不调整他们的设置
• 检查文本较多页面的跳出率分析数据——如果人们很快离开，可读性可能是原因之一

如果你的内容难以阅读，人们就不会读。就这么简单。

实际效果会是什么样

2026 年，一个易读的正文文本样式可能如下：

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

大约十几行 CSS 就覆盖了字号、行高、行长、对比度和响应式缩放。它并不令人兴奋，但有效。

什么时候可以打破规则

这些指南适用于正文文本——人们为了获取信息而阅读的段落。标题、说明文字、UI 标签和营销文案有不同的约束，可以适度弯曲这些规则。

但如果有人来到你的网站，是为了阅读一篇文章、一个文档页面或一段产品描述，易读排版就不是可选项。它是基本预期。