如何让字体排版适应不同屏幕

响应式排版要让标题在周围空间变化时，依然清晰易读，并保持恰当的突出程度。流式排版是在一个范围内连续调整字号；基于断点的排版则在指定宽度切换字号。两种做法都需要设定边界，也都需要与内容相称的文字栏。在手机上缩小字号，只是其中的一部分。标题即使没有超出容器，也可能显得拥挤、在别扭的位置换行，或压过下方用于解释它的段落。

以这句虚构的标题为例：“A calmer way to manage complex projects.”（更从容地管理复杂项目。）在宽页面上，它分成两行可能很舒展；到了窄屏，却可能挤成五行，最后只剩一个“projects”孤零零地落在底部。这时，答案未必是缩小字号。也可能是文字栏本来就过窄、字体的字形比例偏宽，或桌面版的强制换行让窄屏上的文字形成了不合适的形状。

GOV.UK 调整了小字号文字，而不只是大标题

GOV.UK 提供了一个值得参考的反例：手机上并不需要把所有文字都缩小。它的现行字号体系让正文在小屏幕上仍保持 19px，而特大标题则从 48px 调整为 32px。不同文字角色采用不同的响应方式，是因为它们承担的阅读任务不同。

在解释此次排版修订的文章中，团队提到，社区担心小字号文字进一步缩小，以及这对视力障碍人士的影响。下文涉及的数值应以当前实现为参考；那篇较早的文章则用于说明调整的动机。

对于产品页，这个例子提示我们，应拆开两个经常被混为一谈的决定：屏幕变窄时，展示型标题可能需要降低视觉分量，但操作说明、资格条件和正文段落仍须保持舒适的阅读体验。把所有文字角色按同一倍数缩放，可能解决了标题的问题，却又制造出正文难读的问题。

一条可测试的流式字体 CSS

对于展示型标题，可以从下面这条示例规则开始尝试：

.page-title {
  font-size: clamp(2rem, 1.25rem + 3vw, 4rem);
}

当根字号采用默认的 16px 时，这条规则会让标题在 390px 视口下约为 32px，在 768px 下约为 43px，在 1440px 下约为 63px。它的实用之处，在于同时为字号设置了下限和上限。

这个计算中有两个值得检查的切换点：视口宽度低于 400px 时，字号取最小值 32px；超过约 1467px 时，取最大值 64px。在两者之间，视口每增加 100px，标题就增加 3px。了解这一点后，规则就更容易判断：如果标题在 900px 左右突然多出一行别扭的换行，就可以把文字栏的可用宽度与字号增长速度放在一起检查，而不是凭感觉另猜一个手机端字号。

先把这个公式当作候选方案。在中间宽度，标题的增长速度可能超过文字栏的增长速度，结果是屏幕变宽了，标题反而多了一行。接受这条缩放曲线之前，先把实际会用到的最长标题放在真实图片旁检查。如果中间状态不成立，就降低字号的增长速度，或重新分配栏宽；给每个标题都加手动换行，只会带来维护问题。

公式中包含 rem，并不代表流式规则就一定能通过文字缩放检查。浏览器缩放会同时改变有效视口空间和文字大小，而视口单位这一项可能抵消部分字号增幅。要实际测试浏览器缩放，以及增大默认文字设置后的渲染结果。要求是内容仍然可读、可获取，而不只是样式表里出现了相对单位。

换字体前，先说清不舒服在哪里

觉得标题不舒服时，先说清楚自己看到了什么。“字号太大”和“行数太多”是不同的问题。“太挤”可能是字母贴在一起、相邻行太近，也可能是整块文字紧挨着图片。不同的判断，对应着不同的调整。

把标题读出声，再看看换行是怎样切分这句话的。如果某一行停在一个短小的连接词之后，可能会打断自然的阅读节奏；如果最后一行特别短，也可能显得像排版失误。这两种情况不一定构成可用性问题，但都能解释为什么一个原本干净的页面看起来还没有收好尾。

接着，暂时遮住周围的图片。如果没有图片时标题就显得舒适，问题可能在整体构图，而不只是文字排版。图片的边缘会让文字栏显得比实际更窄；细节繁多的插图，也可能与那些在空白背景上很清楚的文字争夺注意力。

为每级标题规定角色

页面主标题、章节标题和卡片标题，各自承担不同的任务。主标题确立整页的主题；章节标题帮助读者浏览论述或产品内容；卡片标题用来区分重复出现的项目。不能只因为它们使用相同的字体，就让各级标题以同样的幅度缩放。

在前面的项目管理示例中，主标题可以更有表现力。名为“让决策与工作放在一起”的章节标题，应当容易被注意到，但不应争抢第一眼的关注。名为“项目历史”的卡片标题，则需要与它的说明文字协调相处。如果每一级标题到了桌面端都变得过大，整页就可能像一组促销横幅。

先确定这些层级之间的关系，再选择具体数值。决定读者应该先看到哪一级、每一级通常包含多少文字，以及它是否会出现在图片旁边。随后，用每一级中最长且合理的实际例子来测试。只能容纳最短标题的排版体系，可以用来展示，却无法成为可靠的页面规则。

不要用大字号弥补含糊的措辞。“你需要的一切”可以排得很漂亮，却仍然不能说明这个章节讲什么。如果读者必须逐段细看，才能知道页面包含哪些内容，那么要让标题更有作用，除了改善间距，也需要把话说得更准确。

检查文字栏是否获得了合适的宽度

标题如何换行，取决于分配给它的空间。 缩小字号之前，先检查容器：两侧内边距、网格间隔、空栏，或不必要的大图片，都可能在挤占文字空间。这些选择在更宽的版面上或许合理，只是沿用得太久了。

仍以前面的虚构标题为例，比较两个采用相同文字样式的窄屏布局。一个保留很大的两侧留白，把文字挤进细窄的栏里；另一个适度减小留白，同时与整页的其他部分保持一致。第二种布局完全不用改变字号或字重，就可能让标题舒展起来。

宽屏上会出现相反的问题。如果让标题横跨整页，它可能变成一条很长的横带，削弱与下方内容的联系。设置最大宽度，可以保留标题应有的版面形状。应根据实际标题来选择这个宽度，而不是认定某个字符数就能保证每行的长度。

别忘了，同一字体里的字母也并不等宽。能放下十二个窄字母的栏，不一定能放下十二个宽字母。基于排版单位的数值可以作为起点，但最终仍要看实际文字的渲染效果。品牌名或技术术语必须保持完整时，这一点尤其重要。

选择缩放范围，而非无限增长

你可以只设置少量字号切换，也可以采用流式字号。只要上下限合理，两种方法都能奏效。关键在于：在那些专门设计过的视图之间，标题会如何变化？

web.dev 的排版课程解释了流式字号，并提醒不要只用视口单位来设置文字大小。它更广泛的观点也适用于这里：阅读体验不只取决于选了什么字体。字号规则中应保留相对文字尺寸的部分，并测试读者改变缩放或文字偏好后会发生什么。

要检查缩放范围的中间状态。标题在最小和最大字号时都可能很好看，却在中间变成别扭的三行。调整栏宽或字号增长速度，可能比再增加一次突然的字号切换更有效。规则也应足够容易理解，让后来的人能在文案变化时继续维护。

调整文字内部及周围的间距

行高：让一句话仍是整体

行间距决定了一个多行标题能否被感知为完整、易读的一句话。间距过小，相邻行可能在视觉上相撞，尤其是较高的大写字母和带下伸部分的字母；间距过大，各行又可能被拉得太开，看起来像几个互不相关的标签。

比较实际字形，而不只是样式面板里的数值。小写字母高度较大的字体，在另一个字体适用的行高下可能显得拥挤。较重的字重会增加页面上的深色面积，让间隙显得更小。带重音符号的字符，也可能暴露出原始样例中不明显的行框过紧问题。

评审时，选用同时包含大写字母、小写字母和标点的标题。用“WORK BETTER”替代页面上实际会出现的大小写混排句子，并不是好的测试，因为它隐藏了几种重要字形。如果页面支持多种语言，最终也应把那些语言的文字纳入标题测试。

标题下方的间隔，要单独判断。 为了拉开标题与正文的距离而增加行间距，会改变标题内部的关系，可能适得其反。应单独设置标题到段落之间的间隔，再检查这两个元素是否仍然显得彼此相关。

字距：保留词形

如果标题每一行都有足够空间，整体却仍然显得压缩，就值得检查字距。较大的负字距，在大型静态构图中可能很有冲击力，但缩小后却会让人读得不舒服。同样的字距设置，换成更细或更粗的字重，效果也可能不同。

先从字体的默认字距出发，再比较小幅调整。观察圆形字母、斜向笔画，以及连续竖笔画等组合，不要只判断第一个词。某个改动可能让“calmer”看起来舒展开来，却让句子另一部分显得松散。

要保持单词在视觉上的整体感。过大的正字距会减慢识别，把一句话拆成一个个孤立的字符；它还会增加总宽度，反而造成你原本想消除的换行。标题已经较长时，需要把字距和栏宽放在一起评估。

不要对全大写标题和句首大写标题采用完全相同的处理。主标题上方的全大写短标签，可能适合略微增加字距；较长、采用正常句式大小写的标题，通常需要更克制的设置。字距应该服务于文字的角色。从小标签上照搬的样式，很少适合直接成为主标题的规则。

换行：避免只能适应单一版面的断行

精心安排的换行可以改善一个版面，却也可能让它难以适应变化。如果在项目管理示例标题的“manage”之后插入换行，后半句话在宽屏上可能很漂亮；但到了较窄的宽度，前半句可能本来就要自动换行，于是又多出一行，超出预期。

添加手动换行之前，先尝试调整宽度和字号。如果设计确实需要手动换行，就记录它适用的条件，并检查超出这些条件时会发生什么。不要默认英语里选好的换行位置，也应该保留在每种译文里。

不要只为保持喜欢的文字形状，就强行让一整段长短语不换行。完全禁止换行，可能让文字超出容器，或迫使字号缩小到无法阅读。只有在拆开确实会损害含义时，才让相关内容保持在一起，例如一个较短的数值与它的单位；这样处理后，也要重新检查剩余空间。

如果最后一行显得太短，可以考虑是否能在不丢失含义的情况下修改文案。删去不必要的短语，可能同时改善句子与布局。但不能为了排版而删掉产品限制、有意义的限定条件，或读者识别这项产品或服务所需的术语。

用颜色和字重支撑层级

大标题不需要同时叠加所有强调手法。粗字重、紧字距、明亮渐变和浓重阴影，可能在同一块文字中互相争抢。先决定由哪种处理来承担突出的作用，再让其他手法保持克制。

如果页面已有色彩丰富的插图，纯深色标题可能反而最能建立清晰的阅读顺序。如果设计需要微妙的渐变，就检查渐变较浅的部分是否仍能在背景上清楚呈现。原尺寸下清晰的标题，缩到较小屏幕或放在明亮图片旁时，可能失去足够的对比度。

区分次要信息时，先组合使用字号、字重和位置，再考虑大幅减淡颜色。低调的副标题也应该容易阅读。图注和标签同样如此：把它们淡到几乎看不见，并没有建立有用的层级，而是让信息消失了。

先快速扫一眼页面，再持续阅读。扫视时，应能确立主要主题；细读时，应能不费力地找到补充细节。如果所有标题都在同样大声地争抢注意力，适当减轻部分字重或缩小部分字号，可能比再增加一种强调色更有效。

测试实际加载的字体

预期字体加载成功时，或者字体加载失败时，设计都可能发生变化。不同的字母宽度会改变换行，并推移附近的内容。评审应把回退字体状态也纳入其中，而不是假定每位访客都能立即看到相同的排版。

开发评审时，要确认实际渲染的是哪款字体，以及字体资源中是否包含所需字重。请求一个资源并不具备的字重，可能产生意料之外的结果。如果标题显得异常粗重或狭窄，应先核实字体资源，再用字距调整去补偿。

观察文字形状改变后对布局造成的影响：正文是否向下跳动？徽章是否压住标题？固定高度的首屏是否裁掉了最后一行？这些观察比只说字体“看着不一样”更有用，因为它们说明了布局需要容纳哪些情况。

回退字体不必与品牌字体在视觉上完全一致，但应让页面保持可用。留出足够弹性，使标题即使占用不同的行数，也不会破坏这一节的布局。即使精确呈现品牌字体很重要，也仍然必须兼容加载条件不一致这一现实。

做一轮精简的标题评审

选择三个标题：页面主标题、一个较长的章节标题，以及通常会出现的最长卡片标题。把它们放在周围内容中评审，而不是只看孤立的字体样张。检查窄、中、宽三个视图，再在它们之间连续调整宽度，观察是否出现突变。

在每个视图中，都完整读一遍标题。检查换行是否保留了含义、内部间距是否舒适，以及标题是否仍能与正文区分开。然后增大浏览器缩放，再重复关键的阅读任务。要看实际结果，不能假定某种字号技术天然就能保证良好的表现。

换一个更长的标题，测试后续维护时的适应能力。对于这个虚构页面，可以改成“A calmer way to manage projects across distributed teams.”（更从容地管理分布式团队的项目。）这不代表要采用这句文案，而是要看组件能否承受合理的编辑改动，不必每次都单独修补。

用日常语言记录决定，例如：“窄屏下，标题可以增加一行；保持句子完整，并允许这一节随内容长高。”这比在所有尺寸下都维持某张截图的确切行数更经得起变化。它会告诉下一位编辑：设计重视什么，又允许什么改变。

在 OpenDesign 中提出具体修改

OpenDesign 的 HTML 预览，以及桌面、平板和手机视图，可以帮助你比较同一个标题在不同布局中的表现。需要有针对性地修订时，指出具体标题，以及观察到的阅读不适。如果只是间距或受支持的样式属性问题，手动编辑可能就够了；如果涉及结构，可以在聊天中描述请求和希望保留的约束。

例如，要求保留措辞和字体、放松过紧的字距，并允许标题在窄屏中多占一行。这样，修订就能集中在排版上。笼统地要求“让整个首屏更高级”，可能改动插图、颜色和文案，却没有解决最初的阅读问题。

修改完成后，回头检查评审集合中的全部三个标题。共享样式的影响，可能不止于眼前正在看的主标题。比较相关视图，确认补充文字仍然承担原本设定的角色。