12 pt 的字,到底是多大

(重刊 2017/12/18 在 MMDays 的文章)

這幾天筆者加購了一台配備高解析螢幕的筆電,由於平時使用的並不是 Apple 系統,且筆電算算也有六年沒換,雖說蹭別人的 Mac Book Pro 玩過幾次,以高解析螢幕為主的使用經驗,在此之前還真沒有過。筆電來了,自然要把附帶的 Windows 10 縮一縮,裝上慣用的 Ubuntu 才是正辦。過程中,又碰上老問題:字太小。

這問題快十年前就碰過,大約知道是 DPI 設定不正確。雖說本行不是幹這個,但為了顧眼睛還是得處理一下,還可寫篇文章談談不專業的豆知識交差。先從字型大小說起。

字型尺寸當然是從電腦出現之前就存在,pt 是 point 縮寫,雖在歷史上幾經變遷,最終在數位出版時代訂立 desktop publishing point,長度為 1/72 英寸,大約 0.353 公釐。說到這似乎已說完了:那麼,12 pt 字,當然就是 12/72,也就是 1/6 英寸(又稱 1 pica),會有什麼問題呢?

然而對電腦使用者而言,卻往往不是如此。我們知道 12 pt 的字,用印表機印出時,大小是固定的。但在一般解析度螢幕上,字比較大,而在高解析度螢幕,字就變小了。這似乎可以自圓其說:高解析度下,一個螢幕上的「點」比較小,所以如果螢幕上的字是由固定點數所組成的,那麼每一點越小,字當然就比較小了。早期的字型的確是這樣的,叫做點陣字,也的確會有在不同解析度大小不一致的問題。但後來向量字型出現,可以平順的縮小放大,也開始用 pt 為標示單位,為何還是有大小不一致的情況呢?

要說明這個,就必須先說明 DPI 是什麼1。DPI 是 dots per inch 的縮寫,表示每英寸點數。數字越大,解析度越高。例如印刷常用的 300 dpi,看起來已經非常清晰,一般 24” 的 1080p 螢幕是 92 dpi,Apple 的 Retina 筆電多半落在 200 多,而 iPhone 由於觀看距離更近,可高達 300 多,iPhone X 更高達 458 dpi (註 1)。有了 DPI 概念之後,再回去想想 pt 的問題,就比較清楚了:假定某印表機以 300 dpi 列印,那麼 12 pt,也就是 1/6 寸的字型,其大小就是 50 點 (dots),而若是在解析度比較低的螢幕,例如 90 dpi,就是 15 點。如此,同樣的字型尺寸,顯示在不同解析度的螢幕上,就是一樣大,只是精細程度不同。

這麼說來,只要知道螢幕 DPI,字型大小的問題照理說就可以得到解決,但為何沒有呢?這又是另外一個故事。1980 年代,Apple Macintosh(麥金塔)電腦設定的解析度是 72 dpi,讀者可發現這跟 point 單位一致,也就是 1 point 剛好對應到 1 dot,12 pt 在螢幕上就用 12 dots 表示。當時搭配的螢幕是 512 x 342,換算下來寬度大約是 7.1 in,而北美慣用的 letter 大小紙張寬度 8.5 in,兩邊扣掉 0.7 in 的留白,恰好是 7.1 in,所以若螢幕不設定兩邊留白,字型大小就會完全一致。這乍看是非常合理的設定,但也產生一些問題。例如 12 pt 的字,在 300 dpi 下,每個字可以用  50 點表示,相當足夠,但在螢幕上,就只剩 12 點,加上英文字母上下有突出,主要的部份例如字母 x,只剩下 6 點可用,看起來就比較粗糙。再加上螢幕跟眼睛之間還有鍵盤,一般觀看距離比紙張來得遠,字看起來就更小了。

這時,微軟想出了一個聰明 (?) 的方法來改善這問題:相對於 Apple 的 72 dpi,他們增加 1/3,在所有軟體中將解析度設定為 96 dpi. 短期內這有幾個效果:若需要 10 pt 的字,解析度是 72 dpi,就只能用 10 點來設計字型,看起來比較粗糙;而若解析度是 96 dpi,就有 13 點,設計上會更容易些。而在顯示時,由於當時螢幕一般都還在 72 dpi 的水準,96 dpi 會導致螢幕使用比所需更多的點數來顯示,讓字母高度變成原先的 4/3 倍,看起來比較清楚。顯而易見的缺點是,這背離了原本 DPI 與 pt 的關係,而隨著 Windows 3.1 大紅,到 Windows XP 長達十多年的統治,這也造成相當深遠的影響。在 Windows 7 之前,預設的 96 dpi 並不會隨著不同螢幕而改變,這也造成前面所提到的,高解析螢幕字比較小的印象。

為了解決這問題,後來微軟發展出 device independent pixel (DIP) 這單位,其定義就是每 DIP 為一寸的 1/96。沒錯,就是 96 dpi 這個魔術數字。舊的 Windows 應用程式,其基本假設就是畫 96 個點是一寸,那麼在高解析螢幕上,只要將其使用的「點」定義為 DIP,就可以保持這程式的界面仍然可用。這也是為何一些比較古早的應用程式,看起來有點糊糊的,因為 Windows 自動以 DIP 放大了原先界面的緣故。

讓這筆糊塗帳更加糊塗的,還有另一個當初看起來很有道理的設計:網頁的 CSS 規範。CSS 全名為 Cascade Style Sheet,就是一般網頁使用的排版格式,其內有個常見的長度單位,px, pixel unit. 以 1998 年公佈的 CSS level 2 來說,CSS 的長度單位分成兩種,絕對與相對。絕對單位包括了 in, cm, mm, pt, pc (pica) 等等,可注意到也有熟悉的 pt,而相對單位則有 em, ex, px,其中 em, ex 是相對於設定的字型大小,例如 1 em 就等於設定的字型大小,所以若設定字型大小為 12 px,那 1 em 就是 12 px. 而 px 則是相對於「顯示裝置的解析度」,也就是螢幕上的一點。由於各個螢幕一點的大小不見得一致,px 就成了相對單位。在 CSS 2 裡面,針對解析度不同以及觀看距離不同的情況,還建議了參考的改變方式,這容後再論。

在 199x 的年代,一般螢幕的解析度不是那麼高,設計上差了幾點,看起來就差很多。例如一條線寬度是一點或兩點,看起來會有相當明顯的差異。所以,設計上會講究 pixel perfect,也就是仔細控制網頁上各個元件長度是幾「點」,而不使用絕對單位。在指定字型時,往往是類似 font-size: 12px 這樣的形式,而其他諸如欄位寬度等等,也一律使用 px 來設計,以確保顯示出的結果符合預期。但這造成一個問題:網頁上的長度單位,包括字型,又再度隨著螢幕解析度而改變了。在 72 dpi 的螢幕上, 12 px 就是 12 pt,沒什麼問題,但螢幕的 dpi 一直在提昇,12 px 的字也就越變越小,只能創造出各式各樣觀念去修正。

在這裡就要提到,前面 CSS 2 針對不同解析度及不同觀看距離,所做的建議。其內容是,1 px 應等於在一般觀看距離,即平均手臂長度,定義為 28 寸,觀看 90 dpi 的螢幕,螢幕上 1 點的大小。也就是說,1 px 從「長度」變成了「角度」,約略等於 0.0227 度,投射出的距離,是會隨著觀看距離而改變的。底下這張圖,直接來自 CSS2:

Reference pixel

這裡顯示出,在 28 寸的距離,1 px 約等於 0.28 mm,而在 140 寸(例如投影情況),1 px 約等於 1.4 mm,是原先的 5 倍。複雜歸複雜,至少這裡對於 1 px 提出一個還不錯的標準,希望在不同的觀看條件下,都能得到一致的經驗,只是事與願違,後來大部分實作都還是採用 1 px 對應螢幕上一點的設計,且 96 dpi 隨著 Windows 四處普及,大家都把 96 px 當成實作上需要 1 寸的約略單位,不但應用程式與網頁如此,連螢幕也是,以避免使用者由於 dpi 差距過大而難以使用。在實作日漸偏離標準的情況下,CSS 2.1 這修正版裡,針對這部份有幾個修改,都相當有趣:

  1. 參考用的 px,從原先定義的 28 寸,90 dpi,改為 96 dpi。也就是說,W3C 肯認大部分螢幕都設計成接近 96 dpi,所以在預設的閱讀距離,也就是 28 寸時,參考用的 px 約略就等於螢幕上的一點。

  2. 將 px 從相對單位,改為絕對單位,長度是 0.75 pt. 如此一來,在 96 dpi 的裝置上,96 px = 72 pt = 1 in,就一致了。

  3. 讓 px 有雙重定義:在接近 96 dpi 的螢幕上,px 保持在 0.75 pt,也就是約略仍等於螢幕上的一點。而在其他情況,則採用角度的定義,而讓其他單位如 pt 等「相對於 px」定義出來。亦即,假設現有一 200 dpi 螢幕,在 28 寸位置,若採用角度定義,px 就不再表示螢幕上的一點,而是約略等於兩點,而 pt 由於相對於 px,就仍然可以約略等於 1/72 寸。而由於是角度,所以只有在 28 寸的觀看距離,pt 才會約略等於物理上的 pt 單位。若在不同距離,例如預設的觀看距離比較近的 iPad mini 與 iPhone 等,網頁上的 pt 與物理上的,就不會相等了。

繞了這麼一大圈,回到一開始的題目:新筆電的 DPI 設定。以下是設定前與設定後比較,這也可以看出,Apple 當時提倡 Retina 螢幕,打破 96 dpi 魔咒,還要維持各類程式、網站等仍然可用,實在是相當了不起的突破,也推動其他廠商跟進,最終造福使用者。

Before

After

[1]: DPI / PPI 的問題,本文略過不表。