通用之网

1.3 字重

为 2026 年重建的「常规至略粗」法则:连续的可变字重轴、借助字级实现的深色模式字重补偿、极细字重的流行问题,以及字重与 WCAG 对比度的相互作用。

10 min read

本页面借助 AI 辅助翻译。英文原文为权威版本。

2005 年关于字重的指导简洁而正确:正文应使用常规至略粗的字重;避免极细字体,其笔画对比过弱,低视力读者难以辨认;也要避免特粗至超黑字体,其闭合的字腔会让所有人的易读性受损。二十年过去,目标并未移动。变化的是它周围的一切——字重如今是一个连续变量,而不再是两三个字重档位的菜单;深色界面使字重变得依赖语境;而在这二十年间,流行风尚在很大程度上恰恰把界面排版拉向了本章所警示的方向。

2005 年以来的变化

2005 年,字重是离散的选择。一个字体家族通常只提供常规与粗体,或许再加细体与超黑,设计师从中挑选一个。可变字体消解了这一限制:wght 轴把字重暴露为一个连续区间,通常从 100 到 900,可通过 CSS 的 font-weight 或 font-variation-settings 精确调用。"常规至略粗"不再是从 400 到 700 的骤然跳跃——浅色模式下的正文可以是 430,深色背景上是 380,需要强化的小号标签则是 500。这条建议依然成立;能够如此精确地执行它,才是新事物。

一些字体家族更进一步,提供字级轴(GRAD),这一惯例因 Google 的 Roboto Flex 等家族而流行开来。字级改变笔画粗细而不改变字符宽度,因此调整它不会引起文本回流。凡是字重需要响应语境——深色模式、悬停状态、渲染差异——而又不能扰动版面的场合,这一区别都至关重要。

第二个变化是深色界面作为一等公民模式的兴起,可通过 prefers-color-scheme 查询。字重与明暗极性相互作用,而写于"深色文字配浅色背景"几乎一统天下时代的 2005 年指南,从未需要处理这个问题。

深色模式与字重补偿

深色底上的浅色文字,看起来比正极性下的同一段文字更重。明亮的笔画在深色环境的映衬下显得膨胀——这一效应通常用光晕(halation,即亮区光线的扩散)来解释,在自发光屏幕上、以及对患有散光或光散射类视觉状况的读者而言尤为明显。一款为"浅底深字"调校得恰到好处的字体,在"深底浅字"下会显得略微膨胀而模糊;字腔收紧,小字号下字母开始糊作一团。

实际的补偿办法是在深色模式下略微降低字重。借助可变的 wght 轴,把正文下调 20 到 50 个单位——比如从 400 调向 370——即可恢复设计意图中的笔画密度。若字体提供 GRAD 轴,它是更好的工具,因为负字级可以在不引起回流的前提下让笔画变细;这正是字级被设计出来要解决的用例。静态字体家族没有好的调节手段——这本身就是任何同时支持两种配色方案的产品应采用可变字体的一个论据。

深色模式还带来第二项相关调整:纯白文字配纯黑背景会把光晕最大化。略微柔化的前景色(米白色)与提升明度的深色表面,可以在几乎不牺牲对比度的情况下减轻眩光。字重补偿与明度柔化相辅相成。

极细字重问题

本章最强烈的修订不在规则本身,而在其紧迫性。2005 年,极细字体罕见,因为它根本无法渲染——96 DPI 屏幕上发丝般的笔画会直接消失。高密度显示屏让超细字重变得可渲染,流行风尚随即跟进:极细与特细字重在品牌、界面和大号展示文字中成了"优雅"与"现代"的速记符号。

可渲染不等于可阅读。一条 200 字重的笔画在设计师的高 DPI 屏幕上尚能幸存,到了标准密度显示器上便会退化,在低屏幕亮度或激进的夜间护眼滤镜下进一步变暗,而对低视力读者来说,可能完全跌破有效笔画对比的阈值。极细字体是一场层层叠加的赌博:赌每位读者都有出色的视力、高端的屏幕和全开的亮度。实测的对比度数值也会高估极细字体的真实表现:WCAG 的公式比较前景色与背景色,却不考虑笔画宽度,因此一款 100 字重的字体在技术上可以通过 4.5:1,而在相同颜色下呈现的可用对比度远低于 400 字重的字体。支撑 WCAG 3.0 草案的 APCA 研究正是针对这一缺口——它的模型把对比度、字号和字重视为相互作用的变量,对更细、更小的文字提出更严格的明度对比要求。这一演进方向印证了 2005 年的直觉:无论现行公式是否承认,字重都是对比度的一部分。

另一个极端无需过多重审。特粗与超黑字重在正文字号下仍会闭合字腔、粘连字形;它们依然是展示用工具。粗体保有其作为强调与层级手段的正当角色——WCAG 自身也承认粗体的贡献:粗体文字的大字号对比度阈值放宽至 14pt,而常规字重为 18pt。

从 100 到 900 的字重轴,其中 400 至 600 区间被标记为正文安全区——发丝级字重仅限展示用途,粗体用于强调,极细笔画在深色表面上会消失。

字重的实践

一套现代的字重策略大致如此。正文位于约 400 至 500 之间,按字体家族逐一选定——有些字体在 400 时画得偏细,450 反而更好读。强调比正文字重高出 200 至 300 个单位,使其明确无误而非模棱两可。深色模式通过 wght——或者更好地,通过 GRAD——减去一个适度的量。正文字号下不出现低于约 300 的字重,展示字号下低于此值的任何用法都要在标准密度屏幕、现实亮度下检验。在没有可变字体的场合,采用最接近这些目标的静态字重档,深色模式补偿则转为颜色柔化。

在 CSS 中

body { font-weight: 400; }
strong { font-weight: 600; }     /* semibold beats bold for emphasis */

@media (prefers-color-scheme: dark) {
  /* light-on-dark reads heavier — pull back with a variable axis */
  body { font-variation-settings: "GRAD" -20; }
}

建议

  • 正文保持在 400–500 区间,在可用时借助可变 wght 轴按字体逐一微调。
  • 深色模式下略微降低字重;若字体家族提供 GRAD 轴则优先使用,因为字级不会引起文本回流。
  • 在深色模式下柔化纯白配纯黑的组合,以抑制光晕。
  • 把低于约 300 的字重视为仅限展示用途,并在标准密度屏幕上验证;绝不用于连续文本。
  • 避免在正文字号使用特粗至超黑字重;把粗体用作比正文字重高 200–300 个单位的、深思熟虑的强调层级。
  • 不要让一个"达标"的 WCAG 对比度数值为极细笔画开脱——正如 WCAG 3.0 草案背后的 APCA 工作所明确指出的,字重是有效对比度的一部分。

延伸阅读