从印刷学的观点略谈字体显示的现在和未来

来自于这个问题。

文字是人类最容易加工、查询、保存，并且最为准确的表意工具。内容为王，追究文字的观感，对人类阅读文字材料的工作是相当重要的。

乔布斯在做苹果之前就有研究字体设计的经历，这在之后也成为了苹果设计思想的一部分。现在看来，字体设计的独到之处，也是苹果为什么成为苹果的一个意义非常深的理由。

注：

1. 信心一贯不高，因此略谈成性。有错误请不要见怪。
2. 图没做，有时间会补的。
3. 本文并不刻意区分Retina屏幕和视网膜屏幕两个名词。

衬线和非衬线

前端设计师可能会熟悉，写font-family字体列表时，最后一定要有一个serif或sans-serif兜底。这两个名称就代表了采用浏览器的默认衬线和默认无衬线字体，作为前边都匹配不到时的最后选择。

衬线(serif)这个概念来源于字体排版印刷学，代表除了笔画本来必要的形状之外，在笔画起始端、末端和关键节点处多出来的装饰形状。衬线体的代表是宋体和Times。例如“口”这个字，必要的形状只是一个方块。但用宋体写一个“口”，可以看到在四个角都有多出来的形状。

而非衬线(sans-serif, sans是哪个语言的否定前缀来着？)就是相反的意思，字形只包含笔画的必要形状。非衬线体的代表是黑体和Arial。

▲ 衬线字体和非衬线字体

衬线体的优点是能够改善大段文字的阅读效果。不知道你是否看过这样一个笑话一般的实验：

把一段话的英文单词，只保留首末字母不动，中间全部打乱，仍然能够正确阅读：

Aoccdrnig to a rscheearch at Cmabrigde Uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteer be at the rghit pclae. The rset can be a total mses and you can sitll raed it wouthit porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe. Amzanig!

“剑桥大学出品”这个也许是编的，这段文字本身的结论其实也不完全准确。正确的结论应该表述为：存在于上下文中的单词，关键音节保持不动，其他部分打乱之后，仍然几乎不会影响阅读的准确性。

（例如：第一个词Aoccdrnig，其实不光A和g不动，在Accord和ing断开位置的音节也没有动，所以才容易阅读）

提起这个是说明，人类在阅读文字和图形的时候，都有识别关键点的天然习惯。只要关键点对上了，人类对图形的判断就决定了个八九不离十。而剩余的部分，哪怕看起来占的面积再多，也只有让人类更加确信一点儿的价值。

衬线字就抓住了人类的这个思维特点。人类对字形的认识来源于书写，而书写的关键在于：(1)起点和终点、(2)笔画必须通过/折返的关键点。（例如，我们写一个数字7，重点就在于左上角起头，右上角折弯，正下方收笔。至于两条笔画是直是弯，弧度多少，并没有太多的意义。）

在人类需要花费时间阅读大量文字时，每个文字的阅读时间就变得重要。不同的文字虽然笔画有差异，但决定字形的关键点，其实都不会非常多。并且笔画是1维的线条，多一条少一条比较敏感；而关键点是没有维度的点，多几个感觉也不太明显。

所以使用衬线字体，允许人类迅速抓住字形的关键点，就可以用快速、均匀的速度读出每一个文字。衬线字体阅读文字的时间如果画一条曲线，会是比较平直的。相反，如果用非衬线字体，就会出现简单字读得快，复杂字读得慢的现象，时间曲线是起伏明显的。选择哪个更加舒服，这很清楚。

但衬线体的麻烦在于：不好对付少量大号的文字。因为这时文字量少，意义一目了然，识别字形的时间已经不重要了。而在字号放大之后，衬线字体就会由于多余的图形“花眼”而显得难看。所以现在报纸和书籍的标题，一般都倾向于非衬线体。

衬线体排正文，非衬线体打标题，这呈现了一种天然互补的形态。

字体光栅化：妥协与混乱

一切都随着显示器的发明而改变了。

计算机显示与印刷学的不一致

一切都源于dpi (dot per inch = 点每英寸)，这项表征图形点阵疏密程度的指标的区别。

印刷技术可以轻易达到250-300dpi的密度，因此可以轻易的在一个小空间内，表现出字体很多的细节。印刷品拿普通放大镜看，细节也是清楚的，只有拿40X以上的网点显微镜才能看到印刷的点阵。

但显示器则不然。从诞生到现在，普通显示器的dpi也不过70-150的水平，因此人眼凑近了看就能看到正方形网格的点阵。显示器无法表现很精细的小型图案，这是一个现实的困难。

点阵渲染，矢量抗锯齿渲染，和矢量对点阵的倒逼

由于首先产生的显示器是单色（甚至没有灰度），分辨率也很低的，所以点阵字形就是一种当然的想法了——每个字符占用一定范围的点阵，每个点只有黑和白两种状态。

随着屏幕进入灰度和彩色时代，以及分辨率的增大，显示和打印大号字的需求开始显现。这时人类就发现：对每个字号都做一套点阵，过于费时费力。并且字号大空间就充足，字形可以更加接近字体的本征，个别点的差异并不重要。总之，投入人类技巧去设计点阵字体越来越亏本。

人类很懒，最喜欢用自动化解决一切。所以这时用数学曲线表示形状的矢量字形，很自然就被提了出来。矢量字形可以缩放到任意大小，但缩放之后毕竟仍然是数学描述，想要在屏幕的点阵网格上显示躲不了光栅化一步，确定屏幕上的哪些点落在字形的曲线之内。

但显示器毕竟精细度不够，单纯的光栅化必然产生锯齿。因此让字形边缘产生灰度，不限于黑白两色的抗锯齿技术，随着电脑性能发展也被提了出来。

▲ 对于大字的点阵渲染与抗锯齿渲染

但戏剧性的是，有了抗锯齿技术，矢量字形在小号字上的表现也得到了改善。小号字只要引入灰度，不是纯的黑白，就能大大增加信息量和表现力。哪怕不设计点阵字形，直接用矢量字形渲染也能够辨认。

▲ 对于小字的点阵渲染与抗锯齿渲染，小字的抗锯齿渲染虽然模糊，但仍是可辨的

所以……是否可以完全抛弃小号字的点阵字形呢？很可惜的是，这个尝试的效果并不完美：单纯的矢量渲染，会让整个字“毛茸茸”的一片，并不十分容易辨认。

面对这个问题，就产生了认可和改造两种平行的道路，看下一节。

微软与苹果：是接近印刷学，还是创造显示学？

这一段我说的不好。要看《Joel谈软件》中的一节，大师对苹果和微软的字体抗锯齿技术做出的分析。

苹果选择认可，去追近印刷学——保持简单，保持统一，原样就是原样。

微软选择改造，去创造新的显示学——将点阵字体的优势，引入矢量显示的系统当中，单纯为了屏幕显示的效果去做各种各样的微调(workaround)。

实践不同，但都没有错。并且有一点最终相同的地方是：都是在显示器dpi不足的情况下做的妥协。

独特的计算机文化：衬线与非衬线的倒错

点阵字形由于一般是塞在小空间里，所以设计中需要发挥很多的技巧，让有限的空间中字形怎样既保证清晰可辨，又尽量追求美感。

在这种现实压力下，点阵字形（尤其对于小字）往往会丢失一些字体的本征特点。例如从DOS时代就开始使用的经典16px宋体，在“一”、“口”等简单字的边角，也许还能留下1像素的衬线。但在“霸”、“编”等稍复杂的字上就表现不出衬线了，甚至对于“饕”、“餮”等字连清晰表现全部的笔画都不太可能。

「此处加16px点阵渲染下这几个字的图」

在矢量抗锯齿渲染之下，面临的问题也类似：衬线只能渲染出一些很浅很小的灰度点，到头来会让字在整体上显得很“脏”，显示效果还不如非衬线的清晰可读。

这也就是说，对于大篇幅正文使用的小字，衬线字形几乎不太可行，非衬线字形基本上没有商量。——而这时，文章标题为了突出显示，就必须和正文产生明显区别，所以更习惯于用衬线字。

计算机上标题衬线字，正文非衬线字的习惯用法，相对于印刷学的习惯，是一个非常有趣的倒错。

这种现象在西文网页更加常见。多逛逛洋人的报纸、电视媒体的网站，就总能看到。

中文字体之惑

西文很简单，但中文复杂的要死。就比如说：在12px的字高下，西文真的能勉强做出点阵版的Times衬线字，并且衬线还很明显。而中文根本没有指望。

复杂的东西必定难以产生、难以组合和难以变化。积重难返，知道这个“重”在何处，才能知道如果发生了变革会“变”在哪里。

Windows“宋体”：历史的堆叠造成的二元性

Windows的宋体是一个各种成果堆叠，所制造出来的怪胎。

DOS时代，最开始用点阵字体来表示汉字的时候，是没有明确的“字体”一说的。而开始使用矢量字体时，由于中文印刷学的指导，在“宋仿楷黑”中“宋”自然而然的排在了第一位。

Windows在这一点上犯了糊涂。Windows希望将所有旧的默认字体，组合成单一的默认字体，因此就造成了宋体既是矢量的衬线字，又是点阵的非衬线字的怪象。（微软顺手还引入了另一个怪象，就是宋体在西文上还是最不常用的等宽字体……唉……真是业界毒瘤）

Windows曾经多次修改过宋体的点阵部分的字形，最近一次是Win7的修改，但多年过去都不敢颠覆这个问题，把小字的渲染还原成正确的矢量渲染。习惯成自然，Windows宋体的这个现象恐怕是要一直存在下去，直到Windows和微软公司生命的尽头了。

微软雅黑：姗姗来迟的大一统

不过Windows Vista和7也带来了微软壮士断腕和“曲线救国”的决心：虽然宋体改不了，但总可以新做一个默认字体，在非衬线上保持统一，来结束这场怪象！

这就是我们熟知的微软雅黑。这是一个点阵、矢量和西文部分都精心设计的，一套非常优秀而全面的纯非衬线字体。

M$为了微软雅黑花了不少的$，江湖传闻每个字100$。不管是真是假，在目前看来，这绝对是值得的。微软现在大多数的UI设计，都受惠于字体回归科学的努力。

可惜微软毕竟是个靠吃老本为生的技术后进者——这个努力，相比Mac和Linux都晚了一步。Mac和Linux的中文，一开始就干脆的采用了非衬线体。并且主要依赖矢量渲染，点阵渲染只是用于微调。

Retina：一场伟大的革命

一切又随着Retina屏幕的问世而改变了。

人类不断的在显示器上追求更高的dpi，终于让显示器的dpi赶上甚至超越了印刷的水平。Retina屏幕我记得已经实现了300+的dpi。

形象的来说，我们在普通屏幕上看印刷稿件，需要放大到300%以上，检查所有细节无误才算有保证。但在Retina屏幕上，只需100%的原样，就能真正的所见即所得——见到的细节有多少，印出的细节就有多少。

Retina屏幕：让无数精妙的旧技巧欲哭无泪的破坏者

量变引发质变。dpi增加一点，一般只是图像变小一点。但dpi增加到一定程度，就会导致一个恐怖的质变：**屏幕上的单个像素点，从此以后就不再可辨了**！！！

这也就是说，以下历史悠久的光栅渲染技术，在Retina屏幕上就被无情的淘汰掉了：

• 所有的点阵字型 （无差别全部废弃）
• 矢量渲染小字时的修正技术 （Retina屏幕下，像素数永远足够，不存在小字的概念）
• 有1px精细边框的小图标
• 无抗锯齿的Bresenham直线绘制法 （单点和1像素的直线都不能画了）
• ……（一时想不起来，不过必然还有很多）

可以说这是非常可惜的事情：这些不单单是成熟的技术，更是一门门本身就充满着工程之美的技艺。

这些代表着人类创造力的美妙技艺，最终消失在历史当中，这虽然是技术的进步，但也不得不说是艺术上的的遗憾。

视网膜屏显示学：思想亟待追赶技术的蓝海

不破不立。但先破和后立之间，一般都存在着一道鸿沟。

现在的Retina也是如此。虽然技术上达到了这样的水平，但在软件设计上，可以说我们还没有足够的思想和工具，去完全把Retina屏幕的优势全都用好。（这一点我只知道结论，举不出例子，非常抱歉）

视网膜屏上如何显示？这必将又是一门有待研究开发，通过不断迭代才能得到认识的新科学。

未来将会如何？

随着Retina彻底颠覆了我们对“计算机显示”的认识，我们就必须思考：在新的显示技术的推动下，我们的显示学究竟会有什么样的未来？

预测A：计算机显示学消亡，印刷学统一一切？

显示器达到了印刷的细密度之后，印刷的所有技巧就可以全部套用到显示器上。这样，未来的显示学也就等同于印刷学和平面设计学，显示技术就是可以动的印刷技术，不再需要两套并行的方法论。

预测B：计算机继续创造全新的显示学，仍然与印刷学保持并列？

人类对计算机显示学，已经形成了难以动摇的习惯。则将来人类在视网膜屏幕的时代，仍将发展计算机显示学所产生的方法，仍将尊重人类在上一时代已有的审美观。最终形成一套不完全像印刷学，但可以和印刷学并列的新的显示科学？

前路在何方？

不知道。

我只能看到的是：显示技术的革命，这又将是一个必然发生，但无比漫长的进化过程。

人类花了几十年，创建了以肉眼可辨光栅为技术基础和行事前提的显示科学。没有理由不相信，人类还需要再用上几十年的时间，才能将这一套旧科学彻底的送进博物馆。

前路漫漫，只有不要停止思考和尝试，才是唯一的发展之道。