排版即骨架：vibe 项目的字体与字阶系统实战指南

先说清楚：本篇提到的产品名、人物名、数据和对话，全部是为讲清楚方法而编的虚构示例，不是真实产品、不是真实用户案例。方法本身是通用的，数字是举例用的标尺，不是任何产品的实测结果。

很多 vibe 项目的界面，第一眼看上去“还行”，读起来却很累：标题和正文差不多大，段落挤成一团，数字和中文混排时高低不平，手机上放大两号字就把布局撑破。问题往往不在配色、不在组件库，而在排版没有成系统——字号是随手填的，行距是默认的，字体是“能显示就行”。排版是产品里最便宜的体验杠杆：不改功能、不加页面，只把字号、行距、行长和字体栈理顺，可读性就能上一个台阶。本文讲的就是这套活：怎么给一个 vibe 项目定一套排版系统，并把它落到代码里、守住不走样。

一、先定判断：排版要解决的不是“好看”，是“读得下去”

动手之前，先把目标从审美换成可验证的标准。一篇界面文字合不合格，问四个问题就够了：第一，用户能不能在三秒内分清标题、正文和辅助信息，也就是层级清不清楚；第二，一段话读下来眼睛累不累，也就是行距和行长合不合适；第三，换一台设备、放大一号字，布局会不会破，也就是系统有没有弹性；第四，中英文、数字、标点混在一起时，看起来是不是同一种文字，而不是几块补丁拼起来的。四个问题里任何一个答不上来，都说明排版还停留在“随手写”阶段。

虚构示例：林晚用 AI 工具做了个待办清单产品“松果清单”，上线后用户反馈“看着晕”。她检查了一圈，发现首页同时用了五种字号：标题 28、副标题 20、正文 16、备注 14、页脚 12，但 20 和 16 在视觉上几乎分不出主次，备注 14 又因为行距只有 1.2 而糊成一片。问题不是字号太多，而是字号之间没有级差、没有分工。排版系统的第一步，就是给每个字号一个明确的岗位，而不是让它们凭感觉竞争注意力。

所以这套方法的顺序是反直觉的：不要先挑字体，先定层级。层级定下来，字体、字号、字重、颜色才有地方落。顺序错了，后面全是返工：先买了好看的字体，才发现它在小字号下糊成一团；先定了大标题，才发现正文没有与之匹配的节奏。

二、字阶：用一套比例管住所有字号

字阶就是产品里允许出现的字号清单，外加它们之间的比例关系。没有字阶的项目，字号会随着每次“看着调一下”无限繁殖，最后连开发者自己都说不清某个 15px 是从哪来的。有了字阶，新增页面时不用再发明字号，只需要从清单里选。

给 vibe 项目推荐一个够用又不臃肿的起点：正文 16px 为基准，向上两级、向下两级。标题可以是 24 和 32，辅助信息是 14，小字说明是 12。级差要拉得开：相邻两级至少差 4px，或者按 1.25 倍左右的比例递增，否则人眼分不出主次。16 和 18 放在一起就是典型的“差了等于没差”，不如只留一个。移动端可以整体降一档，但级差关系不变——正文 15 时标题 22 左右，比例守住，层级就还在。

字阶还要配字重分工。同一字号下，字重就是第二层级信号：标题用 600 或 700，正文用 400，辅助信息用 400 但颜色弱化。千万不要用字重来“硬撑”层级：把所有标题都加粗到 800，正文也加粗到 600，页面就会变成到处都在喊，看上去比不分层级还累。字重的原则是：页面上同一时间最多两种视觉重量在抢注意力，其余全部退后。

一个常见的坑是把字阶写在设计稿里，却不写进代码。正确的做法是把字阶变成设计 token：比如用 CSS 变量 --font-size-base、--font-size-lg、--font-size-xl，或者在组件库的主题里集中定义。页面代码里不许出现裸字号，出现一次就补一个 token。三个月后回头看，凡是裸字号的地方，基本都是后来走样的地方。

三、字体选型：先保显示，再谈个性

字体选型的判断顺序是：能不能稳定显示、读起来累不累、最后才是好不好看。对中文产品来说，第一关就是字体栈。中文网页字体体积大，全量加载一个中文字体动辄几兆，首屏会明显变慢；所以务实的路线是：中文走系统字体栈，英文和数字走一款西文字体做搭配。系统字体在用户设备上本来就有，不用下载、不怕失败、渲染也最稳。所谓“个性”，在绝大多数 vibe 项目里，靠字号层级和间距就能表达出来，不需要靠一款冷门字体。

字体栈要写全 fallback 链，并且按语言分工。西文部分可以排在前面，中文部分紧随其后，最后以通用族收尾。写的时候注意一个细节：中文字体和西文字体在同一行里的基线和字高并不一致，混排时西文数字容易显得偏小或偏高。解决办法不是换字体，而是给数字和英文单独设一个略大的字号补偿，或者干脆接受系统字体的混排效果——用户每天看的都是系统字体混排，早就习惯了，强行“修平”反而容易修出新问题。

什么情况下才值得引入网络字体？三个条件同时满足再考虑：第一，这款字体是产品识别的一部分，换掉它用户会觉得“不是这个产品了”；第二，你已经实测过它的加载体积和失败兜底，比如用 font-display: swap 让文字先以系统字体显示、字体到了再切换，而不是长时间空白；第三，小字号下的渲染你已经逐台设备看过，没有发虚、没有缺字。三个条件缺一个，就先用系统字体——vibe 项目的排版口碑，来自稳定可读，而不是来自字体品味。

还有一个中文特有的坑：不要在正文里混用多种中文字体。标题用一款、卡片用一款、弹窗又用一款，页面会立刻显得“拼”。中文产品保持一款正文字体走到底，顶多在品牌标题处用一款展示字体点缀，而且展示字体只出现在大字号场景，小字号一律回到正文字体。

四、行距、段距与行长：决定“读着累不累”的三组数字

如果只能改三个数字，改这三个：行距、段距、行长。正文行距推荐 1.6 到 1.75 倍字号，也就是 16px 的字配 26 到 28px 的行高。低于 1.5 的中文正文，行与行之间会互相干扰，读长文时眼睛容易串行；高于 1.9 又会显得松散，段落失去整体感。标题行距可以收紧到 1.2 到 1.3，因为标题通常只有一两行，紧一点显得有力；但标题一旦换行超过两行，就要把行距放回 1.4 以上，否则第二行会贴着第一行，读起来像被压扁了。

段距常常被忽视，却是分段感的主要来源。段落之间用 margin 而不是空行字符来分隔，段距大约是行距的 0.75 到 1 倍。只靠首行缩进、段落之间没有间距的中文排版，在手机屏幕上很容易糊成一堵墙；反过来段距过大，文章又会被切得支离破碎。一个简单的自检办法：把页面截图缩小到一半看，如果还能分清哪里是段落分界，段距就基本合格。

行长指的是每行容纳的字数。中文正文每行 35 到 45 字是比较舒服的区间，英文大约是 60 到 75 个字符。行太长，眼睛从行尾回到下一行行首时容易丢行；行太短，阅读节奏会被频繁换行打断。落地办法是给正文容器设一个最大宽度，而不是让它跟着屏幕无限变宽。大屏上正文容器居中、宽度封顶，两侧留白，这不是浪费空间，而是给眼睛留换行的路标。卡片、弹窗里的文字也一样：容器宽度先定下来，再谈字号。

五、混排细节：数字、标点和中英混排最容易露怯

排版系统最容易露怯的地方，往往不是标题，而是混排。先说数字：价格、数量、百分比里的数字，建议用等宽数字特性，让纵向排列的数字能够对齐。表格、账单、统计数字上下不对齐时，用户会下意识觉得“算错了”，哪怕数值本身没错。等宽数字不需要换字体，大多数系统字体和西文字体都支持相应的数字特性，打开它只需要一行样式。

再说标点。中文标点占一个全角位，英文标点占半角，混排时如果直接拼接，中文句子里夹着的英文标点会显得拥挤。务实的做法是：中文语境里优先用中文标点，英文单词和数字前后留出自然的间距感，不要为了“好看”把中文句号换成英文句点。引号、书名号这类成对标点要成对出现，半角引号套在中文句子里时，注意它和汉字之间不要贴得太紧。这些细节单个看都不起眼，合起来就是“这个产品做得细不细”的直接证据。

中英混排还有一个词：词间不断行。英文长单词在行尾被硬生生截断换行，是中文页面里常见的瑕疮。处理办法是允许英文单词整体换行，宁可让行尾留一点空白，也不要把一个单词劈成两半。同样，链接、邮箱、长串编号这类“不能断”的内容，要设成不换行或允许在合适位置断开，而不是任由浏览器在任意字符处切断。

六、弹性：放大字号、换设备，系统不能破

排版系统必须通过两场考试：第一场是用户把浏览器字号调大两档，第二场是同一页面从桌面搬到手机。通不过这两场，字阶定得再漂亮也只是设计稿里的漂亮。第一场考试的要点是：所有与文字相关的尺寸尽量用相对单位，容器高度不要写死。写死高度的卡片，在字号放大后文字会溢出或被截断，这是最常见的“放大就破”根源。卡片、按钮、输入框的高度要由内容撑起来，而不是由固定像素框住。

第二场考试的要点是：移动端不是把桌面版等比缩小，而是重新排层级。标题在桌面上 32px，到手机上可以降到 24px，但正文不建议低于 15px——低于这个值，中文笔画在小屏幕上会糊。段距在移动端可以略微收紧，但行距不要跟着缩，手机阅读距离更近、行距反而更需要宽松。表格、长标题这类桌面端宽松的元素，到移动端要准备第二种排法：标题允许换行、表格允许横向滚动或转卡片，而不是硬挤在一行里。

还有一个容易被漏掉的群体：把系统字号调到最大的用户。对他们来说，页面不是“稍微大一点”，而是整体放大 1.5 倍以上。如果你的布局在 200% 缩放下还能正常阅读、按钮还能点全，排版系统就算通过了最严的一场考试。vibe 项目做不到完美适配所有缩放比例是正常的，但至少要做到“放大后不丢内容、不丢操作”，这是底线不是加分项。

七、落地 SOP：五步把排版系统写进项目

第一步，盘点现状：把现有页面所有字号、字重、行距抓出来列成表，重复的合并、级差不够的取舍，产出第一版字阶清单。第二步，定 token：把字阶、行距、段距写进主题或 CSS 变量，页面代码只许引用 token，不许写裸数值。第三步，定字体栈：写全中西文 fallback，网络字体先不上线，除非通过了前一节的三个条件。第四步，跑两场考试：浏览器字号放大两档、手机宽度各看一遍，修掉溢出和截断。第五步，写进检查表：此后每个新页面上线前，对照下一节的清单过一遍，而不是凭感觉验收。

这个 SOP 的关键在第二步和第五步之间：token 化之后，排版问题就从“审美争论”变成了“有没有按清单执行”。团队里再有人想加一个 17px，讨论的起点不再是“17 好看还是 16 好看”，而是“字阶里没有 17，要加就先改字阶、并检查所有用到它的地方”。这个机制，比任何一次性的视觉优化都更能防止排版走样。

八、上线检查表与反模式

上线前逐项打勾：字号全部来自字阶、无裸数值；相邻字级差 4px 以上；正文行距 1.6 到 1.75；段距用 margin 且肉眼可辨；正文容器有最大宽度、行长在 35 到 45 字；数字纵向对齐；中英混排标点一致、长单词不断行；浏览器字号放大两档后无溢出、无截断；手机宽度下正文不低于 15px、标题可正常换行；字体栈有完整 fallback、网络字体失败时仍可读。

反模式清单，出现任何一条都要回炉：全站字号超过七种；标题和正文只差 2px、靠颜色硬分层级；行距低于 1.5 的长文；段落之间零间距、只靠首行缩进分段；大屏正文通栏拉满、一行六七十字；表格数字上下错位；卡片高度写死、放大字号后文字溢出；为了“个性”引入三款以上网络字体、首屏长时间无字；中文正文混用两款以上中文字体。排版系统没有银弹，但这张清单能拦住绝大多数返工。

九、验收办法：不用专业眼光，也能验出排版问题

排版验收不需要设计师在场，三个土办法就够了。第一个是“缩一半看”：把页面截图缩小到一半，如果层级还分得清、段落分界还在，说明字阶和段距合格；如果缩一半就糊成一片，说明层级全靠颜色和细节撑着，字号级差不够。第二个是“眯眼看”：眯起眼睛看页面，只能看到灰度块的时候，标题块、正文块、辅助块应该还是三个不同的灰度层级；如果全页面灰成一片，就是字重和字号没有拉开。第三个是“真机读”：找一台最旧、最便宜的手机，把正文读完一屏，读的过程中有没有串行、有没有因为行距太紧而反复找行，有就是行距和行长的问题。这三个办法都不需要工具，但比“看着还行”可靠得多。

最后回到起点：排版不是上线前最后美化的那一步，而是产品骨架的一部分。字阶、行距、行长、字体栈这四样定下来，之后每加一个页面都是复用而不是发明，每次视觉走样都有清单可查。vibe 项目节奏快，更需要这种“定一次、复用无数次”的系统，否则每个新功能都会把排版推回随手写的状态。先让文字读得下去，再谈好不好看——顺序对了，好看会自己跟上来。