第四章 字体与排版：Material Type Scale 深度解析
好，我们直接进入正题。字体排版这件事，说实话，很多设计师和前端都容易忽略。但你知道吗？一个界面看起来「专不专业」，80% 的功劳都在字体和间距上。Material Design 在这方面有一套非常成熟的体系，叫 Type Scale。今天我就带你把它吃透。
4.1 什么是 Material Type Scale？
简单说，Type Scale 就是一套预定义的字体大小层级。它规定了从最大的标题到最小的标注，每个层级该用多大字号、多粗字重、多高行距。
我个人习惯，拿到设计稿第一件事，就是看它的 Type Scale 是否统一。如果每个页面标题大小都不一样，那基本可以断定这个项目后期会乱成一锅粥。
核心原则：Type Scale 不是让你自由发挥的，而是给你一个「约束」。好的设计，恰恰是在约束中诞生的。
Material Design 定义了 13 个层级，从 Headline 1 到 Caption。我挑几个最常用的给你讲讲。
4.2 字体层级详解
4.2.1 Headline（标题层级）
Headline 是最大的字体，用于页面的大标题、Hero 区域。它分 1 到 6 六个级别。
| 层级 | 字号 | 字重 | 行高 | 字间距 |
|---|---|---|---|---|
| Headline 1 | 96sp | Light (300) | 112sp | -1.5 |
| Headline 2 | 60sp | Light (300) | 72sp | -0.5 |
| Headline 3 | 48sp | Regular (400) | 56sp | 0 |
| Headline 4 | 34sp | Regular (400) | 40sp | 0.25 |
| Headline 5 | 24sp | Regular (400) | 32sp | 0 |
| Headline 6 | 20sp | Medium (500) | 28sp | 0.15 |
嗯，这里要注意。Headline 1 和 2 用了 Light 字重，为什么？因为字号足够大时，细体反而更优雅。我在项目中遇到过，有人把 Headline 1 设成 Bold，结果整个页面像在「喊」一样，完全没有呼吸感。
4.2.2 Title（标题层级）
Title 比 Headline 小，用于卡片标题、弹窗标题、列表项标题等。
| 层级 | 字号 | 字重 | 行高 | 字间距 |
|---|---|---|---|---|
| Title Large | 22sp | Regular (400) | 28sp | 0 |
| Title Medium | 16sp | Medium (500) | 24sp | 0.15 |
| Title Small | 14sp | Medium (500) | 20sp | 0.1 |
Title Medium 是使用频率最高的。你想想看，App 里大部分卡片标题、列表标题，都是 16sp Medium。这个值我建议你记在脑子里，面试也常考。
4.2.3 Body（正文层级）
Body 是阅读内容的主力。Material 把 Body 分 Large 和 Small 两种。
| 层级 | 字号 | 字重 | 行高 | 字间距 |
|---|---|---|---|---|
| Body Large | 16sp | Regular (400) | 24sp | 0.5 |
| Body Small | 14sp | Regular (400) | 20sp | 0.25 |
Body Large 是默认正文。但注意，它的行高是 24sp，比字号多了 8sp。为什么？因为中文阅读需要更大的行距，否则文字会挤在一起。我曾经在项目中把行高设成 20sp，结果用户反馈「看着眼睛累」，后来改回 24sp 就好了。
4.2.4 Caption（标注层级）
Caption 是最小的字体，用于辅助信息、时间戳、标签等。
| 层级 | 字号 | 字重 | 行高 | 字间距 |
|---|---|---|---|---|
| Caption | 12sp | Regular (400) | 16sp | 0.4 |
| Overline | 10sp | Medium (500) | 14sp | 1.5 |
Overline 是 Material 3 新增的，用于小标签、徽章等。它的字间距特别大（1.5），这是为了让小字更清晰。我刚开始用的时候觉得 1.5 太夸张了，后来在 10sp 的尺寸下一看，嗯，确实有必要。
4.3 行高与字间距的玄机
行高和字间距，是排版里最容易翻车的地方。我直接给你几个经验值：
- 行高 = 字号 × 1.4 ~ 1.6：中文推荐 1.6，英文推荐 1.4。为什么？因为中文笔画密集，需要更多空间。
- 字间距 = 字号 × 0.02 ~ 0.05：大标题用负间距（-0.5 ~ -1.5），小字用正间距（0.25 ~ 1.5）。
- 段落间距 = 行高 × 1.5：段落之间至少留一个半行的空间，否则读者分不清哪里是段落结束。
我的小技巧：在 CSS 里，我习惯用 line-height: 1.6 作为全局默认值。然后针对标题单独覆盖。这样既统一，又灵活。
4.4 Noto Sans 与 Roboto 字体应用
Material Design 推荐了两款字体：Roboto 用于英文，Noto Sans 用于中文。为什么是它们？
- Roboto：Google 专门为屏幕阅读设计的无衬线字体。几何感强，字怀较大，在小屏幕上依然清晰。
- Noto Sans：Google 的「无豆腐块」字体。覆盖全球所有语言，中文部分由方正字库合作设计，笔画干净利落。
实际项目中，我通常这样搭配：
/* 全局字体设置 */
body {
font-family: 'Noto Sans SC', 'Roboto', -apple-system, sans-serif;
}
/* 英文内容单独指定 */
.en-text {
font-family: 'Roboto', 'Noto Sans SC', sans-serif;
}注意顺序：中文在前，英文在后。因为 Noto Sans SC 也包含英文字形，但 Roboto 的英文更专业。所以中文页面用 Noto Sans SC 兜底，英文页面用 Roboto 优先。
避坑指南：我曾经在项目中直接用了 font-family: 'Roboto', 'Noto Sans SC'，结果中文页面全部显示 Roboto 的英文 fallback，中文字体根本没加载。后来才发现，浏览器会按顺序匹配，如果 Roboto 不包含中文字形，它不会自动跳到 Noto Sans SC，而是用系统默认字体。所以一定要把 Noto Sans SC 放在前面。
4.5 实战：用 SVG 绘制 Type Scale 结构图
下面我用 SVG 画一张 Type Scale 的层级关系图，帮你直观理解。
这张图从左到右，层级逐渐变小。你可以看到，Headline 到 Title 到 Body 再到 Caption，字号、行高、字间距都在变化。这就是 Type Scale 的「节奏感」。
4.6 实际项目中的避坑指南
最后，我总结几个实际项目中容易踩的坑：
- 不要混用不同字重的同一字体：比如 Headline 用 Light，Body 用 Regular，没问题。但如果你在同一个层级里混用 Regular 和 Medium，视觉上会非常割裂。
- 行高不要用 px 写死：用相对值（如 1.6）或 em。为什么？因为用户可能调整系统字体大小，px 写死会导致文字重叠。
- 中文不要用斜体：中文没有真正的斜体，浏览器会强行倾斜，效果很差。如果你需要强调，用字重或颜色代替。
- 字间距不要乱加：大标题可以加负间距，但正文加负间距会变成一坨。小字加正间距可以提升可读性，但加太多会显得松散。
我的习惯：每次开始一个新项目，我会先建一个 _typography.scss 文件，把 Material Type Scale 的 13 个层级全部定义成 CSS 变量。然后所有组件都引用这些变量。这样后期改字体大小，只需要改一个地方。
好了，字体排版这块，核心就是「统一」和「节奏」。Type Scale 给了你统一的框架，行高和字间距给了你节奏感。剩下的，就是多练、多调、多看。
公众号:蓝海资料掘金营，微信deep3321