做网页排版这件事我前后折腾了差不多八年。最早那几年我以为排版就是把文字塞进 div 里调调字号、加加边距就完事了后来接手一个内容站用户反馈看着累读两段就想关我才意识到问题不在内容在网页制作的排版方法。同一个页面字号差两像素、行高差零点二、段落间距从 12px 改成 16px读者的停留时长可能差出一大截。排版不是装饰它决定信息能不能被读进去。下面这些内容是我把一个内容型页面从能看打磨到耐看的完整过程记录。里面涉及布局体系的选择、字号行高的量化方法、间距网格的搭建、中英混排的处理、响应式的断点策略以及一堆在真实项目里踩出来的坑。适合两类人看一类是刚学完 HTML/CSS写出来的页面总感觉哪里不对但说不上来的新手另一类是做了几年页面能跑起来但缺少系统方法、每次都要凭感觉调样式的人。我会把每个参数的来由算给你看把每一步的操作意图讲清楚代码可以直接抄。1. 排版方案的整体设计与思路拆解1.1 先定基准线别一上来就写样式我见过太多新手拿到设计稿第一件事就是给标题写font-size: 32px给正文写font-size: 14px然后一路往下堆。写到第八个模块的时候发现字号出现了 13px、15px、17px、22px 这种零碎值整页看起来像四五个人分别做的。根源在于没有基准线。排版的本质是比例关系的重复不是一个个孤立的数值。所以我现在的习惯是动手写任何一条样式之前先确定三件事——基准字号、基准行高、基准间距单位。这三样定死之后后面所有的值都从它们推导出来页面自然就齐了。基准字号我一般取16px。理由很实在浏览器默认字号就是 16px1rem 16px取整换算不产生小数主流手机屏幕在 375px 宽度下16px 的中文字符一行能排 20 个出头不会挤再小到 14px中文字形笔画密集时确实吃力尤其是镶嵌饕餮这类字在低分辨率屏上会糊成一团黑。基准行高取1.6也就是 16 × 1.6 25.6px。这个数字后面会再优化先记着。基准间距单位取8px。为什么是 8 不是 10因为 8 是 2 的三次方能被 2、4 整除在 1 倍、1.5 倍、2 倍、3 倍屏下都不会出现半像素模糊而且 8 的倍数序列 8、16、24、32、48、64 之间的疏密关系恰好符合人眼对亲近—疏远的感知分层。10px 体系做出来的间距是 10、20、30、40颗粒度相对粗表达稍微靠近一点这种微妙关系时就不够用了。提示基准值定下来之后写进 CSS 变量里并且在团队里强制只允许使用这些值。我吃过一次亏两个人协作一个用 15px 一个用 16px 做卡片间距视觉上几乎看不出来但整页扫过去就是有一种说不出的不协调。1.2 三套布局体系各管什么别乱用排版的骨架是布局布局选错了后面调死也调不顺。CSS 发展到现在实际在用的是三套体系文档流Normal Flow、Flexbox、Grid。它们的定位不是新的一定比旧的好而是各管一段。文档流负责最基础的自上而下堆叠段落、标题、列表、图片天然就是块级元素垂直排列。这一层根本不需要额外写布局代码反而是很多人喜欢给每个段落套一层display: flex纯属自找麻烦——flex 容器的子元素会失去外边距合并行为段落间距要重新算还容易出各种对齐怪相。Flexbox 负责一维排列也就是一行或者一列的分配。导航栏、按钮组、图文左右结构、表单标签与输入框的对齐这些都是一维问题一行 flex 就解决。它的强项是子元素之间的空间分配justify-content和伸缩比例flex处理左边固定宽、右边自适应这种需求比任何老办法都干净。Grid 负责二维行和列同时控制。整页的三栏布局、卡片墙、杂志式的图文错落排版用 Grid 写出来的代码量是 Flex 的三分之一而且结构在 CSS 里看得见。举个具体对比一个 12 列的栅格系统用 Flex 要嵌套两层容器加百分比计算用 Grid 就是grid-template-columns: repeat(12, 1fr)加grid-column: span 4语义直白。我的分工原则很简单页面大结构用 Grid组件内部用 Flex纯文本流交给文档流。三层各司其职样式表不会打架。1.3 把设计令牌提到最前面是为了三个月后的自己设计令牌这个词听着玄说白了就是把颜色、字号、间距、圆角、阴影这些原子值抽成 CSS 自定义属性集中放在一个:root里。我最初不做这一步觉得多写一层变量是浪费时间直接在样式里写#2c3e50、16px。结果项目做了半年产品说要支持深色模式我改了两天还漏了三处硬编码。从那以后第一件事永远是建变量层。变量层带来的好处不只是换肤。更实际的是约束当你只有--space-1到--space-8这八个间距可选时你根本没机会写出padding: 13px这种值一致性是被强制保证的。另外变量名本身就是文档后来接手的人看--text-body就知道这是正文色不用去猜#4a4a4a是干嘛的。这一步还有个小细节值得说变量命名我倾向按语义而不是按视觉。写--color-primary而不是--color-blue写--font-size-heading-2而不是--font-size-28。因为视觉值会变语义不会。品牌色从蓝换成绿的时候我只需要改变量的值不用去全局搜blue。2. 核心细节解析字号、行高、间距的量化方法2.1 字号阶梯怎么定用比例不要拍脑袋字号不能一个个单独定要用等比数列推导这叫模块化比例。常见的比例有 1.125温和、1.2常用、1.25明显、1.333强烈。选哪个取决于内容的调性——资讯类页面层级不需要太夸张1.2 到 1.25 就够营销落地页需要强对比可以上 1.333。我一般以 16px 为基准用 1.25 往上推同时把结果取整到 4 的倍数方便和间距网格对齐层级理论值16×1.25^n取整后用途正文1616px段落、列表、表格内容小注16÷1.25 12.813px图注、脚注、辅助说明四级标题16×1.25 2020px卡片标题、小节标题三级标题16×1.25² 2524px模块标题二级标题16×1.25³ 31.2530px章节标题一级标题16×1.25⁴ 3938px页面主标题取整这一步很关键。31.25px 这种值在 1.5 倍屏上会渲染成 46.875 物理像素浏览器做亚像素抗锯齿边缘会发虚。取到 30px 之后1 倍屏 30、1.5 倍屏 45、2 倍屏 60全是整数字口干净。往下走的两档要克制。小于 12px 的中文在手机上基本没法读我见过不少页面把辅助文字设成 10px那是把信息藏起来不让人看。真需要弱化靠颜色降低对比度比缩小字号更合适。还有一个容易被忽略的点字号阶梯最好控制在 5 到 6 档。超过 8 档层级就乱了读者反而分不清主次。我做页面时经常删档把差不多大的两档合并掉页面立刻清爽。2.2 行高的取值逻辑以及那次差 0.4 就差很多的经历行高不是凭感觉给的它跟字号、字面大小、行长都有关系。核心公式可以这样理解行盒高度 font-size × line-height 视觉行距 行盒高度 - 字面高度约等于 font-size × 0.85 到 0.9以 16px 正文为例line-height: 1.5时行盒是 24px字面高约 14px视觉行距 10pxline-height: 1.75时行盒 28px视觉行距 14px。后者明显更透气。中文和西文的取值习惯不一样。西文小写字母有上下伸展的 ascender/descender字体自身留白较多行高 1.4 到 1.5 就够。中文是方块字字面几乎占满字身框字体自带留白少行高低于 1.6 就会显得密不透风。我的经验值中文正文 1.7 到 1.8西文正文 1.5 到 1.6中英混排取 1.75 折中。标题反过来行高要小。大字号本身视觉重量大行高按比例给会显得散一般取1.2 到 1.3。38px 的标题配 1.25 行高行盒 47.5px两行标题挨得紧凑形成视觉块。这里还有个取整的技巧。16 × 1.5 24正好是 8 的 3 倍16 × 1.75 28不是 8 的倍数。要不要为了网格牺牲最佳行高我的答案是不要。行高的体验权重远高于网格对齐强行把行高凑成 24 或 32要么太挤要么太散。网格是给间距用的行高按可读性来两者不冲突。提示line-height一定要带单位写倍数如 1.75不要写死像素。带单位的倍数会在子元素继承时按各自的字号重新计算写死像素则会被子元素比如突然变小的图注继承成灾难性的行高。2.3 行长与容器宽度一行到底放多少字这是排版里最被低估的参数。行长太长眼睛从行尾折回行首时容易串行行长太短视线频繁跳转阅读节奏被打断。西文的经典推荐是45 到 75 个字符中文因为字符信息密度高28 到 40 个汉字比较舒服。换算成容器宽度就很好算了。中文正文 16px按 34 字算34 × 16px 544px再加上左右各 24px 的内边距内容区宽度约 592px。实际项目里我一般取640px 到 720px对应 35 到 40 个汉字留一点余量。这个数字怎么用给正文容器设max-width而不是设固定宽度.prose { max-width: 42rem; /* 672px约 42 个汉字 */ margin-inline: auto; /* 居中 */ padding-inline: 1.5rem;/* 小屏留白防止贴边 */ }max-width配margin-inline: auto是黄金组合。宽屏时内容居中两侧留白自然形成阅读呼吸区窄屏时容器撑满靠 padding 保证不贴边。用px还是rem我倾向rem用户改了浏览器默认字号容器跟着缩放不破坏行长。还有一层不同板块的内容宽度可以不同。正文窄一点672px图片和图库宽一点最多到 1000px全宽区块比如横幅可以突破容器。这种窄正文 宽媒体的节奏变化比整页一个宽度要有呼吸感。实现上给媒体元素一个负的margin-inline或者用width: min(1000px, 100%)加居中即可。2.4 8px 间距网格与段落节奏的实操间距网格的价值在于建立层级感知。人对距离的判断是相对的两段 12px 和两段 16px 单独看没区别但放在一起标题到正文 8px、正文到正文 24px、段落到段落 32px这种递进眼睛立刻知道哪块是一组的。我的间距令牌序列是令牌值典型用途--space-14px图标与文字之间、标签内边距--space-28px紧密元素间、表单标签与输入框--space-312px列表项之间、按钮内边距--space-416px段落之间紧凑场景--space-524px标准段落间距、卡片内边距--space-632px模块内部分组--space-748px模块之间--space-864px大板块之间、页面上下留白为什么留一个 4px因为图标和文字之间这种距离8px 太松0 又太挤4px 恰好。这个 4 是 8 的一半属于半档允许存在但不要滥用。实际排段落时有个陷阱别同时用段间距和首行缩进。中文印刷传统是首行缩进两个字符网页上更常见的是段间距。两样一起用段落开头既缩进又有空隙读起来像中间被砍了一刀。我一般选段间距因为网页内容经常是动态渲染的段间距在富文本编辑器里表现更稳定。另外margin在垂直方向会合并margin collapse两个 24px 的 margin 相邻只产生 24px 而不是 48px。这个特性用好了省事用不好就是我明明设了 24px 怎么没生效。我的做法是垂直间距统一由margin-block-start单向控制避免双向设置也避免合并带来的不确定性。2.5 中英混排、数字与标点的细节处理中文页面里永远有英文单词、代码片段、数字。处理不好一行字里会出现忽大忽小的空隙视觉上像被撕开。第一个要处理的是中西文之间的自动间距。浏览器默认会在中西文交界处加一点空隙但这个空隙大小由字体决定不可控。想让间距统一可以手动插#8201;窄空格但内容一多就疯了。更实际的办法是选一个中西文兼容好的字体栈让系统字体自己处理。第二个是数字对齐。表格里的数字、统计面板里的数值如果用的是比例数字proportional numerals每个数字宽度不同1占的位比8窄一列数字排下来眼睛找不到位置。加一行.numeric, table td { font-variant-numeric: tabular-nums; }等宽数字之后小数点自然对齐扫一眼就能比较大小。第三个是标点。中文标点是全角占一个汉字宽行内被强制断行时句号逗号不能出现在行首这叫避头尾。CSS 里的line-break: strict或word-break: normal配合浏览器的默认行为基本能处理。但有个常见问题一个长英文单词或者 URL 撑破了容器导致横向滚动条。这时候要用.prose { overflow-wrap: break-word; /* 长单词强制断行 */ word-break: normal; /* 保持中文避头尾规则 */ }注意不要用word-break: break-all那会让中文也能在任意字符间断开虽然不溢出但断行位置变得随机读起来别扭。overflow-wrap: break-word只在必要时才断是更克制的方案。还有字距。中文正文不要加letter-spacing加了字会显得松散断裂。只有两种情况需要动一是大标题30px 以上可以收-0.02em让字更紧凑有力二是全大写英文标签加0.05em因为大写字母本身排列偏紧。这两条我用了很多年几乎没出过错。3. 实操过程从零搭一套可复用的排版骨架3.1 目录结构与基础重置先看整体文件组织。排版相关的东西我从来不分得太细五个文件足够/styles tokens.css /* 变量颜色、字号、间距、圆角 */ reset.css /* 重置清除默认样式差异 */ base.css /* 基础html/body/标题/段落/列表 */ layout.css /* 布局容器、栅格、板块 */ components.css /* 组件卡片、表格、代码块、图注 */reset.css我不用那些几百行的通用重置库只处理真正影响排版差异的几条*, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, picture, video { display: block; max-width: 100%; height: auto; }box-sizing: border-box是第一位的。默认的content-box下设了width: 100%再加 24px 内边距元素实际宽度变成 100% 48px撑破容器。这个坑我踩过不止一次每次都是怎么突然横向滚动了查半天发现是内边距。img { display: block }也很关键。图片默认是行内元素按基线对齐下面会留出约 3 到 5px 的缝隙这是因为行内元素的基线下要留出字母降部空间。改成块级缝隙消失。注意list-style: none会带来一个副作用——在部分浏览器里ul可能失去隐式的列表语义无障碍读屏软件不再播报条目数量。如果列表内容有语义价值用rolelist补回来。3.2 令牌层与容器宽度的具体写法变量层我是这么写的值都在注释里说明用途方便后来人包括三个月后的自己快速上手:root { /* 字号阶梯 */ --fs-caption: 0.8125rem; /* 13px */ --fs-body: 1rem; /* 16px */ --fs-h4: 1.25rem; /* 20px */ --fs-h3: 1.5rem; /* 24px */ --fs-h2: 1.875rem; /* 30px */ --fs-h1: 2.375rem; /* 38px */ /* 行高 */ --lh-tight: 1.25; --lh-body: 1.75; /* 间距 */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* 宽度 */ --width-prose: 42rem; --width-wide: 60rem; }用rem还是px变量里我全用rem因为一旦用户把浏览器默认字号调大部分用户确实会调到 20pxpx写死的值纹丝不动界面等于没响应无障碍设置。rem会跟着缩放。代价是换算时要在脑子里除以 16写习惯了就好。容器分三档这是版式节奏的基础.wrap { width: 100%; max-width: var(--width-wide); margin-inline: auto; padding-inline: var(--space-5); } .prose { max-width: var(--width-prose); margin-inline: auto; }.wrap管全宽板块60rem ≈ 960px.prose管正文42rem ≈ 672px。两个容器嵌套使用宽板块里嵌窄正文视觉上就有了宽—窄—宽的节奏。3.3 正文区排版的具体实现正文样式是整页最该细调的部分我把几个关键点拆开说。.prose { font-size: var(--fs-body); line-height: var(--lh-body); color: #2b2b2b; text-align: start; } .prose p { margin-block: 0 var(--space-5); } .prose p p { margin-block-start: var(--space-5); }text-align: start而不是justify这是血泪教训。两端对齐在中文字体里看起来很美但最后一行的处理和标点挤压常常出问题尤其是含有英文单词或长数字的段落词间距会被拉得忽大忽小出现河流rivers读者视线顺着空白往下滑。左对齐的右边缘参差确实不够整齐但可读性稳定得多。标题的写法要注意两件事上方间距必须大于下方间距这样标题才会归属于它下面的内容。.prose h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.02em; margin-block: var(--space-8) var(--space-4); } .prose h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); margin-block: var(--space-7) var(--space-3); }margin-block: 64px 16px上下比 4:1眼睛很自然地把标题和下面那段文字归为一组。反过来如果上下一样标题就像飘在两段之间归属不明确。这是排版里最容易被忽略、效果最直接的一条。段落之间用p p相邻选择器而不是给所有 p 加下边距是为了避免最后一个段落多出一段空隙影响和后面元素的衔接。3.4 响应式断点选择与流式字号断点我不按机型设按内容什么时候变难看设。实际就三个断点触发场景主要调整 480px手机竖屏字号阶梯整体降一档间距减半480 – 768px手机横屏 / 小平板栅格从 1 列变 2 列 768px桌面恢复完整栅格与间距字号在小屏上要不要缩我试过缩到 15px实测阅读体验下降明显尤其是中文字。所以正文保持 16px 不缩缩的是标题和间距media (max-width: 480px) { :root { --fs-h1: 1.75rem; /* 38 → 28 */ --fs-h2: 1.5rem; /* 30 → 24 */ --space-7: 2rem; /* 48 → 32 */ --space-8: 2.5rem; /* 64 → 40 */ } }用变量覆盖而不是逐条写媒体查询好处是改动集中在一处不会漏掉某个组件。更优雅的方案是clamp()一行搞定流式字号省掉断点.prose h1 { font-size: clamp(1.75rem, 1.25rem 2.5vw, 2.375rem); }拆开算最小值 28px小屏首选值1.25rem 2.5vw20px 视口宽的 2.5%最大值 38px大屏。视口 320px 时首选值是 20 8 28px刚好触底视口 720px 时是 20 18 38px触顶。中间平滑插值。这种写法的好处是没有跳变坏处是可读性差半年后自己都要拿计算器算一遍所以我只在标题上用正文老老实实固定值。移动端还有一个必须处理的100vh。老写法height: 100vh在手机浏览器上会算进地址栏高度页面底部被裁掉一块。现在用100svhsmall viewport height取地址栏展开时的最小高度内容不会被裁。兼容性查一下这两年主流浏览器都支持了。3.5 图文混排、表格与代码块的专门处理图片。正文配图最容易出问题的不是尺寸是节奏。我的处理是图片居中、上下留足间距、图注字号降两档.prose figure { margin-block: var(--space-6); } .prose figure img { margin-inline: auto; border-radius: 4px; } .prose figcaption { margin-block-start: var(--space-2); font-size: var(--fs-caption); line-height: 1.5; color: #6b6b6b; text-align: center; }图注用 13px 加灰色是可读但退后的层次。如果图注和正文一样大一样黑读者会把它当正文读遇到下一段时产生断裂感。表格。表格撑破容器是老问题。核心一行table-layout: fixed让列宽按第一行分配不再由内容决定.prose table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.9375rem; /* 15px比正文小一档 */ } .prose th, .prose td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid #e6e6e6; text-align: start; overflow-wrap: break-word; } .prose tbody tr:nth-child(even) { background: #fafafa; }border-collapse: collapse让相邻单元格共用一条边框否则每格四边都有线看起来像网格纸密得慌。斑马纹用nth-child(even)加极浅底色比全边框表格轻很多。窄屏下表格还是可能溢出外面套一层overflow-x: auto的容器让它横向滚动比压缩字号或者隐藏列都靠谱。代码块。代码的字号要比正文小一档15px 或 14px因为等宽字符视觉上比中文大行高 1.5 就够代码的行间不需要那么多呼吸必须允许横向滚动.prose pre { margin-block: var(--space-5); padding: var(--space-4); overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875rem; line-height: 1.6; background: #f5f5f5; border-radius: 6px; } .prose :not(pre) code { padding: 0.15em 0.4em; font-size: 0.9em; background: #f0f0f0; border-radius: 3px; }行内代码的font-size: 0.9em是相对值会跟着所在段落的字号走不会出现正文 16px 而代码 14px 的突兀落差。padding用 em 同理。4. 常见问题与排查技巧实录4.1 问题速查表排版问题大多有固定套路我把这几年遇到频率最高的整理成表遇到时先对号入座现象高概率原因处理方式页面莫名出现横向滚动条子元素宽度超出常见于width:100%加 padding 或长 URL先查box-sizing再查overflow-wrap段落之间间距忽大忽小垂直 margin 合并统一用margin-block-start单向控制中文标题两行字间距怪继承了正文行高标题单独设line-height: 1.25行内元素之间有细缝HTML 换行符被渲染成空格父元素font-size: 0或改用 flex gap表格列宽完全不受控默认table-layout: auto改为fixed并指定首行列宽图片底部有几像素空隙img 默认行内对齐基线display: block弹性布局子项内容溢出flex 子项默认min-width: auto加min-width: 0滚动条出现时页面横向抖动滚动条占宽导致视口变化scrollbar-gutter: stable小屏文字挤成一团断点只改了布局没改间距小屏同步压缩间距令牌图标和文字垂直不齐基线对齐导致父容器align-items: center4.2 排查思路从外到内逐层收敛新人排查排版问题往往是哪儿不对点哪儿打开开发者工具乱改一通改好了也不知道为什么好。我的习惯是固定顺序从外到内。第一步看容器宽度。开发者工具里选中元素看盒模型面板的宽度是不是等于预期。如果超出父容器问题在宽度计算上。这时候依次怀疑box-sizing是不是content-box、有没有写死width加padding、有没有min-width卡住。第二步看外边距合并。如果两个块的间距不是简单的相加八成是合并了。判断方法很简单给其中一个加padding: 1px或overflow: hidden合并被阻断间距立刻变化那就确认是合并问题。解决靠统一的间距策略不是逐个margin调数值。第三步看字体度量。同一段文字在16px/1.75下不同字体渲染出的实际高度能差 2 到 3px因为每种字体的 ascent/descent 不同。如果两个元素明明设了相同行高却对不齐那基本是字体栈不一致某个元素回退到了别的字体。查font-family有没有拼错或者有没有在某个组件里被覆盖。第四步才是微调具体数值。前面三步没确认就调数值等于在错误的地基上刷墙。提示Chrome 开发者工具的Layout面板可以高亮显示网格和行盒调排版时打开它能直观看到每行的实际高度和基线位置比反复截图比对高效得多。4.3 几个我踩过、并且在文档里找不到答案的坑坑一rem遇上浏览器最小字号限制。我给图注设了0.8125rem13px测试时正常。但有用户把浏览器最小字号设成了 16px所有小于 16px 的文字被强制放大图注瞬间和正文一样大视觉层级全塌。这个问题没法完全解决因为最小字号是浏览器的用户设置。缓解办法是关键信息不要依赖字号差异来区分层级配合颜色、粗细、位置一起用同时避免用小于 12px 的字号被强制放大的幅度会小一些。坑二gap和margin混用导致间距翻倍。早期我用 flex 布局时习惯给子元素加margin-right后来又改用gap两样同时存在间距变成 24px 16px 40px怎么调都不对。现在的铁律是用了 flex 或 grid 就只用 gap子元素不写任何方向性 margin。这条规则我贴在便签上贴了小半年。坑三中文字体的font-weight: 500经常不生效。想给某段文字稍微加粗一点设了 500结果和 400 长得一模一样。原因是大多数中文字体只有 Regular 和 Bold 两个字重浏览器遇到 500 时会就近映射——有的映射到 400有的映射到 700跨浏览器表现还不一致。解决办法是要么用 400要么直接 700中间的 500、600 在中文环境里基本不可靠。西文字体支持多字重的多但混排时也要小心同一行里中英文粗细不一致会很明显。坑四letter-spacing加到最后一个字上居中会偏。给标题加letter-spacing: 0.05em后每个字符右边都多出一点空隙包括最后一个字。文字块整体看起来左轻右重居中时明显偏左。修法是加margin-inline-end: -0.05em把多余的空隙抵消掉。这个技巧我用了很多次几乎没人提但效果肉眼可见。坑五line-height写在body上表单控件不继承。input、button、select这些表单控件默认不继承父级的字体和行高会用自己的默认值。结果正文行高 1.75输入框里文字挤成 1.2看着非常割裂。统一处理input, button, select, textarea { font: inherit; line-height: inherit; }font: inherit一行把字体族、字号、字重、行高全部继承过来是最省事的写法。5. 排版参数的验证与迭代方法5.1 用对比而非绝对值来判断好坏排版参数没有绝对正确值只有相对合适的值。我判断一套参数好不好用的是并排对比同一段文字用两组参数各渲染一份并排放在一起扫一眼就知道哪个更舒服。具体做法是在页面上放一个临时调试面板用滑块调--fs-body和--lh-body实时看效果。调的时候不要盯着一句话看要看一整段而且要把视线从屏幕前 30cm 移到 60cm 处快速扫读——这个距离下如果段落能顺畅地读下来不卡顿参数就对了。眼睛贴近屏幕逐字看任何参数都还行因为注意力在字上不在节奏上。实测下来的经验正文行高从 1.5 调到 1.75感受是从能读变舒服从 1.75 调到 1.9感受是变松了但没更好。所以 1.75 附近是甜点区。段落间距从 16px 到 24px 是明显改善24px 到 32px 就没那么大差别了这时候要考虑整体页面长度别让间距把页面拉得太长。5.2 对照可读性标准做底线校验有几个客观指标可以当底线用不追求满分但不能低于线。第一个是对比度。正文文字与背景的对比度业内推荐不低于4.5:118px 以上的大字号可以放宽到 3:1。深灰字配白底是最常见组合#2b2b2b配#ffffff的对比度约 13.6:1非常充足#6b6b6b配白底约 5.7:1做图注够用#999999配白底只有 2.8:1做辅助文字勉强做正文绝对不行。很多人喜欢用浅灰做高级感实际是拿可读性换观感。第二个是行长上限。前面算过中文 40 字以内。超出这个范围眼睛回到行首的定位成本急剧上升。有些页面在宽屏上正文拉满整个 1440px 宽度一行 80 多个字读两行就晕。第三个是行数下限。这一点常被忽略一个段落如果只有一行且长度不足行长的 60%那它和上下文的视觉关系会很尴尬看着像被孤立的标签。处理办法是控制内容断句或者用text-wrap: pretty让浏览器优化尾行——这个属性较新支持度还不够但配上fallback不影响老浏览器。5.3 排版规范的落地方式一个人做项目规范在心里就行两个人以上就必须写下来否则三个月后代码里会出现五种间距值。我实践下来最有效的落地方式不是写一份几十页的文档而是把规范变成代码里的约束。具体三条第一间距只能通过 CSS 变量使用代码审查时看到padding: 13px直接打回。这一条执行下去一致性基本就有保证了。第二建立一页样式预览页把所有标题层级、段落、列表、表格、代码块、图注的实际渲染效果集中展示。任何人改动了基础样式打开这一页就能看到全局影响比翻代码快十倍。第三新组件开发时先问一句这个能不能用现有的字号和间距组合拼出来。九成情况下能。剩下那一成确实需要新值的才允许扩展变量——并且要写注释说明为什么现有值不够用。这个流程能有效防止令牌无限膨胀。我自己的体会是排版规范真正的价值不在于统一好看而在于降低决策成本。当你不需要每次都思考这里该给多少间距而是直接从 4、8、12、16、24、32、48、64 里挑一个做页面的速度会快很多而且做出来的东西质量下限被抬高了。至于上限那还是得靠审美和反复对比工具帮不上忙。