（重刊 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:
這裡顯示出，在 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 這修正版裡，針對這部份有幾個修改，都相當有趣：
參考用的 px，從原先定義的 28 寸，90 dpi，改為 96 dpi。也就是說，W3C 肯認大部分螢幕都設計成接近 96 dpi，所以在預設的閱讀距離，也就是 28 寸時，參考用的 px 約略就等於螢幕上的一點。
將 px 從相對單位，改為絕對單位，長度是 0.75 pt. 如此一來，在 96 dpi 的裝置上，96 px = 72 pt = 1 in，就一致了。
讓 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 魔咒，還要維持各類程式、網站等仍然可用，實在是相當了不起的突破，也推動其他廠商跟進，最終造福使用者。
[1]: DPI / PPI 的問題，本文略過不表。
