從印刷學的觀點略談字體顯示的如今和將來

來自於這個問題。

文字是人類最容易加工、查詢、保存，而且最爲準確的表意工具。內容爲王，追究文字的觀感，對人類閱讀文字材料的工做是至關重要的。

喬布斯在作蘋果以前就有研究字體設計的經歷，這在以後也成爲了蘋果設計思想的一部分。如今看來，字體設計的獨到之處，也是蘋果爲何成爲蘋果的一個意義很是深的理由。

注：

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：計算機繼續創造全新的顯示學，仍然與印刷學保持並列？

人類對計算機顯示學，已經造成了難以動搖的習慣。則未來人類在視網膜屏幕的時代，仍將發展計算機顯示學所產生的方法，仍將尊重人類在上一時代已有的審美觀。最終造成一套不徹底像印刷學，但能夠和印刷學並列的新的顯示科學？

前路在何方？

不知道。

我只能看到的是：顯示技術的革命，這又將是一個必然發生，但無比漫長的進化過程。

人類花了幾十年，建立了以肉眼可辨光柵爲技術基礎和行事前提的顯示科學。沒有理由不相信，人類還須要再用上幾十年的時間，才能將這一套舊科學完全的送進博物館。

前路漫漫，只有不要中止思考和嘗試，纔是惟一的發展之道。