字体排版设计原则｜网页设计中的实用排版技巧

打开一个网页，第一眼看到的往往不是图片或按钮，而是文字——标题、段落、导航栏里的字。字本身没表情，但排出来舒服不舒服，直接决定用户愿不愿意往下看。

字号别乱堆，有主次才不累眼

标题比正文大，这是常识；但很多人一上手就用 36px 做 h1，14px 做正文，中间缺过渡，眼睛来回跳着读，像坐过山车。试试“阶梯式字号”：h1 是 32px，h2 落到 24px，h3 是 18px，正文用 16px，小字说明用 14px。一行字里大小差太多，反而模糊重点；差得刚好，读者自然知道哪是标题、哪是补充。

行高不是越大越好，呼吸感要刚刚好

行高（line-height）设成 1.2？太挤。设成 2.0？字像飘在天上。中文排版常用 1.5～1.75，比如正文 16px 字配 24px 行高（即 line-height: 1.5），段落之间再加个 24px 的 margin-bottom，节奏就出来了。手机端可以稍紧凑些，line-height: 1.4 也够用，关键是让每行字之间有“能透气”的空隙，不是塞满，也不是散架。

字体组合别超两种，多了一眼乱

标题用思源黑体 Bold，正文用霞鹜文楷 Light，再加个代码块用 Fira Code —— 这样搭配没问题。但要是标题用微软雅黑、副标题换苹方、正文切到 Noto Sans SC、引用段又切回汉仪旗黑……页面还没加载完，眼睛已经累了。网页排版不是字体展览馆，选一种无衬线做主字体（如阿里巴巴普惠体、HarmonyOS Sans），一种略带个性的字体做点睛（如站酷小薇体用于 banner 标题），就够了。

对齐方式看场景，别硬套“居中最美”

公众号文章、产品介绍页，左对齐最稳妥，符合中文阅读习惯，光标从左往右扫，顺滑不卡顿。标题偶尔居中可以提气，但整段文字居中？读起来费劲，尤其段落一长，眼睛找不到下一行起点。右对齐基本只用在特殊标注或数据表格右侧数字列。至于两端对齐？中文字符宽度不一，浏览器强行拉伸容易出现奇怪的字间距，新手慎用。

留白不是浪费，是给文字划地盘

一个按钮旁边密密麻麻堆着文字说明，用户点还是不点？心里先打个问号。把文字和周围元素拉开点距离，比如段落上下各留 1em，卡片内文字距边框 16px，导航栏文字左右留 20px 内边距——这些空隙不是空白，是视觉缓冲带。就像人说话要换气，文字也需要喘息的位置。

颜色对比要实在，别信“高级灰”

#999 文字配 #eee 背景？看起来很淡雅，实际在阳光下几乎看不见。WCAG 推荐正文文本与背景对比度至少 4.5:1。深灰（#333）配纯白（#fff）稳当；浅灰（#666）配浅米白（#fdfaf3）也可以；但千万别用 #ccc 配 #f5f5f5。检查工具很简单：Chrome 开发者工具里选中文字元素，在 Styles 面板点颜色值旁的小方块，它会自动算出对比度。

改一个标题的字号、调一下段落行高、删掉第三种字体——这些动作看起来小，但用户滑动页面时感受到的流畅感，就藏在这些细节里。