从印刷学的观点略谈字体显示的如今和将来

来自于这个问题。

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

乔布斯在作苹果以前就有研究字体设计的经历，这在以后也成为了苹果设计思想的一部分。如今看来，字体设计的独到之处，也是苹果为何成为苹果的一个意义很是深的理由。

注：

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：计算机继续创造全新的显示学，仍然与印刷学保持并列？

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

前路在何方？

不知道。

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

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

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