开篇小故事：这是一个运营页面的设计方案，主标题、副标题、正文、标签、价格，五个层级。我把主标题调到 32px，副标题 20px，正文 14px，标签 12px，价格单独加粗放大到 28px。
我把方案发给同事看，他盯着屏幕看半天，然后缓缓的说：感觉有点乱，哪个最重要看不太清楚。
我以为是字号差距不明显，于是把主标题拉到 36px。但还是乱。再拉大到 40px。还是乱。
主标题字号 40px
前前后后我足足花了一个小时反复调整字号，页面并没有变清楚。后来我才意识到，问题不是出在字号不够大，而在我错误的采用一个维度工具，试图解决一个需要多个维度共同作用的结果。
1. 层级是什么，为什么它重要
在讲影响界面层级的四个维度之前，我们先把界面层级这件事说清楚，因为很多设计师对层级的理解本身就有偏差。
层级不是"某个元素比其他元素大"，也不是"页面看起来有变化"。层级是读者视线的优先次序：在没有人指引的情况下，读者的眼睛会先落在哪里，停多久，再往哪里走，哪些信息可以直接跳过。
人在阅读一个陌生页面时，不会从左上角逐字读到右下角。视线会先被某些元素吸引，快速扫描整体结构，再根据自己的目的决定深入读哪里。这个过程发生在几秒之内，不受意识控制。设计师的工作是通过排版，让这个过程沿着正确的路径发生——让最重要的信息第一个被看到，次要信息在需要时找得到，辅助信息不干扰主线阅读。
层级没有建立起来的页面，视线不知道该先看哪里。读者要花额外的精力扫描全局，判断哪个信息是重点，这个判断过程本身就是认知负担。结果要么是读者放弃理解，要么是读者误判了信息优先级，得出了设计师不希望他得出的结论。
判断层级够不够，标准只有一个：读者在几秒内能不能分辨出哪个最重要、哪个次要、哪个是背景信息。能做到，层级就成立了；做不到，不管字号拉得多大，层级都是缺失的。
2. 字号的作用与局限
字号是我们建立层级最常用的手段，很多设计师会把重要的内容字号做大，把次要的做小。这个逻辑本身没有错，字号确实能传达优先级，大的元素比小的元素更容易引起读者的注意，这是视觉感知的基本规律。
但字号只改变元素的体积，不改变它的视觉重量。体积大的东西不一定抢眼，抢眼与否取决于视觉重量，而视觉重量是由多个因素共同决定的。
举一个具体的例子：页面上有两行文字，第一行是 36px 的浅灰色细体标题，第二行是 14px 的黑色加粗正文。大多数人看这个页面时，视线会先落在第二行——虽然它更小，但它的视觉重量更重。字号在这里输给了字重和颜色对比度的组合。
字号还有一个使用边界。字号差距不够大时，读者区分不出层级。20px 和 22px 之间的差距，在普通浏览速度下几乎感知不到，这两行文字对读者来说是同一个层级的信息。很多设计师会在设计中，建立五个字号体系，分别为32/24/18/14/12，但实际上视觉上能明确分辨的层级可能只有三个，其余的差距被压缩掉了。
差距过大时，整体节奏被破坏。如果主标题是 48px，正文是 14px，两者之间的跨度会让页面产生强烈的断裂感，读者的视线在主标题和正文之间切换时，需要适应一个巨大的比例变化，这本身就容易导致阅读障碍。
设计师靠反复拉大字号来建立层级，往往越拉越乱，原因就在这里：字号只是层级信号的一个来源，把字号拉大并不等于其他维度也同步加强了。层级感来自多个维度叠加，单独拉大某一个，不一定能让整体层级变清晰。
3. 字重：在同样大小下区分主次
字重是最容易被低估的层级工具。很多设计师只在"需要强调"的时候才使用粗体，把字重当成一个局部的强调手段，而不是将其界定为一个影响全局的层级工具。
字重优势是它可以在字号完全相同的情况下，清楚地建立优先级。
同样是 16px 的文字，Regular 字重和 Bold 字重的视觉重量差距相当大。读者扫描页面时，视线会优先落在 Bold 上，即便旁边有更大但更细的文字。
再进一步，同样是 16px Bold，和 20px Regular 放在一起，Bold 的吸引力不一定弱——在很多场合，字重的信号比字号更强。
理解这一点，我们就可以尝试一种新的排版策略：不靠大字号建立主要层级，而靠字号与字重的组合来建立。主标题可以是 20px Bold，副标题是 16px Regular，信息层级仍然非常清晰，整体节奏也更稳定，不会因为大字号造成的比例失调而显得内容被割裂。
字重使用有一个前提，那就是依赖对比。粗体的效果来自于"它比周围的文字更粗"，一旦失去这个对比，粗体就容易失效。
设计中最常见的错误是过度使用粗体。一个段落里，如果把三句话里的两句都加粗，剩下那一句细体的文字反而成了视觉上的异类，而原本想强调的两句因为都是粗体，优先级反而被拉平了。加粗的字越多，粗体的层级价值就越低，直到整页都是粗体，等于整页都是正文，于是层级消失。
有效的字重使用是让粗体在页面上保持稀缺性。一个段落里，只有最核心的词或短语被加粗；一个页面里，粗体只出现在真正需要被优先读到的位置。读者的视线会在扫描时被这几个粗体快速抓住，从粗体的分布中感知到信息的重点在哪里。
