好的字体搭配，并不是找到两款漂亮的字体，而是要为它们分配清晰的职责，建立足够的对比来体现层级，并让页面始终易于阅读。使用以下字体搭配规则，在设计变得杂乱或显得随意之前，先判断一组字体是否合适。
基本规则：搭配的是角色，而不只是字体
大多数设计都需要两种排版角色：
- 用于标题、标签或简短陈述的展示字体
- 用于段落、说明和长篇阅读的正文字体
当读者能立刻分辨这两种角色，同时又觉得两款字体属于同一个页面时，这组搭配就是有效的。如果字体彼此争抢注意力，或看起来几乎一模一样，这种搭配只是在增加无谓的复杂度。
作为简单的起点，可以选择一款有表现力的字体，搭配一款克制的字体。例如，高对比度衬线体标题可以很好地搭配中性的无衬线体正文。几何无衬线体标题，则可能更适合搭配人文主义无衬线体或易读的衬线体正文。
1. 建立对比，而不是制造混乱
两款字体应当在某个明显的方面有所不同：衬线体与无衬线体、宽与窄、几何风格与人文主义风格，或粗与细。
常见错误是选择两款几乎相同、却又不完全一样的字体。圆润的无衬线体再搭配另一款圆润无衬线体，可能会让标题看起来像是不小心改了格式，而不是刻意建立的层级。
有效： 用一款有特色的衬线体做标题，搭配干净的无衬线体段落文字。
通常无效： 两款相似的无衬线体，一款略宽、一款略圆，并且使用相近的字重。
如果你无法用一句话说明两款字体的差异，对比可能就太弱了。
2. 让一款字体主导
选择一个主导声音。标题字体可以令人印象深刻；正文字体通常应当融入阅读体验，不抢注意力。
这条规则可以避免“一页上有两张海报”的问题。装饰性手写体和戏剧化的展示衬线体，在字体菜单里看起来或许很吸引人；但一旦配上真实文案，两者都会显得用力过猛。
一个实用测试：
- 写一个六到十个词的标题。
- 在下方添加一段约 60 个词的文字。
- 眯起眼睛看，或把页面缩小查看。
- 确认标题明显是第一视觉重点，而段落依然显得平静舒适。
如果两者都在要求同等程度的注意力，就该简化了。
3. 先匹配气质，再匹配细节
字体不需要拥有完全相同的字形，但应当共同支持相容的语气。
正式的编辑风格衬线体，可以很好地搭配低调的怪诞无衬线体（grotesk sans serif）。友好的圆润无衬线体，也可以搭配柔和、易读的衬线体。当字体个性互相冲突时，问题就出现了：活泼的泡泡字体配上严肃的法律风格正文字体，除非这种反差正是设计重点，否则通常会显得不够自然。
问自己两个问题：
- 每款字体是否都适合主题？
- 它们是否可能出现在同一份出版物中？
对于学习测验页面，清晰和活力通常比新奇更重要。一款有自信的标题字体，加上一款不打扰阅读的正文字体，往往已经足够。
4. 为标题和正文分配不同职责
不要只依赖字体家族来建立层级。字号、字重、行距和颜色同样重要。
标题字体可以使用 32 像素或更大的字号，配合粗字重和较紧的行高。正文则需要更多空间：舒适的字号、常规字重，以及足够的行高，让视线能顺畅地从一行移动到下一行。
一个实用的默认设置：
- 标题：粗体或半粗体，较紧的行高
- 正文：常规字重，更宽松的行高
- 图注和标签：字号更小，但仍应易读，并且清楚地处于次要层级
如果一款正文字体必须调得远大于预期才能看清，它大概并不适合作为正文字体。
5. 使用比你想象中更少的字重
一个字体家族可能包含很多字重，但大多数界面并不需要全部使用。字重过多会削弱层级，因为每一段文字都会获得各自不同的视觉处理。
试试这个精简系统：
- 标题：粗体
- 副标题：半粗体
- 正文：常规体
- 强调：斜体或半粗体，谨慎使用
这也会让混搭字体显得更协调。一致的字重选择，是一种低调但有效的结构。
6. 检查 x 高度和比例
x 高度（x-height）指的是“x”这类小写字母的高度。x 高度较大的字体，在相同字号下通常显得更大、更直接。x 高度较小的字体可能更优雅，但为了舒适阅读，往往需要使用更大的字号。
搭配字体时，应当使用真实文本进行比较，而不是只看字母样张。一款小写字母较高的标题字体，可能会压过显得小巧纤细的正文字体。调整字号或许有帮助，但作用有限。
快速比较方法：
- 用相同字号，将同一句话分别设置为两款字体。
- 观察小写字母、标点和数字。
- 判断哪一款显得更强势。
- 先确保正文字体易读，再据此调整标题字体的大小。
易读性才是限制条件。不要为了让搭配看起来平衡，就缩小有用的文字。
7. 用真实内容测试字体搭配
Lorem ipsum 占位文本会掩盖问题，真实内容则会暴露问题：长单词、引号、数字、链接、粗体短语和换行。
测试字体搭配时，可以使用这段文字：
> 哪个假设最能削弱这项论证？阅读主张，找出缺失的逻辑连接，然后选择能直接攻击它的答案。
然后检查：
- 你能快速扫读这个问题吗？
- 斜体和粗体样式是否仍然清晰？
- 问号和撇号看起来是否自然？
- 阅读数行之后，正文是否依然舒适？
排版既是视觉问题，也是推理问题。读者的注意力应该放在问题本身，而不是费力解读页面。
8. 一个页面最多使用两个字体家族
通常两个字体家族就足够了。第三款字体很少是真正的解决方案；它往往说明前两款字体还没有被分配明确角色。
无需增加新的字体家族，也能创造变化：
- 调整字号
- 调整字重
- 为特定用途使用斜体
- 调整间距
- 谨慎使用颜色来区分标签或行动号召
如果页面需要特殊的展示效果，把它限制在一个小区域，其余系统保持稳定。
快速字体搭配决策清单
确定一组搭配前，回答以下问题：
- 我能否一眼分辨标题字体和正文字体？
- 它们之间的差异是否明显，而不只是细微？
- 正文放在完整段落中是否读起来舒适？
- 粗体、斜体、数字和标点是否都好用？
- 我是否将页面限制在两个字体家族和少量字重之内？
五个“是”是很强的信号。如果你对易读性有所犹豫，先更换正文字体。
排版小测验：找出更强的字体搭配
先试着回答，再查看答案。
问题 1
一个学习页面使用粗体、富有表现力的衬线体作为标题，并使用中性的无衬线体作为 16 像素正文。为什么这组搭配很可能有效？
A. 两款字体都具有装饰性 B. 字体角色清晰，并且对比明显 C. 正文比标题小 D. 衬线体总是适合搭配无衬线体
答案：B。 衬线体与无衬线体之间的对比，有助于读者区分层级，而且两者的角色明确。选项 D 过于绝对：许多成功搭配使用两款衬线体或两款无衬线体。
问题 2
你搭配了两款现代无衬线体。读者一眼看不出哪一款用于标题。最好的第一步修正是什么？
A. 加入第三款字体 B. 把每一行都设为粗体 C. 选择对比更强的标题字体，或强化层级 D. 减少段落间距
答案：C。 问题在于区分度不足。通过字体家族、字重、字号，或三者共同建立更清晰的对比，才能解决真正的问题。
问题 3
一款正文字体在 16 像素时看起来很优雅，但读者阅读长段落很吃力。什么应该指导你的决定？
A. 因为它看起来精致，所以继续使用 B. 在文字周围增加视觉效果 C. 优先考虑易读性，并测试另一款正文字体 D. 只在全大写时使用它
答案：C。 正文必须承载持续阅读。只有在文字读起来舒适之后，优雅才有意义。
如需更多练习，可以试试 PurrLearn 的排版测验，在揭晓答案前先判断每组搭配。真正有用的能力不是记住字体名称，而是发现层级、对比和阅读阻力。
常见问题
可以搭配两款无衬线体吗？
可以。关键是让对比具有明确意图。可以将几何无衬线体与人文主义或窄体无衬线体搭配，并赋予它们清晰不同的角色、字号和字重。两款几乎相同的无衬线体则很难区分。
标题是否一定要使用不同字体？
不一定。一个拥有多种字重的字体家族，就能建立强大且一致的系统。只有当第二款字体能为语气或层级带来有用差异时，再加入它。
一个网站应该使用多少种字体？
对于大多数页面，一到两个字体家族已经足够。在添加新的字体家族前，先利用字号、字重、间距和颜色创造变化。
对初学者来说，最简单的字体搭配规则是什么？
先选择易读的正文字体，再选择一款明显不同、但气质相容的标题字体。用真实的标题和段落来测试这组搭配，而不是只看孤立的字母。
为什么一组字体在样机图中好看，放到页面上却失败了？
样机图通常展示的是简短而理想的文字。真实页面包含更长的段落、链接、标点、粗体文字和不理想的换行。应当用读者实际会看到的内容进行测试。
结论
最好的字体搭配规则其实很简单：建立角色，创造明显对比，保护正文的易读性，并保持克制。把每组搭配都当作一次小型判断测试。如果读者能立刻看出重点，并舒适地阅读后续内容，那么这套排版就在发挥作用。