排版设计：字体选择与搭配
DesignTypography排版（Typography）能够极大地影响设计的 专业感和信息传达。错误的字体选择可能让情书看起来像勒索信，而正确的选择能让设计瞬间升华。
一、📖 两大字体家族
1.1 Serif（衬线体）
Serif 字体在笔画末端有 小脚（衬线）。这种设计源于古罗马大理石雕刻——凿子退出石面时无法形成 90° 直角，自然产生了衬线。
┌──────┐
│ T │ ← 中央竖笔
└──┬───┘
│
───┴─── ← 衬线（小脚）传达的情感：传统、稳重、权威、有历史感
1.2 Sans-Serif（无衬线体）
Sans-Serif（"Sans" = 法语"没有"）没有衬线，笔画末端是 完美直角。
┌──────┐
│ T │ ← 中央竖笔
└──────┘
│
│ ← 干净的直角末端传达的情感：友好、现代、简洁、易读
1.3 两大家族对比
| 维度 | Serif | Sans-Serif |
|---|---|---|
| 情感 | 传统、权威、正式 | 现代、友好、简洁 |
| 关键词 | 稳重、受人尊敬 | 明智、直截了当 |
| 典型用途 | 法律公司信头、建筑杂志、Vogue | 创业公司、科技产品、正文 |
| 代表字体 | Times New Roman, Georgia, Didot | Helvetica, Arial, Gill Sans |
二、🔍 Serif 子族
通过观察字母 最粗与最细部分的差异，可以判断一款 Serif 字体的"年代感"：
| 子族 | 粗细差异 | 年代感 | 代表字体 | 适用场景 |
|---|---|---|---|---|
| Old Style | 微小 | 最古老 | Garamond, Palatino | 酒庄、历史品牌 |
| Transitional | 中等 | 过渡期 | Times New Roman, Georgia | 通用正文 |
| Modern | 极大 | 现代感 | Didot, Bodoni | 时尚杂志（如 Vogue） |
| Slab-Serif | 粗衬线 | 实用/工业 | Rockwell, Courier | 标语、海报 |
Old Style Transitional Modern
o o o
(粗细差异小) (粗细差异中) (粗细差异极大)Vogue 的排版
Vogue 杂志的标题使用 Modern Serif（Didot），笔画粗细对比极端夸张，既权威又现代——"它知道自己在说什么"。
三、🔍 Sans-Serif 子族
| 子族 | 特点 | 代表字体 | 可读性 |
|---|---|---|---|
| Humanist | 笔画有粗细变化，最接近手写 | Gill Sans, Tahoma, Verdana | ⭐⭐⭐ 最高 |
| Grotesque | 笔画粗细较均匀 | Helvetica, Arial | ⭐⭐ 中等 |
| Geometric | 基于几何形状（圆/方） | Futura, Century Gothic | ⭐ 装饰性强 |
MIT 可读性研究
MIT 研究将两组驾驶者分别放入使用 Humanist 和 Grotesque 字体仪表盘的汽车中，追踪他们看仪表盘所需的时间。
| 字体类型 | 阅读仪表盘所需时间 |
|---|---|
| Grotesque（如 Helvetica） | 基准时间 |
| Humanist（如 Gill Sans） | 减少 30–40% |
在高速公路上以 100 km/h 行驶时，这个时间差可能是 生与死的区别。
可读性的关键特征
| 特征 | 说明 |
|---|---|
| 开放的字形 | 字母内部空间大（如 c、e 开口大） |
| 字母间距大 | 字母之间留有足够空间 |
| 无歧义的字形 | g 和 9 看起来明显不同 |
| 比例变化 | O（宽）和 0（窄）明显不同 |
四、🔗 字体搭配原则
4.1 核心规则
黄金法则
一个设计中最多使用 2 种 字体。更多会显得杂乱和不专业。
4.2 搭配要点
| 维度 | 做法 | 原因 |
|---|---|---|
| 情绪 | 选择 相似情绪 的字体 | 整体和谐 |
| 时代 | 选择 相同时代感 的字体 | 避免超现代 + 古典混搭的违和感 |
| 衬线性 | 对比：标题 Serif + 正文 Sans-Serif | 创造视觉兴趣 |
| 字重 | 对比：标题 Bold/Black + 正文 Light/Regular | 建立层次 |
4.3 经典搭配
| 标题（Heading） | 正文（Body） | 效果 |
|---|---|---|
| Serif（如 Playfair Display） | Sans-Serif（如 Lato） | 权威 + 可读 |
| Sans-Serif Bold（如 Montserrat） | Serif（如 Merriweather） | 现代 + 优雅 |
| Serif Bold（如 Cardo） | Sans-Serif Light（如 Open Sans） | 传统 + 清爽 |
五、🚫 应避免的字体
以下 6 种字体在专业设计中 极难用好，除非你在经营柠檬水摊：
| ❌ 字体 | 问题 |
|---|---|
| Comic Sans | 过于卡通，缺乏专业感 |
| Papyrus | 过于装饰，像"假古典" |
| Curlz | 难以阅读，幼稚 |
| Jokerman | 杂乱，完全不专业 |
| Brush Script | 过度手写感 |
| Impact | 过于压迫，难以与其他字体搭配 |
六、💡 实践要点
| # | 要点 | 说明 |
|---|---|---|
| 1 | 最多 2 种字体 | 一个设计区域内不超过两种 |
| 2 | Serif = 权威 | 法律、金融、历史品牌 |
| 3 | Sans-Serif = 友好 | 创业公司、科技、移动应用 |
| 4 | Humanist 最可读 | Gill Sans、Tahoma、Verdana 是正文首选 |
| 5 | 通过衬线性和字重创造对比 | 标题与正文应有明显差异 |
| 6 | 保持情绪和时代一致 | 不要把超现代和古典混在一起 |
七、📚 参考资源
- Google Fonts — 免费字体库
- Font Pair — 字体搭配推荐
- Typewolf — 实际网站排版参考