这些字体搭配示例提供了可直接使用的标题与正文组合，也给出了一套简单的判断方法，帮助你在字体上线到网页前先评估效果。好的搭配能让阅读顺序一目了然：标题吸引注意力，段落则让人愿意顺畅读完。先选择一款易读的正文字体，再适度加入对比。
可尝试的 20 组字体搭配
衬线标题 + 无衬线正文
- Playfair Display + Source Sans 3
Playfair Display 能让标题呈现出高对比度的编辑风格。Source Sans 3 则能让段落、导航和图注保持平静、清晰。
- DM Serif Display + Inter
将 DM Serif Display 用于大尺寸文章标题或特色卡片。Inter 适合作为实用的平衡，为说明文字和界面文案提供支撑。
- Libre Baskerville + Lato
Libre Baskerville 具有成熟稳重的感觉，同时不过分华丽。Lato 开放、亲切的字形让页面更容易接近。
- Cormorant Garamond + Work Sans
Cormorant Garamond 很有个性，适合较短的标题。Work Sans 则能避免其余布局显得过于装饰化。
- Merriweather + Open Sans
这是适合学习内容和长文章的可靠搭配。Merriweather 能打造稳固的标题，Open Sans 则能很好地承载密集的说明文字。
- Lora + Nunito Sans
Lora 带有文学气质。Nunito Sans 增添柔和感，因此这组搭配适合亲切的指南和新闻通讯。
- Bodoni Moda + Manrope
Bodoni Moda 戏剧感很强，因此应保留给较大的展示文字。Manrope 让正文承担现代而不抢眼的角色。
- Fraunces + Arial
Fraunces 最适合简短且富有表现力的标题。Arial 刻意保持朴素，从而让展示字体成为焦点。
无衬线标题 + 衬线正文
- Montserrat + Merriweather
Montserrat 用于标题时整齐直接。Merriweather 增添温度，也让长段落不那么机械。
- Poppins + Georgia
对比很容易看出来：圆润的几何标题字体搭配熟悉、适合屏幕阅读的正文字体。这是一组适合初学者的实用搭配。
- Archivo Black + Source Serif 4
Archivo Black 能营造强有力的标题。Source Serif 4 则为正文恢复更安静的阅读节奏。
- Space Grotesk + Charter
Space Grotesk 让标题带有当代、技术感十足的锋芒。Charter 是适合分析性写作的易读衬线字体。
- League Spartan + Crimson Pro
League Spartan 紧凑而厚重；Crimson Pro 则更传统、更舒展。由于两款字体都很醒目，应给标题留出充足空间。
- Roboto Slab + Roboto
Roboto Slab 和 Roboto 是 Roboto 字体系统中不同但相关的字体家族。板状衬线让标题更有结构感，而 Roboto 则让正文和界面标签保持统一。
无衬线标题 + 无衬线正文
- Oswald + Source Sans 3
Oswald 狭长且吸睛，尤其适合短标题和卡片标签。Source Sans 3 更宽、更平和，适合段落。
- Bebas Neue + Montserrat
Bebas Neue 适合简短的全大写展示文字，而不适合正文。Montserrat 能提供支撑，又不会重复它的狭长字形。
- Raleway + Arial
Raleway 独特的大写字母很适合标题。Arial 则为段落提供中性的基础。
- Futura + Helvetica
这组搭配更依赖角色区分，而非强烈对比：Futura 用于几何风格的展示文字，Helvetica 用于辅助文案。应明显增大标题字号或提高字重，避免层级消失。
衬线标题 + 衬线正文
- Cormorant + Libre Baskerville
当 Cormorant 明确作为展示字体、Libre Baskerville 承担段落时，这组搭配会很有效。若字号相近，两者可能显得过于华丽。
- DM Serif Display + Source Serif 4
展示衬线字体与正文字体可以共存，前提是职责划分明确。不要把 DM Serif Display 用于小字号文字，并用 Source Serif 4 承担持续阅读。
如何在 30 秒内测试一组搭配
使用真实的示例文本，而不是占位文字。一款字体在只有两个词的模型中看起来不错，放进段落后可能会令人疲劳。
```text 标题：为什么你的第一个答案总让你觉得如此有说服力
副标题：一份快速指南，帮助你在推理错误影响判断前发现它。
正文：一个自信的答案，不一定有充分证据支持。接受一项主张之前，先检查它使用了什么证据、作出了哪些假设，以及遗漏了哪些信息。 ```
然后检查四件事：
- 眯起眼看页面。标题仍应是你最先注意到的内容。
- 按预定字号阅读正文。如果单个字母过于抢眼，就更换正文字体或调整其字重。
- 加入一个按钮标签和一条图注。它们能检验这组搭配是否能应对实际界面文字。
- 测试窄屏视口。换行不自然的标题可能需要调整宽度、字号或字体。
这是一项判断练习，而且正确答案往往比设计师愿意承认的更多：如果读者无法判断从哪里开始读，信息层级就失败了。
可直接复制的 CSS 示例
在通过网站常规的字体工作流程加载相关字体文件后，可将以下内容作为起点。
编辑风格文章：DM Serif Display + Inter
```css :root { --font-display: "DM Serif Display", Georgia, serif; --font-text: Inter, Arial, sans-serif; }
.article-title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.75rem); font-weight: 400; line-height: 0.98; letter-spacing: -0.02em; }
.article-body { font-family: var(--font-text); font-size: 1.0625rem; font-weight: 400; line-height: 1.65; max-width: 68ch; } ```
清晰的学习界面：Roboto Slab + Roboto
```css :root { --font-heading: "Roboto Slab", Georgia, serif; --font-ui: Roboto, Arial, sans-serif; }
.lesson-heading { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; line-height: 1.1; }
.lesson-copy, .quiz-option, .button-label { font-family: var(--font-ui); font-size: 1rem; font-weight: 400; line-height: 1.55; } ```
不要把这些数值当作固定规则。若正文字体显得拥挤，先检查行高和行长，再考虑放弃这款字体。
有效字体搭配背后的原则
通过一到两种方式制造对比
对比可以来自衬线与无衬线、狭长与宽阔、几何体与人文体，或明显不同的字重。你不需要同时使用所有对比。
Bebas Neue 和 Montserrat 在宽度与结构上已经不同。再加上紧密字距、极端字重和多种颜色，原本清晰的系统就可能变得嘈杂。
为每款字体分配职责
大多数页面需要两种角色：
- 用于页面标题、简短引文和特色卡片的展示字体
- 用于段落、标签、说明和导航的正文字体
只有在解决实际问题时才加入第三个字体家族，例如代码示例。如果信息层级必须依赖许多字重和颜色才能成立，就应简化系统。
保护正文的可读性
避免在长篇文字中使用全大写、极细字重、狭长字体或紧密字距的文本。这些可以成为有效的点缀，却不适合作为阅读的默认设置。
还应检查数字、标点符号、撇号和引号。一组搭配在标题中可能显得精致，但遇到日期、百分比或测验答案时，可能就不协调了。
可用性与授权说明
Futura 和 Helvetica 均为商业字体，因此在使用其字体文件前，请确认项目已取得所需授权。Charter 的可用性和使用条款会因发行版本而异，因此请检查你计划发布的具体版本。
如果需要免费可用的替代方案，可以尝试以 Jost 获得类似 Futura 的几何风格、以 Arimo 获得类似 Helvetica 的中性无衬线风格，并使用 Libre Baskerville 或 Source Serif 4 作为易读的 Charter 替代选择。替代字体不会完全相同；请结合实际布局进行测试。
练习视觉推理
比较字体搭配是视觉推理的一种实用练习：识别预期的阅读顺序，找出相互竞争的元素，并选择能更清楚体现信息层级的布局。试试 PurrLearn 的字体排版测验，练习辨别哪个选项让标题、正文和辅助文字各自承担明确的职责。
常见问题
对初学者来说，最容易上手的字体搭配是什么？
Merriweather 和 Open Sans 是可靠的起点。衬线与无衬线之间的对比很明显，而且每款字体都有清晰的角色。
可以搭配两款无衬线字体吗？
可以。应在宽度、字重或用途上形成有意义的差异。Oswald 与 Source Sans 3 的搭配有效，是因为 Oswald 狭长且面向展示用途，而 Source Sans 3 则为日常阅读而设计。
一个网站应该使用多少款字体？
通常两个字体家族就足够了。第三款可用于代码、数据或刻意设计的品牌点缀，但每增加一个字体家族，一致性就更难维持。
标题和正文可以使用同一个字体家族吗？
可以。可以在同一字体家族内通过调整字号、字重、行高和间距，建立真正的单字体层级。这不同于 Roboto Slab 与 Roboto 的搭配：它们相关，但仍是不同的字体家族。
结语
最出色的字体搭配示例不只是好看：它们会告诉读者先读什么，也让接下来的阅读更舒适。选择一款能力足够的正文字体，在标题中加入受控的对比，并在最终确定前用真实文案测试这组搭配。