字体层级:如何搭建一套真正好读的体系

大多数关于字体层级的文章只是在描述它,而不是在搭建它。它们说标题要显得重要,正文要显得平静。可当你的任务是“选出五个字号、三种字重,以及能在首页、文章页和设置面板里都站得住的行距”时,这些话毫无用处。描述不是系统。能上线的才是系统。

这篇文章讲的就是搭建。真实的比例、真实的数字、决策的先后顺序,以及在上线前就毁掉大多数层级的失败模式。

字体层级到底是什么

字体层级是对每一个文本元素的结构化排序,让眼睛在读任何内容之前,就知道先读什么、再读什么、最后读什么。 它是视觉层级中专属于字体的那一层,也是任何有效字体系统的脊梁。

真正的层级会以书面形式回答四个问题。有多少个层级。每个层级多大。每个层级用什么字重。层级之间和层级内部的间距是多少。如果这些答案没有写在同一页文档里,这套系统就是临场发挥,而不是设计出来的。

几乎每套系统都需要的五个层级

大多数有效的系统都落在五个层级:H1、H2、H3、正文和小字。再多就是噪音,再少页面就扁平了。

陷阱在于把按钮、图注和表单标签当成独立层级。它们其实是正文或小字,只是角色不同。按钮是中等字重的正文。图注是常规字重的小字。标签是中等字重的小字。字号相同,工作不同。

选定一个比例尺,然后坚持到底

每个层级的字号都来自应用在基准字号上的同一个比例。先选比例,再由它推导出所有字号。基准几乎总是 16px,这是浏览器默认值,也是正文在屏幕上最清晰的字号。三种比例就能覆盖几乎所有项目。

大三度(1.25)。 紧凑而密集。最适合数据密集的界面和后台工具。以 16px 为基准:16、20、25、31、39、49、61。看得出差别,但绝不夸张。

纯四度(1.333)。 主力选手。强到足以做编辑类内容,克制到足以做产品。以 16px 为基准:16、21、28、37、50、67。大多数营销网站的默认选择。

黄金比例(1.618)。 编辑感、表现力强,几乎有点戏剧化。最适合落地页和杂志式版面。以 16px 为基准:16、26、42、68、110。H1 高高耸立在正文之上,这正是重点。

type-scale.com 这类工具可以在一秒内为任意基准和比例生成数值表。选一个,把数字写下来,上线。项目中途更换比例,是一次牵动每个页面的重构。

字重是第二条轴,不是第一条

设计师总是只拉字号这一根杠杆,然后纳闷页面为什么读起来是平的。字重承担了一半的工作,尤其是在字号范围受限的移动端。

一套有效的系统需要三种字重。正文用常规,强调和标签用中等,标题用粗体或半粗体。第四种字重是品牌决策,不是系统必需。

能修好大多数扁平页面的规则:相邻两个层级永远不要使用相同字重。如果 H2 是粗体,H3 就该是半粗体或中等。相邻层级字重相同,不管字号如何,层级都会塌掉。反过来的陷阱是“全都加粗”,这会让字重这根杠杆彻底失效。

行距是沉默的层级杠杆

行距是行与行之间的垂直空间,从基线量到基线。CSS 里叫 line-height。它是字体层级中最被低估的杠杆。

标题的紧行距读起来自信而密实。正文的松行距读起来平静而易读。反过来就会颠倒层级。1.2 行距的正文读起来像一堵墙。1.6 行距的 64px 标题读起来像装饰。

可用的默认值。标题(H1、H2):1.1 到 1.2。小标题(H3):1.2 到 1.3。正文:1.5 到 1.7。图注:1.4 到 1.5。字越大需要的行距越小,字越小需要的行距越大。长文的正文行距要比界面更大。仪表盘用 1.4 读起来偏密,这是对的。

字距是给展示字体用的,不是给正文用的

字偶距是特定字母对之间的间距,在标志或标题尺度上调整。字距(tracking)是一段文字中所有字母之间的间距,统一设置。它们不是同一根杠杆。

字距只在两个极端才是层级工具。大标题的紧字距(-0.02em 到 -0.04em)让它显得稳定而果断。小号大写标签的松字距(+0.05em 到 +0.1em)让标签显得有意为之。两者都在暗示这段文字的角色。

危险区是正文。给正文调字距会损害可读性,却换不来任何层级收益。正文保持零。最快暴露一个设计师不懂字距的方式,就是把首屏标题设成 +0.1em,理由是“有编辑感”。并没有。它只有装饰感。

层级之间的间距也是层级的一部分

每个层级周围的垂直空间,和字号、字重一样在为它排序。上方 80px、下方 24px 的 H2,读起来是新章节的开始。同一个 H2 上下都是 24px,读起来只是一次段落停顿。

规则:上方空间大约是下方空间的两倍。元素属于它下面的内容。起步规格:H2 上方 64 到 96px,下方 16 到 24px。H3 上方 32 到 48px,下方 8 到 16px。留白的纪律和字体本身一样重要。比例完美但间距潦草,页面照样读起来是平的。

从零搭建层级的决策顺序

跳过步骤,层级单独看起来没问题,放进真实产品里就会散架。

1. 选定基准字号。 屏幕用 16px。偏编辑类的网站用 18px。正文绝不低于 16px。
2. 选定比例尺。 密集界面用大三度,通用场景用纯四度,编辑类用黄金比例。
3. 生成字号表。 由比例推导每个层级。取整到像素。写下来。
4. 选三种字重。 常规、中等、粗体或半粗体。不要更多。
5. 为每个层级设定行距。 标题紧,正文松。
6. 为每个层级设定间距。 每个标题都用上下 2 比 1 的比例。
7. 只在极端情况下设置字距。 展示字体收紧,小号大写放松。正文为零。
8. 在三块真实屏幕上验证。 一个首页首屏、一篇长文、一个密集的界面面板。三者都站得住,就上线。

最快发布出一套破损层级的方法,就是凭直觉而不是比例来定字号,然后逐页修补行距和间距。

大多数层级是怎么失败的

六种失败模式毁掉的层级,比其他任何原因都多。

全都加粗。 字重不再是杠杆,页面只能单靠字号。把 H3 和任何三级标题降到中等或半粗体。

只有两个层级。 只有 H1 和正文、中间什么都没有,读起来就像顶着一个标题的扁平文档。每 150 到 300 个字加一个 H2。

悬浮的小标题。 上下间距相等,小标题就不属于任何一个章节。收紧下方空间,让它贴住后面的正文。

失控的 H1。 把桌面端首屏的 H1 原样用在每个内容页里,会破坏节奏。设一个桌面端 H1 token 和一个内容页 H1 token。同名,两个值。

14px 的正文。 低于 16px 会损害可读性,还会把更小的层级挤进 2px 的范围。最小 16px。13 到 14px 只用于图注和标签。

只在桌面端设计层级。 移动端会压缩每个层级,把层级糊成一团。先做移动端,再向上放大。

2026 年条件下的层级

可变字体现在是正确的默认选择。一个 80KB 的文件就能通过一条轴提供常规、中等、半粗体和粗体。两款可变字体就能覆盖整套系统。如何挑选,请看字体搭配指南。

AI 概览读的是语义标记,而不是视觉效果。一个页面先有 H1,然后是一个样式做得像 H2 的 div,再然后是 H3,就会被解析错。视觉层级和语义化 HTML 必须一致。每页一个 H1,不跳级。网页设计原则的拆解讲了语义这一侧。

层级审查清单

存下来。上线前过一遍。任何一项不通过,发布前必须修好。

十项全过,在每台设备上都不言自明。过七项,读起来像设计过的。低于七项,不管用什么字体,读起来都是平的。

FAQ

视觉层级和字体层级有什么区别?

视觉层级是更宽泛的系统,用大小、字重、颜色、位置、空间、对齐和图像为每个元素排序。字体层级是专属于字体的那一层,用字号、字重、行距、字距和间距为文本排序。字体层级是视觉层级的输入之一。

字体比例尺的最佳比例是多少?

纯四度(1.333)是最稳妥的默认值。它能产生清晰的对比,又不至于戏剧化。密集界面和后台工具用大三度(1.25)。编辑类内容和首屏必须压住全场的落地页用黄金比例(1.618)。

如何修复看起来扁平的层级?

依次做三件事。首先增加字号对比。H1 至少是 H2 的 2 倍,H2 至少是正文的 1.5 倍。其次增加字重对比。相邻两个层级不共用同一字重。第三,用每个标题上下 2 比 1 的比例收紧间距节奏。如果页面读起来仍然扁平,说明版面承担得太多,需要先砍范围,再做更多字体工作。

先搭好层级,然后信任它

一套有效的层级,是通往“自己会说话的页面”最便宜的路径。读者看不到层级、比例或行距数值。他们看到的是一个说得通的页面。数学消失在清晰之中。

陷阱在于把层级当成最后一公里的润色步骤。它其实是脊梁。先搭它,在真实屏幕上验证,以 token 的形式写成文档,让其他所有决策都围绕它来组合。如果你想要一个把字体系统、层级和产品界面当作一个项目而不是三个项目来做的团队,雇用 Brainy。我们选比例、写 token,并在真实产品上交付这套系统。