字体系统设计：如何构建可伸缩的字体

选择一种字体并非设计一个字体系统。选择两种看起来不错的字体搭配在一起，也仍然不是设计一个字体系统。一个字体系统是一套规则，它决定了你的产品、品牌或界面中的每一段文本在所有可能出现的语境中如何表现。

大多数设计师会跳过这一步。他们选择一个标题字体和一个正文字体，凭感觉确定大小，然后就认为大功告成。结果六个月后，营销网站使用一套比例，应用程序使用另一套，演示文稿又使用第三套，没有人能解释为什么品牌感觉不一致，尽管标志从未改变。

这种不一致是一个字体系统问题。而且它是可以解决的。

字体系统实际包含什么

一个真正的字体系统定义了五件事：

1. 字体比例。 你的文本大小之间的数学关系。
2. 字体搭配。 哪些字体扮演什么角色，以及为什么。
3. 字重和样式规则。 何时使用粗体、斜体、中等字重，以及每种字重传达的信号。
4. 间距标准。 每种大小的行高、字间距和段落间距。
5. 响应式行为。 上述每个元素如何适应不同屏幕尺寸。

如果你的“字体系统”缺少其中任何一项，你拥有的只是字体选择，而不是一个系统。

字体比例是基础

字体比例是一组由一致数学比率生成的字体大小。你不再凭感觉选择大小（这里16像素，那里24像素，主视觉可能36像素），而是选择一个基准大小和一个比率，所有其他大小都由此派生。

常用且有效的比率：

从16像素的基准大小开始（浏览器默认值，易于访问，可读性好），向上倍增用于标题，向下除以用于说明文字和标签。从16像素开始的大三度比例会给你：10像素、12.8像素、16像素、20像素、25像素、31.25像素、39像素。四舍五入到整洁的值，你就会得到一个感觉有意为之而非随意设定的比例。

字体搭配是策略

互联网上充斥着“最佳字体搭配”列表。其中大多数是伪装成设计建议的装饰建议。真正的字体搭配是策略性的。

真正有效的规则：

结构对比，比例和谐。 将几何无衬线字体与人文衬线字体搭配。结构上的对比创造视觉趣味。共享的x字高和比例使它们感觉和谐统一。Inter + Merriweather。DM Sans + Lora。Satoshi + Source Serif。

每个角色一种声音。 你的标题字体承载个性。你的正文字体承载内容。你的UI字体承载功能。试图让一种字体完成所有三项任务，最终会导致系统感觉平庸或吃力。

两种字体几乎总是足够的。 对于任何需要保持可管理的系统，三种是最大值。每增加一种字体，你需要的搭配决策、字重决策和响应式决策的数量就会成倍增加。如果你认为你需要四种字体，你可能需要更好地使用两种字体。

在实际语境中测试搭配，而不是在字体样本中。 在字体样本海报上看起来很漂亮的搭配，在卡片组件或导航栏中可能会崩溃。在最终确定之前，请在实际布局中进行测试。

字重和样式规则

字重是层级。粗体意味着重要。中等字重意味着辅助。常规字重意味着正文。细字重意味着装饰性或次要性。这些关联已根植于人们的阅读方式中。

错误在于不一致地使用字重。如果你的H2在营销网站上是半粗体，但在应用程序中是粗体，那么即使字体相同，品牌感觉也会不同。字体系统会锁定这一点：

• H1： 粗体 (700)。始终如此。这是你最响亮的声音。
• H2： 半粗体 (600) 或 粗体 (700)。选择一个，并在所有地方使用。
• H3： 中等字重 (500)。对比度足以被识别，而不会与H2竞争。
• 正文： 常规字重 (400)。可读，中性，无摩擦。
• 说明文字和标签： 在较小尺寸下使用常规字重 (400) 或 中等字重 (500)。

斜体只有一个作用：在正文内强调。将斜体用于装饰目的（引文、章节标签）会稀释其含义，并使实际的强调变得不明显。

间距是系统崩溃之处

行高、字间距和段落间距是大多数“字体系统”悄然崩溃的地方。字体大小在不同产品中匹配，字重也匹配，但文本感觉不同，因为间距不一致。

行高规则：

标题需要更紧凑的行高（1.1到1.3），因为大文本在正文比例下会产生过多的垂直空间。正文需要更宽松的行高（1.5到1.8），以提供舒适的阅读体验。常见的错误是将1.5应用于所有内容，这会导致标题漂浮，并在错误的大小下使正文感觉局促。

字间距规则：

大文本（标题、展示文本）受益于略微负值的字间距（-0.01em到-0.02em）。大尺寸下的视觉间距会产生比预期更宽的空隙。小文本（说明文字、标签、大写字母）受益于略微正值的字间距（+0.02em到+0.05em），因为小尺寸下过紧的字距会降低可读性。

段落间距：

使用基准单位的一致倍数。如果你的基准是16像素，网格是4像素，那么段落间距应该是16像素或24像素，而不是任意值。这可以保持每页的垂直韵律一致。

响应式行为

一个只在一个断点下工作的字体系统不是一个系统。它只是一个屏幕截图。

流体排版 使用CSS clamp() 在断点之间平滑地缩放字体大小。尺寸不再在断点处从16像素跳到14像素，而是进行插值。这消除了硬断点变化带来的布局抖动。

font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem);

移动端比例压缩。 你的桌面比例（例如1.250）在小屏幕上会产生过多的对比度。桌面上的39像素H1效果很好。但在375像素的手机上，39像素的H1则不行。解决方案：在移动端压缩比例（降至1.125或1.150），同时保持基准大小不变。层级保持不变，大小适应。

最小可读尺寸。 移动端正文文本永远不要低于16像素。任何文本永远不要低于12像素。可访问性不是可选项，小屏幕上的小文本会给真实用户带来不便。

常见的字体系统失败

字体大杂烩。 五种字体，没有理由。每个页面都感觉像一个不同的品牌。

孤立的字重。 仅将细体 (100) 或 黑体 (900) 用于一个装饰元素，别无他用。它增加了视觉噪音，却没有增加系统价值。

间距猜测。 行高和字间距在组件之间变化，因为没有人定义规则。

仅限桌面的比例。 在1440像素的模型上看起来很棒。但在任何更小的屏幕上都会崩溃，因为没有人测试响应式行为。

缺失的令牌。 在Figma文件中定义的字体系统，但未转换为设计令牌或CSS自定义属性。系统理论上存在，但不在代码中，因此工程师在每个冲刺中都会重新发明它。

常见问题

设计中的字体系统是什么？

字体系统是管理品牌或产品中字体选择、大小、字重、间距和响应式行为的完整规则集。它超越了选择字体本身，定义了每段文本如何缩放并保持一致性。

一个设计系统应该有多少种字体？

两种是标准。对于大多数系统来说，三种是最大值。一种显示或标题字体和一种正文字体可以处理绝大多数设计需求。增加更多字体会在搭配、字重和响应式决策方面产生指数级的复杂性。

最佳字体比例是多少？

没有单一的最佳比例。大三度 (1.250) 适用于营销和编辑内容。小三度 (1.200) 适合密集界面。完全四度 (1.333) 产生强烈的标题对比。选择与你的内容密度和层级需求相匹配的比例。

在选择字体之前构建系统

字体是最后一个决定，而不是第一个。定义你的比例、间距规则、字重层级和响应式行为。然后选择符合这些限制的字体。一个在优秀系统中的普通字体，每次都会胜过一个没有系统的优秀字体。