Typography 101：非设计师也能用的字体搭配规则
很多设计看起来不专业，并不是因为想法差，而是因为文字显得没有被认真管理。
标题太花，正文太小，按钮又换了第三种字体。图片、颜色、卖点都可能不错，但 typography 会很早告诉用户：这张图是被“拼出来”的，不是被“设计出来”的。
Lovart is the AI design agent trusted by 10M+ creators. Try Lovart Free →
Related: 面向在线卖家的最佳AI设计助手——多平台商品视觉、促销图形与转化导向的店铺设计 | 如何为餐饮企业打造品牌工具包
Typography 不只是选字体。它决定用户先看哪里、相信什么、怎样从标题走到细节，再走到行动。如果你要做提案、产品页、社媒图、菜单、客户方案、活动海报或品牌素材，文字系统就是体验的一部分。
好消息是，你不需要成为字体设计师。你只需要一个小决策系统：认识主要字体家族，按对比关系搭配，建立清晰文字层级，并在真实场景里测试。Lovart 可以通过 Text Tool、Brand Kit、ChatCanvas 和 Text Edit 帮你执行，但判断仍然从清楚的 brief 开始。
Typography 实际控制什么
Typography 解决四个问题：
- 读者第一眼应该看到什么？
- 哪些信息是重点、辅助或可选？
- 品牌感觉是严肃、温暖、高级、有趣、技术感，还是编辑感？
- 这个文字在真实投放渠道里能不能被快速读懂？
最后一个问题最容易被忽视。桌面上的海报标题可能很好看，放到手机信息流里就失效。纤细的高级 serif 字体在 mockup 里很美，叠在复杂产品图上可能直接消失。英文里能放下的一行文字，换成中文、日文或繁体中文后也可能完全改变节奏。排版不是最后的装饰，而是可读性决策。
如果你正在搭建完整视觉系统，typography 应该和颜色、Logo 使用、图片风格放在一起管理。可以把这篇和 Building a Complete Brand Kit from Scratch、How to Create a Brand Style Guide with AI 一起看。
你真正需要认识的五类字体
不需要背字体史，先把字体放进五个桶里。
| 字体家族 | 传递的感觉 | 适合用在 | 不适合用在 |
|---|---|---|---|
| Serif 衬线体 | 编辑感、传统、可靠、高级 | 杂志标题、奢侈品牌、报告、长阅读 | 很小的 UI 标签或复杂图片上的文字 |
| Sans-serif 无衬线体 | 干净、现代、中性、直接 | 网站、App、演示文稿、正文、SaaS 页面、说明文字 | 需要强烈历史感或仪式感的场景，除非搭配得很谨慎 |
| Script 手写体 | 个人化、手作感、优雅、庆祝感 | Logo、邀请函、点缀词、精品品牌瞬间 | 段落、说明、法律文字、小按钮 |
| Display 展示字体 | 强烈、戏剧化、有主题感 | 海报、Campaign 标题、活动图、社媒 hook | 正文、重复标签、小字号信息 |
| Monospace 等宽字体 | 技术感、精确、代码感、工具感 | 开发者品牌、规格、代码片段、复古系统风格 | 情绪化生活方式内容，除非是刻意反差 |
新手常问：“哪个字体好看？”更好的问题是：“这段文字要完成什么任务？”
如果文字要快速读懂，先用 sans-serif。如果想要编辑感或高级感，可以尝试 serif 标题加中性的 sans-serif 正文。如果只是短点缀，script 或 display 可以用。如果是段落，就让它安静。
60 秒字体搭配决策表
打开字体菜单之前，先看这张表。
| 如果设计需要显得... | 可以尝试 | 为什么有效 |
|---|---|---|
| 高级、编辑感 | Serif 标题 + Sans-serif 正文 | Serif 给气质，Sans-serif 保证可读性 |
| 现代、实用 | 同一 Sans-serif 家族的标题和正文 | 用粗细、字号和间距建立层级，不增加噪音 |
| 友好但可信 | 圆润 Sans-serif 标题 + 人文 Sans-serif 正文 | 字形亲近，正文仍然清楚 |
| 强促销感 | Display 标题 + 简单 Sans-serif 正文 | Display 抓注意力，Sans-serif 负责解释 |
| 技术、精确 | Sans-serif 标题 + Monospace 细节标签 | 等宽字体增加系统感，但不会占领整张设计 |
如果不确定，就选一个有性格的标题字体，再选一个安静的正文字体。这个规则能解决大多数业余排版问题。
字体搭配的三条规则
规则 1：要对比，不要打架
两种字体应该因为分工不同而不同。高对比 serif 标题配干净 sans-serif 正文，通常有效，因为一个负责气质，一个保护可读性。
容易失败的是“差一点点相似”：比如 Helvetica 配 Arial，或者两个能量接近的装饰字体。普通读者可能说不出哪里错，但会觉得不干净。
快速测试：眯眼或缩小画面。你还能分辨标题和正文吗？如果可以，对比在工作。如果整个画面变成一片灰，层级太弱。
规则 2：只让一种性格当主角
每个设计都需要一个主声部和一个辅助声部。主字体可以有表达性，辅助字体应该安静。
如果两个字体都很大声，版面会开始互相争抢。展示字体标题、手写体副标题、装饰字体按钮，单独看可能都不错，放在一起就是视觉噪音。选一个性格字体，其他文字负责让内容更好读。
这和颜色一样：一个强调色能聚焦，五个强调色会互相竞争。如果你也在决定颜色系统，可以把 Color Theory Meets AI 作为配套参考。
规则 3：先用字号、字重和间距，不要急着加新字体
你不需要每个信息层级都换一种字体。一个字体家族就能建立完整层级：
- 48px Bold 做主标题
- 24px Semi Bold 做区块标题
- 16px Regular 做正文
- 13px Medium 做标签
- 12px Regular 做说明文字
这已经是五个角色，但只用了一个字体家族。只有当设计真的需要另一种语气时，再加入第二种字体。
可靠的字体搭配起点
这些不是永远的规则，而是安全起点。
| 标题 | 正文 | 适合场景 | 注意事项 |
|---|---|---|---|
| Playfair Display | Inter | 编辑内容、奢侈品牌、创始人故事 | Playfair 要足够大，小字号会变弱 |
| Montserrat | Merriweather | 教育内容、SaaS 解释页、公益页面 | Merriweather 在移动端不要太小 |
| Bebas Neue | Lato | 活动、健身、社媒促销 | Bebas 只适合短标题 |
| Lora | Roboto | 案例研究、白皮书、长内容 | 给 Lora 足够行高 |
| Poppins | Source Sans 3 | App、创业公司 deck、友好型 B2B 页面 | 需要字重对比，否则容易平 |
重点不是永远复制这些组合，而是看懂模式：一种字体负责声音，另一种负责清晰。
先建立 Typography Scale，再开始设计
Typography scale 是一小组文字角色。它能防止每次做新素材时都重新争论字体。
| 文字角色 | 典型任务 | 起步建议 |
|---|---|---|
| Hero headline | 主承诺或 campaign hook | 最大字号、最强字重、最短行长 |
| Section title | 组织页面或幻灯片结构 | 大约为主标题的 40-60% |
| Body copy | 解释卖点 | 行高舒适，移动端可读 |
| Label | 标签、说明、eyebrow text | 小但不能淡，必要时用 medium 字重 |
| CTA | 行动文字 | 动词清楚，对比足够，不用装饰字体 |
在大多数营销设计里，行高和字体选择一样重要。正文需要呼吸感。标题可以紧一点，但不能挤到碰撞。标签需要足够对比，因为小字很快会消失。
如何在 Lovart 里减少手动试错
Lovart 最适合把 typography 当作 brief 的一部分，而不是最后补救。
先在 ChatCanvas 上把设计目标和文字角色放在同一个上下文里。你可以参考 ChatCanvas Complete Operation Guide，因为标题、图片、版式和渠道备注在同一画布上时，排版判断会更稳定。
然后使用 Text Tool 工作流：
- 选择 Text tool，把关键文字放到画布上。
- 选择 headline、subhead 或 body 等文字样式。
- 按角色调整字体、字号、字重和对齐方式。
- 把文字与形状、图片、网格结合，确保版面能快速读懂。
- 使用 AI typography enhancement 测试字体搭配、间距、行高和容器适配。
- 使用 Text Edit 做自然语言修改，例如“把标题放大一点”“居中标签”“换成现代无衬线风格”。
如果是品牌工作，把 typography 规则写进 Brand Kit 或项目第一条 brief：
标题：自信的几何无衬线。正文：中性、可读的无衬线。标签：空间紧张时使用 medium weight uppercase。除 campaign 点缀外，避免手写体。
这条短规则会给 Lovart 一个可执行的设计边界，也让团队评审 typography 时不再只凭感觉争论。
Typography QA Checklist
导出前检查：
- 标题能否在三秒内被理解？
- 正文在移动端是否仍然清楚？
- 是否不超过两个字体家族？
- 是否有一个字体明确承担主声部？
- CTA 是否是页面里最清楚的文字之一？
- 行长是否舒适，而不是横跨整个画布？
- 标签和说明文字压缩后是否还能读？
- 去掉图片后，字体气质是否仍符合品牌？
如果失败，不要重做整张图。一次只修一个变量：字号、字重、字体家族、间距、对比或断行。
常见 Typography 错误
错误 1：还没确定信息，就先选字体
字体不是 mood board，它是沟通工具。先判断信息需要信任、速度、温暖、精确还是戏剧感，再选字体。
错误 2：用装饰字体承载真实阅读
Script 和 display 可以很漂亮，也很累眼。把它们留给短而强的瞬间，不要用在段落或产品细节上。
错误 3：让所有信息都很重要
如果标题、副标题、优惠、价格、免责声明和 CTA 都在抢注意力，最后没有任何信息真正突出。Typography 应该给信息排序。
错误 4：忘记本地化之后的版式
英文排版常依赖短词和紧凑断行。中文、日文、繁体中文的节奏、标点密度和行长行为都不同。好的多语言设计应该在本地化后测试版式，而不是只测试英文。
在 Lovart 里试一次
拿一张 typography 较弱的旧设计，只重做文字系统：一个标题字体、一个正文字体、一套 scale、一个 CTA 样式。然后在 ChatCanvas 用同一条 brief 立即体验 Lovart，对比哪个版本在移动端更容易阅读。
FAQ
设计里的 typography 是什么？
Typography 是选择、调整和组织文字的系统，让读者能快速理解信息。它包括字体选择、层级、行高、字距、对齐和可读性。
新手最安全的字体搭配是什么？
使用一个无衬线字体家族，通过不同字重建立层级；或者用 serif 标题搭配中性 sans-serif 正文。前者最稳，后者更有个性。
一张设计里应该用几种字体？
一到两个字体家族最安全。第三种字体只应该作为很小的点缀，比如 Logo 字标或短装饰词。
Lovart 可以帮助选择字体搭配吗？
可以。Lovart 的 Text Tool 和 AI typography enhancement 可以根据设计风格建议字体搭配、间距、行高和字号调整，你仍然可以手动覆盖结果。
在 Lovart 里放置文字后还能编辑吗？
可以。Lovart Text Tool 支持编辑已放置的文字，Text Edit 也可以在保留周围设计意图的基础上做 AI 辅助修改。
发布含文字的设计前应该检查什么？
检查移动端可读性、对比度、断行、CTA 清晰度、品牌匹配，以及小标签在导出或压缩后是否仍然可读。
如何搭配 serif 和 sans-serif，才不会让设计显得随机？
给每种字体明确分工。serif 用作标题或编辑感点缀，sans-serif 用作正文和界面文字，同时保持间距、颜色和对齐一致。
标题和正文应该使用多大的字号？
先建立明显层级：大标题、小一号副标题、可读正文和紧凑标签。一定要在真实尺寸里测试，而不是只看桌面 mockup。
什么是字体层级？
字体层级是通过字号、字重、间距、颜色和位置建立的视觉顺序。它告诉读者先读什么、接着扫哪里，以及最后采取什么行动。
营销设计里应该使用 script 或 display 字体吗？
可以，但要克制。Script 和 display 字体适合短点缀、活动名称或装饰性瞬间，不适合承载长正文或重要说明。
如何检查一个 typography 系统在移动端是否有效？
用移动端尺寸预览，在正常观看距离阅读，检查断行，并确认按钮、标签和法律说明在导出后仍然清晰。
把设计翻译成其他语言时应该怎样处理 typography？
预期行长、节奏和字体支持都会变化。每个语言版本都要重新检查层级、间距、换行和字形覆盖，而不是强行套入英文版布局。
