外观
排版层级
界面文字"没主次、一团乱"，根子不在审美，而在字号随手乱定。专业设计靠一套固定递增的字号阶梯（Type Scale），界面才有清晰层级、才协调。
为什么界面"没主次"
微信首页一屏信息很多：消息标题、摘要、时间、未读数、联系人名……如果全用一种字号，用户不知道"先看哪"。"没主次"的根源，是字号随手定——每个字都一样大，就没人告诉你"这个重要、那个次要"。专业设计不靠感觉，靠一套 Type Scale（字号阶梯）。
层级出问题的根源 = 字号随手乱定，所有字一样大，用户失去"先看哪"的引导。
Type Scale：字号阶梯
Type Scale 是一组有规律递增的字号。规律有两种来源：等比（每个约是上一个的 1.2~1.6 倍）或基准递增（在基准上按固定差值加）。关键不是数字本身，而是**"有规律"**——字号待在这条阶梯的某个台阶上，不再天马行空。
一条典型阶梯：12 → 14 → 16 → 20 → 24 → 28 → 34（辅助 · 说明 · 正文 · 小标题 · 标题 · 大标题 · 超大标题）。
层级 Hierarchy：落差的本质
把不同信息放到不同字号台阶上，就形成了层级——用户不用思考，眼睛自动按"标题→正文→辅助"的顺序扫。关键澄清：不是"标题越大越好"。如果标题 34px、正文 30px，两者几乎一样大，层级就塌了。层级的本质是落差，不是单个字的绝对大小。宁要"17 和 12"的清楚落差，不要"34 和 30"的模糊一团。
标题 20~24px 粗（"看这里"）· 正文 16~17px 常规（"读这个"）· 辅助 12px 常规（"闲着才看"）。
建立层级的三个工具
字号是主工具，但配齐三样才专业：字号拉开大小落差、决定"谁先被看到"；字重加粗强调，让同一字号里"某一层更重"；颜色用深浅区分，浅灰 = 次要，黑/红 = 重要。三者配合：字号定顺序，字重定强调，颜色定轻重。
三工具分工：
| 工具 | 作用 | 依赖知识点 |
|---|---|---|
| 字号 | 拉开大小落差，决定"谁先被看到" | 04 字体基础 |
| 字重 | 加粗强调，让同一字号里"某一层更重" | 04 字体基础 |
| 颜色 | 用深浅/饱和度区分，浅灰=次要，黑/红=重要 | 03 色彩 |
微信首页四层拆解
消息列表四层（可复现）：
| 元素 | 字号 | 字重 | 颜色(#) | 层级 |
|---|---|---|---|---|
| 未读角标数字 | 12px | Bold 700 | 白字 on 红底 | 特效级（靠颜色+字重） |
| 消息标题（联系人或群名） | 17px | Medium 500 | 近黑 #000 | 一级（字号最大+中粗） |
| 消息摘要（最后一条内容） | 15px | Regular 400 | 浅灰 #999 | 二级（字号次之+浅色） |
| 时间（右上角"昨天/15:30"） | 12px | Regular 400 | 更浅灰 #c0c0c0 | 三级（字号最小+最浅） |
微信首页"消息"列表，四个元素靠字号 + 字重 + 颜色，做出了从强到弱的四层。注意：未读角标数字只有 12px，为什么它最抢眼？ 因为它字号虽小，但颜色反差最大（红底白字）。这就是三工具配合的威力——不能用字号，就用颜色和字重顶上。
微信字号从上往下递减（17→15→12），颜色从深到浅（黑→浅灰→更浅灰），只有未读数用红色+白字强推——字号、字重、颜色三件套一次凑齐。
深度
如何选基准字号？
基准 = 正文字号，一切从它出发。界面正文 16~17px 是安全区：
- 以 16px 为基准：标题往上跳 2-3 档（20~24px），辅助往下 1-2 档（12~14px）。
- 以 17px 为基准（微信）：标题 20px、辅助 12px。
- 规则：先定正文，再定标题和辅助，别反过来。
何时用等比 / 何时用等差？
| 增长方式 | 规律 | 用在哪 |
|---|---|---|
| 等比（×1.2~1.6） | 差值越来越大：12-14-17-20-24-29-34 | 桌面/网页、大屏，标题级数多，视觉更舒展 |
| 等差（+固定值） | 差值一样：12-14-16-18-20-22 | 手机小屏、紧凑界面，档位密、不浪费空间 |
- 手机 App 常用等比小比例（约 1.25）或粗等差，因为屏幕小，档位太密会挤。
- 记住：界面主流是"等比、小比例"，微信那套 17/15/12 就是精简版等比的直觉体现。
在 Penpot 里怎么设 Type Scale？
- 先定正文 17px，把它作为基准。
- 标题文字设 20~24px、字重 Medium/Bold。
- 辅助文字设 12~14px、颜色改浅灰。
- 检查落差：标题、正文、辅助三者字号和颜色都要"看得到差距"。
边界：什么时候别用 Type Scale？
- 正式/品牌大标题（启动页、H5 首屏）：可以突破阶梯，用特大字号做视觉冲击——但正文仍守阶梯。
- 数据密集（表格、仪表盘）：用更小更密的等差，但层级仍要保留。
- 规则：Type Scale 是"日常叙事"的秩序，不是"所有文字"的枷锁。题干越大越要留白，别让所有字号都挤在阶梯顶端。
误区
| 误解 | 正解 |
|---|---|
| "标题越大越好" | 层级靠落差，不是靠绝对大小。34/30 的模糊一团，不如 17/12 的清楚落差。 |
| "字号随手调，看着顺就行" | 专业用固定 Type Scale 阶梯，字号待在台阶上，不天马行空。 |
| "Type Scale 就是一堆数字" | 它是层级秩序。数字是工具，层级（谁先被看到）才是目的。 |
| "所有文字都要放进阶梯" | 品牌大标题可突破阶梯造冲击，但正文仍守阶梯。 |
| "字重比字号重要" | 字号定顺序，字重定强调，颜色定轻重——字号是主工具。 |
| "配色深一点浅一点无所谓" | 颜色浅=次要，深=重要，是层级的第三根支柱，随便是大忌。 |
练习
即时题 Q1：界面"没主次"的根源是什么？Q2：Type Scale 是什么、为什么用它？Q3：微信首页"消息标题"字号/字重/颜色大概是——a) 12px 常规 浅灰 b) 17px 中粗 近黑 c) 24px 粗 黑色。
答案
Q1 字号随手乱定，所有字一样大，没有层级。Q2 一组有规律递增的字号阶梯（如 12/14/16/20/24），让字号有秩序、有层级，界面才协调。Q3 b——标题 17px 中粗近黑，是列表里字最大、色最深的一级。模块题 Q4：建立内容层级的三样工具是什么，各自管什么？Q5：微信首页四层（标题/摘要/时间/未读角标）分别靠什么拉出层级？Q6："标题越大越好"错在哪、正确做法是？
答案
Q4 字号（拉落差定顺序）、字重（强调同字号里的层级）、颜色（深浅区轻重）。Q5 标题 17px 中粗近黑；摘要 15px 常规浅灰；时间 12px 常规更浅灰；未读角标 12px 粗+红底白字——字号 17→15→12 递减、颜色从深到浅，未读数靠颜色+字重强推。Q6 层级靠落差不靠大小；标题 34 正文 30 几乎一样大，层级塌了；正确是拉开落差：标题上跳 2-3 档、辅助下跳 1-2 档，让差距看得见。迷你案例 下面这段 CSS 用 Type Scale 先定好字号阶梯（一层基准、两三层标题/辅助），再把它用在标题和辅助文字上——但有两处把层级做错了，找出来。
css
--fs-title: 20px; /* 标题层 */
--fs-body: 16px; /* 正文基准层 */
--fs-caption: 12px; /* 辅助层 */
.title{font-size:var(--fs-title);color:#000;} /* 标题：用阶梯推字号 */
.caption{font-size:var(--fs-caption);color:#000;} /* 辅助：同上 */问题：① 标题 --fs-title: 20px 只比正文 16px 大 4px，落差太小——标题应提到 24px，拉开层级；② 辅助 .caption 用了 #000 黑色——辅助信息应改浅灰（如 #999），用颜色降级，否则和正文一样抢眼。改对后（标题上跳 2 档、辅助用浅灰）：
css
--fs-title: 24px; /* 标题层，上跳 2 档 */
--fs-body: 16px; /* 正文基准层 */
--fs-caption: 12px; /* 辅助层 */
.title{font-size:var(--fs-title);color:#000;} /* 标题：直接引用阶梯 */
.caption{font-size:var(--fs-caption);color:#999;} /* 辅助：浅灰降级 */素材
- 👉 打开交互演示：Type Scale 排版阶梯 — 拖基准字号，看标题/正文/辅助落差怎么拉开（一个滑块控制字号走完整条阶梯 12/14/16/20/24/28/34，旁边展示三层字号阶梯条，对比"全一样大"与"落差拉开"）
- 进阶体验（可选）：打开微信，把"消息标题"和"摘要"放在一起看——标题 17 黑、摘要 15 灰，落差就在眼前；想想：如果把摘要也改成 17 黑，界面是不是立刻"平"了。
- WeChat 微信：翻开学它的首页列表，看标题/摘要/时间/未读角的四层落差，是最好的免费教材。
- Type Scale 生成器：搜 "type scale calculator"（如 typescale.com）——输入基准字号和比例，自动生成整条阶梯，可用它当灵感。
- iOS Human Interface Guidelines · Typography：苹果官方排版规范，含字号阶梯和层级建议，英文但图示直观。
- 上一节：知识点 04 字体基础——本知识点的字号/字重依赖它；三工具里的"颜色"依赖知识点 03 色彩。
- 下册衔接 06 行高与字距——字号定好后，接下来用行高与字距，把"行与行的呼吸"和"字与字的疏密"也规范起来。