chapter[4] · part 1 / 鉴赏的基础

文字：字体排印的隐形艺术

印刷应该是隐形的：像一只水晶酒杯，它存在的全部意义是盛放美酒，而不是让人欣赏杯子。 比阿特丽斯·沃德（Beatrice Warde），《水晶酒杯》，1930

本章讨论一种你正在使用的艺术。此刻你眼前的这页书：字号 18px、行高 2 倍、每行约 36 个汉字、衬线字体——这些决定如果做对了，你根本不会注意到它们，只会觉得"读起来很顺"。字体排印（typography）是唯一以隐形为最高成就的视觉艺术。

它也是对程序员性价比最高的一章。界面设计师 Oliver Reichenstein 有句广为流传的断言："Web 设计 95% 是字体排印。"看看你做的产品：除去图片，屏幕上剩下的几乎全是字。把字排好，一个界面就好了一大半；字没排好，再贵的插画也救不回来。

4.1衬线与无衬线：两千年前的笔触化石

字体的第一个分类轴：笔画末端有没有那个小小的"脚"。有，叫衬线体（serif）；没有，叫无衬线体（sans-serif）。这个"脚"不是装饰发明，是一块化石——它保存着两千年前罗马石匠的凿痕：

无衬线体则是工业革命的孩子：十九世纪的广告招贴需要在远处一眼可读的粗壮字形，衬线这种"手工痕迹"被砍掉，只剩功能性的骨架。所以两大家族的语义分工至今仍带着出身的印记——衬线 = 传统、人文、权威、长文阅读；无衬线 = 现代、中性、工业、界面与标识。本书正文用衬线（像一本书），图注和导航用无衬线（像一套界面），就是在使用这套两百年的语义协议。

4.2排版的诞生：古腾堡的栅格

字体是字母的形状，排印是把它们组织到页面上的系统。这个系统的第一个工业级实现，是 1455 年的古腾堡圣经：

古腾堡圣经确立了排印的本质：排版是工程，不是书法。它把"美"从抄写员的手艺转移到了一套可复制的参数里——字号、行长、行距、边距。五百年后，这些参数一个不少地出现在你的 CSS 里。

4.3四个参数决定可读性

排印参数很多，但决定长文可读性的主要是四个，全部可以量化：

参数	CSS	长文经验值	做错的症状
字号	font-size	正文 16–21px，移动端不小于 16px	太小：费力；太大：像儿童读物
行高	line-height	西文 1.5–1.7，中文 1.8–2.1	太挤：串行；太松：段落散架
行长	max-width	西文 45–75 字符，中文 25–40 字	太长：换行迷路；太短：视线频繁折返
段距	margin	约一个行高，且明显大于行距	段距≈行距时，段落结构消失

注意中文行高显著高于西文。原因在字形结构：拉丁字母有升部降部（b、p 的出头），字行之间天然有"锯齿状"空隙；汉字是顶天立地的方块，行与行之间若不主动留空，会糊成一片墙。中文排版的一切参数，都要为"方块字密度更高"这个事实买单——这也是为什么直接套用英文模板的中文网站总显得喘不过气。

4.4层级：两种字号、两种字重，解决一切

正文之外，界面文字的核心问题是层级（hierarchy）：让用户不读内容就能看出"什么是标题、什么是正文、什么可以忽略"。建立层级的工具按副作用从小到大排序：字重 → 字号 → 颜色（明度）→ 换字体。新手常犯的错是反着用：标题换三种字体、五种颜色，层级反而消失——因为处处不同等于处处相同。

一个可靠的下限配方：两种字号 + 两种字重的 2×2 矩阵，足以表达四级层级（大粗=标题，大细=副题，小粗=强调，小细=正文）。本书的图注就只用了这个配方。先把 2×2 用到极限，不够再扩展——几乎从来不需要扩展。

4.5中文的另一条传统：当文字本身就是艺术

西方把"写字"与"排字"分成书法与排印两门手艺，中文传统里两者的边界要模糊得多——因为汉字本身的造型空间大得多。看一眼中文书写传统的最高峰：

4.6认字体：一张气质速查地图

4.1 把字体分成衬线与无衬线两大族，但每一族内部还有光谱，而光谱上的位置直接决定了字体的"气质"。你不需要记住几百种字体的名字，只需要学会看出一个字体落在光谱的哪一段——这和鉴赏画作一样，是模式识别。下面这张字样表用的是你设备上很可能装着的字体，请直接盯着字形本身看，而不是看名字：

这张地图给出一条实用的配字原则：配对要"够不同，才不打架"。同一族里挑两个气质相近的字体（比如两个都中性的无衬线），它们的差异小到只会让人觉得"哪里怪怪的"——又是那个"羞怯的差异"（第七章会正式命名）。安全且高级的经典组合是跨族搭配：一个有性格的衬线做标题 + 一个中性的无衬线做正文（或反过来），靠族的差异拉开层级，靠各自的克制保持和谐。本书自己就是这个套路：思源宋体做正文的"声音"，思源黑体做标签的"旁白"，JetBrains Mono 做代码的"机器音"——三个声部，各有分工（回看第〇章 0.2 节）。