做网站这些年，我慢慢摸到的字体搭配办法

刚开始做网站的时候，我对字体搭配没什么概念，标题随便挑一个看着顺眼的，正文再挑一个，拼在一起总觉得哪里别扭。后来做得多了，才慢慢摸到一点门道：标题和正文之间得拉开反差，但气质又不能跑偏。反差不够，页面看着平；气质打架，读起来更难受。

我最早觉得稳妥的做法，是标题和正文用同一个字体家族，只靠字重拉开层次。思源黑体就是这样，标题用粗的，正文用常规的，文档站、后台、工具类页面这么搭基本不会出错。缺点也明显，就是太平了，层次得靠字号和间距慢慢提，急不得。

长文章和博客我后来喜欢用衬线标题。思源宋体的粗字重做标题自带一种正式感，正文用同家族的常规字重，读起来压力小。不过宋体标题字号得够大，字号一小，衬线的细节就糊成一团，这个亏我吃过。

还有一种搭法是衬线标题配无衬线正文，杂志感比较强。我试过标题用 Noto Serif SC 的粗体，正文用 Noto Sans SC，两个出自同一套 Noto 家族，字形上本来就协调，混排不容易出违和感。标题想活泼一点的时候，我用过站酷快乐体，但正文一定得收回来，用中性的黑体兜底，不然整页都会显得闹。

中英文混排的页面也常遇到。英文标题我一般先定调，比如用加粗的无衬线，中文标题跟上，关键是两边的字重和字号要对齐。有一次英文标题看着比中文轻了一截，整行字就像一边沉下去了，后来每次混排我都会先对一下这个。

搭配之外，行高和字重阶梯也是我后来才注意到的。正文行高我现在一般放在一点六到一点八之间，标题可以压到一点二左右。标题、正文、注释之间至少拉开两个字重档，只靠字号硬撑层次感，效果很有限。加载上也有教训，标题字体只加载用到的字重，正文字体做子集化，再加 font-display: swap，首屏才不会因为等字体而闪一下。

这些都是我自己做页面时一点点试出来的，现在回头看，字体搭配没有标准答案，合适的做法都是从具体页面里长出来的。先把手头的页面搭顺了，再慢慢攒自己的组合，比背一份搭配表管用。