字体排印系统设计：如何构建可扩展的字体体系

选一个字体，不等于设计了字体排印系统。选两个看起来搭配好看的字体，依然不等于设计了字体排印系统。字体排印系统，是一套规则，它决定了你的产品、品牌或界面中，每一段文字在所有可能出现的场景中如何呈现。

大多数设计师会跳过这一步。他们选一个标题字体和一个正文字体，凭感觉估个尺寸，就算完成了。然后六个月后，营销网站用一套尺寸，App 用另一套，路演文稿用第三套，没有人能解释为什么品牌感觉不一致，尽管 logo 从来没变过。

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

字体排印系统真正包含什么

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

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

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

字体比例尺是基础

字体比例尺是一组由一致的数学比率生成的字体尺寸。不是凭感觉挑尺寸（这里 16px，那里 24px，hero 区也许 36px），而是选一个基础尺寸和一个比率，其他所有尺寸由此推导而来。

常用且有效的比率：

从 16px 基础尺寸开始（浏览器默认值，无障碍、可读性好），向上乘以比率得到标题尺寸，向下除以比率得到说明文字和标签尺寸。以 16px 为基础的大三度比例尺给你：10px、12.8px、16px、20px、25px、31.25px、39px。取整到干净的数值，你就有了一套看起来有意而为，而非随意为之的比例尺。

字体搭配是策略

互联网上充斥着"最佳字体搭配"列表。大多数不过是披着设计建议外衣的装饰建议。真正的字体搭配是有策略的。

真正有效的规则：

结构上形成对比，比例上保持和谐。 将几何无衬线字体与人文主义衬线字体搭配。结构对比创造视觉趣味。共同的 x 字高和比例让它们感觉天生一对。Inter + Merriweather。DM Sans + Lora。Satoshi + Source Serif。

每个角色一种声音。 你的标题字体承载个性。正文字体承载内容。UI 字体承载功能。试图让一种字体承担三种角色，最终只会得到一套感觉平庸或勉强的系统。

两种字体几乎总是够用的。 三种是任何需要保持可管理性的系统的上限。每增加一种字体，都会成倍增加你需要做出的搭配决策、字重决策和响应式决策。如果你觉得需要四种字体，你大概需要把两种字体用得更好。

在实际场景中测试搭配，而不是在字体样本中。 在字体样本海报上看起来漂亮的搭配，在卡片组件或导航栏内可能完全崩溃。在正式使用之前，在实际布局中测试。

在 stripe.com 上查看实例

字重与样式规则

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

错误在于不一致地使用字重。如果你的 H2 在营销网站是半粗体，但在 App 里是粗体，品牌感觉就会不同，尽管用的是同一种字体。字体系统将这些锁定：

• 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），因为小尺寸下的紧凑字距会降低可读性。

段落间距：

使用基础单位的一致倍数。如果你的基础是 16px 配合 4px 网格，段落间距应该是 16px 或 24px，而不是任意数值。这让每个页面的垂直节奏保持一致。

响应式行为

只在一个断点下有效的字体系统不是系统，是截图。

**流体排版**使用 CSS clamp() 在断点之间平滑缩放字体尺寸。不是在断点处从 16px 突然跳到 14px，而是尺寸平滑插值过渡。这消除了由硬性断点跳变引起的布局抖动。

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

移动端比例尺压缩。 你的桌面比例尺比率（比如 1.250）在小屏幕上会产生过多对比。桌面端 39px 的 H1 没问题。375px 手机上 39px 的 H1 不行。解决方案：在移动端压缩比率（降至 1.125 或 1.150），同时保持基础尺寸不变。层次保持，尺寸适配。

最小可读尺寸。 移动端正文永远不要低于 16px。任何文字都不要低于 12px。无障碍性不是可选项，小屏幕上的小字体会让真实用户受苦。

常见的字体系统失败案例

字体自助餐。 五种字体，毫无逻辑。每个页面都像是另一个品牌。

孤儿字重。 将极细（100）或极粗（900）字重用于某个装饰元素，仅此而已。增加了视觉噪音，却没有增加系统价值。

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

仅桌面端的比例尺。 在 1440px 设计稿上看起来很棒。在任何更小的尺寸上都会崩溃，因为没人测试响应式行为。

缺失的 tokens。 在 Figma 文件中定义的字体系统，但没有转化为设计令牌或 CSS 自定义属性。系统只存在于理论中，而不存在于代码中，所以工程师每次迭代都要重新发明它。

常见问题

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

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

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

两种是标准。三种是大多数系统的上限。一种展示或标题字体加一种正文字体，能满足绝大多数设计需求。增加更多字体会在搭配、字重和响应式决策上产生指数级复杂度。

最佳字体比例尺比率是什么？

没有单一最佳比率。大三度（1.250）适合营销和编辑类内容。小三度（1.200）适合密集型界面。纯四度（1.333）创造强烈的标题对比。选择与你的内容密度和层次需求相匹配的比率。

先构建系统，再选字体

字体是最后的决定，不是第一个。先定义你的比例尺、间距规则、字重层次和响应式行为。再选择符合这些约束条件的字体。一个平庸的字体放在出色的系统中，永远会胜过没有系统的出色字体。