新手也能配出专业感的 5 种字体搭配套路：同字体不同粗细 / 同家族无衬线+衬线 / 几何无衬线+衬线 / 现代无衬线 / 手写+无衬线。
# 字体搭配 5 套路：标题 + 正文 + 强调，5 种专业级字体组合直接用
字体搭配是平面设计最难的部分——你以为选了好看的中文 + 好看的英文就完了，结果放一起像乱炖。这篇把 5 种最常用的字体搭配套路讲清楚，新手直接套模板，0 风险出稿。附件里有 15 种精选字体搭配卡（直接复制粘贴）和字体 SOP 速查表。
一、字体搭配的核心：对比 + 和谐
字体搭配两原则：
1. 对比：标题和正文必须有显著区别，否则视觉层级失效。
2. 和谐：两种字体共享一种属性（笔形 / 粗细 / 风格），避免风格冲突。
反例：
宋体标题 + 宋体正文：完全一致，无对比
Times 衬线 + Pacifico 手写：风格冲突
思源黑体（无衬线） + 思源宋体（衬线）：同家族，1 无衬线 1 衬线，对比 + 和谐
阿里巴巴普惠体（粗） + 阿里巴巴普惠体（细）：同字体不同粗细，最稳
标题（Heading）：Heavy / Bold（粗体）
正文（Body）：Regular / Light（常规 / 细体）
强调（Emphasis）：Medium（中等）
标题：思源黑体 Heavy（现代感）
正文：思源宋体 Regular（传统感）
强调：思源黑体 Medium
标题（英文）：Inter Bold（几何感）
正文（英文）：Merriweather（衬线，传统）
强调：斜体或 Bold
中文：思源黑体
英文：Inter
数字：Inter（保持一致）
标题：手写体（增加人格）
正文：思源黑体 Regular（不抢戏）
看不清
用户跳读
影响 SEO（用户停留时长降）
屏幕优先（网页 / APP / UI）：选无衬线
印刷优先（书 / 海报）：选衬线
品牌 Logo：单独定制
中英文场景：中文 + 英文各 1 个
纯英文 / 中文：选 1 个就够
截屏看 Windows / Mac / 手机效果
避免字体只在某平台有，部分用户看到默认字体
Adobe Fonts：订阅制，设计师最爱
Google Fonts：免费商用，全球 CDN，首选
思源黑体：GitHub 下载嵌入
15 套精选字体搭配卡（直接复制 CSS / Figma 字体样式）
字体 SOP 速查表（PDF）
正例：
二、5 种最稳的字体搭配套路
套路 1：同字体不同粗细（最安全）
主推：阿里巴巴普惠体 Heavy + 阿里巴巴普惠体 Light
搭配：
示例：大众点评、淘宝、京东都在用。
适合：所有场景，最保守。
套路 2：同家族无衬线 + 衬线（中文经典）
主推：思源黑体 + 思源宋体
搭配：
示例：故宫文创、传统媒体。
适合：文化、出版、内容平台。
套路 3：几何无衬线 + 衬线（现代 + 古典）
主推：Inter + Merriweather / Noto Serif
搭配：
示例：Medium、Substack、独立博客。
适合：博客、媒体、知识付费。
套路 4：现代无衬线 + 现代无衬线（活力）
主推：思源黑体 + Inter / PingFang SC
搭配：
示例：阿里、字节、腾讯的官网。
适合：科技、互联网、企业。
套路 5：手写 + 无衬线（情绪强）
主推：Pacifico / Lobster（英文手写）+ 思源黑体
搭配：
适合：儿童、饮品、文创、节日。
警告：手写体**只能做标题**，不能做正文——可读性差。
三、5 个字体规则
规则 1：≤ 2 种字体
反例：标题用思源黑体 + 副标题用 Inter + 数字用 Roboto + 正文用 PingFang = 4 种，视觉杂
正例：标题用 1 种 + 正文用 1 种 = 永远不出错
例外：需要时可以加第 3 种用于**特殊场景**（如 Logo 字体、引用字体），但不要 4 种以上。
规则 2：标题 ≥ 18pt，正文 14-16pt
标题：18-32pt（海报更大 60-100pt）
正文：14-16pt（屏幕）/ 10-12pt（印刷）
正文太小：
规则 3：行距 1.4-1.6 倍字号
屏幕：line-height: 1.5（默认中等）
印刷：1.3-1.4（更紧凑）
海报 / 大标题：1.1-1.2
规则 4：长段落用衬线
屏幕阅读：无衬线（清晰）
长文章阅读：衬线（眼睛舒服，**比无衬线慢 5-10% 阅读**但减少疲劳）
示例：经济学人、纽约时报——都是衬线。
规则 5：数字、中英文混排要等宽
数字混排对齐问题：汉字宽度 ≠ 数字宽度，"10 件" 看起来不协调。
CSS 修法：
.tabular-nums {font-feature-settings: "tnum" 1;}字体推荐：Inter / Roboto / 思源黑体都支持等宽数字。
四、字体选择流程
Step 1：明确场景
Step 2：选 1-2 个候选字体
Step 3：测跨平台显示
Step 4：用 Adobe Fonts / Google Fonts 引用
五、5 个字体错误
1. 标题用楷体
可用，但一定要小字号 + 装饰位置。标题用楷体 = 像药品广告。
2. 全文 Bold
Bold 是标题用的。正文全 Bold = 营销 spam 风。
3. 文字描边 + 阴影 + 渐变
= 经典 90 年代 PPT 风。要高级：纯色 + 足够字号。
4. 中英文用同一字体（如"中Inter"）
不行——思源黑体是中文设计，Inter 是英文设计，不能共用。
5. 系统字体（微软雅黑、宋体）当 Logo 字体
= 显得没定制感。Logo 必须选专业字体或自造字体。
六、字体排版工具
| 工具 | 用途 |
|---|---|
| Adobe Fonts | 高质量字体库 |
| Google Fonts | 免费商用，CDN 快 |
| 字体家 | 中文字体库 |
| 字由 | 字体管理客户端 |
| Figma 字体插件 | 在线字体编辑 |
写在最后
字体搭配不是审美，是规则。新手按"同字体不同粗细"或"无衬线 + 衬线"两种套路选，90% 设计稿都不会错。字体忌讳"5 种字体混用 + Bold 加阴影 + 渐变 + 描边"，朴素才是高级。
附件里有：
下载收藏，每次设计前先查卡。
立即收藏，下次设计不再字体翻车。
