MacOS 自 Mountain Lion 预置的 Songti SC/TC 看一眼就喜欢上了。尽管 Windows 和各 Linux 发行版上衬线体的效果远不如无衬线体,最终还是无法打消在文章里使用衬线体的念头。

字例

衬线体在汉字印刷中对应白体,中国大陆称宋体,香港和澳门称明体,台湾则兼有宋体和明体的称法。日本称衬线汉字字体为明朝体みんちょうたい

衬线体(serif)是一种西文字体的风格,衬线是出现在笔画末端起装饰作用的线条。与衬线体相对,没有衬线的字体风格称为无衬线体(sans-serif)衬线体保留了手书字的特征,体现人文感,更传统;无衬线体强调文字的几何特征,富有科技感,更加现代。纸质媒体上的正文一般使用衬线体,标题等醒目的位置使用无衬线体。而电子设备上无衬线文字比衬线文字更容易阅读,在正文里使用无衬线体的情况比较常见。

我理解衬线体和无衬线体分别代表感性的阅读和理性的阅读,比如上一篇写厨房故事,衬线字的使用是很自然的,烘托出生活感;到了技术写作,衬线字和平铺直叙的文本风格就格格不入了。所以我做了这样的假设:衬线字能调动感性思维模式,阅读使用衬线体展示的大量信息时就会有「累」的感受;无衬线体倾向于无感情的叙述,帮助进入理性思维模式,面对大量信息时就不易疲劳了。

学长看了看说了句「我觉得是正式与随性的区别」让我想到了更令人信服的解释——

因为衬线字显得正式,所以内容要有节奏感。

阅读一段使用衬线体,内容却很随意的文字,容易产生焦虑感。这和衬线体正式、拘谨的心理暗示不无关系。有起伏、有节奏的内容则在这时候引导读者的阅读,维持平稳的视线运动,因而没有焦虑和疲劳的感觉。与阅读衬线文字比起来,阅读一段无衬线文字任何情况下都更加轻松,因此无衬线体是适用范围更广,同时也是更加安全的选择。

不只是内容,考虑阅读的流畅度,衬线体对排版有一定的要求,最基础的是行宽和行距。行宽即是每行能够容纳的文字数量,行宽的选择以「能分清不同行的条件下尽可能少换行」为标准,目前使用的行宽大概是 30 个全角字符。制作主题时参考的《西文排版》提出方块字的适宜行距在 1.6 到 1.8 倍之间,不过经过尝试我还是感觉对衬线体来说 2.0 倍行距更加舒适

使用桌面浏览器的读者会看到文中使用了「旁注」补充段落内容。注意到旁注这个方法之前,旁注文字是排在文章中的。使用无衬线体的时候,我可以跳着读掉这个段落继续后面的文本。而阅读衬线文本的习惯是线性的,这个段落就很可能破坏阅读的思路。第一个选择是去掉这段文本,但后文使用「明体」等术语时会由于缺少铺垫显得十分唐突。第二个选择是把段落放到后文使用术语的位置,但此时两个段落的逻辑关系会被割裂。

这种情况提示我们使用一个既可以展示信息,又不会打乱阅读视线的排版方法,幸运的是排印业的前辈们早就发明了「旁注」来解决这个问题。另外,文章中出现大型表格也会影响阅读体验,运用相同的原理,将文章中出现的表格移到文章最后,就成为附录结构。在这篇文章之前我是万万想不到这些原本用在论文和书籍中的排版结构会出现在这里,更想不到使用这些结构竟是因为衬线字,难道这是字面上的「无巧不成书」。

借助类似 justfont.com 支持根据页面里使用的字符生成裁剪过的字库的服务,也能使用 Webfont 渲染汉字。

解释了内容和排版的问题,字体选择倒成了个次要的问题。网页字体的选择一般限定在平台预置的字体当中。Windows、MacOS、Linux 平台为每个语言都提供了一到两种预置字体。组合不同字体经过一番对比之后使用了这样的字体组合

  • 西文:Times New Roman、Liberation Serif
  • 简体中文:Songti SC、中易宋体
  • 繁體中文:Songti TC、新細明體
  • 日本語:游明朝、IPA明朝

有一些有趣的细节,比如 Mac 上有 STSongti(即 Songti SC/TC)和 STSong 两款都是常州华文公司制作的「华文宋体」

字例

STSong 是 MacOS 上默认的宋体,STSongti 是从 OS X 10.8 开始预置的。正在用的 Songti SC Regular 就在 STSongti 中。STSongti 西文直接复刻了 Monotype Garamond(下图)虽然 Garamond 字形很棒,这个复刻的版本字符宽度却有点问题,还是不用为妙。

字例

后来比较日文字体的时候发现 Yu Mincho 这款 Windows 和 MacOS 都预置的日文衬线字体,和 Hiragino 一样是字游工房JIYUKOBO作品,两个字体是参照相同的设计标准制作的。最后把钦定的 Hira 换成了字形更憨厚的 Yu Mincho(笑)

字例

最初只打算介绍网页里衬线字体的选择方案,没过多久就进入了死胡同。衬线字这么麻烦,为什么非要用呢?问自己这个问题的同时逐渐发现应当思考的是「为什么会遇到瓶颈」以及「违和感来自哪里」之类的问题。思考的同时把思路记录到文章里,文章从一开始阅读会感到焦虑和烦躁,逐渐写成现在读起来能自然连贯的感觉。最后写到这里,很满足了。

后记①:还是把 blog 的 fallback 字体改成了无衬线体,在 Mac 之外的设备上网页会显示默认的无衬线体。

后记②:还可以有使用思源宋体的方案。


附表① 平台预置衬线字体

简体中文
WindowsSimSun 中易宋体、NSimSun 新宋体、STSong 华文宋体
MacOSSTSong 华文宋体、Songti SC 华文宋体
LinuxAR PL Sungti 文鼎简报宋
繁體中文
WindowsPMingLiu 新細明體
MacOSLiSong Pro 儷宋Pro、Songti TC 華文宋體
LinuxI.BMing
日本語
WindowsMS Mincho MS明朝、Yu Mincho 游明朝
MacOSHiragino Mincho ヒラギノ明朝、YuMincho 游明朝
LinuxIPAMincho IPA明朝
iOSHiraMinW3 ヒラギノ明朝W3