12 pt 的字,到底是多大?

来源:转载

这几天笔者加购了一台配备高解析萤幕的笔电,由于平时使用的并不是 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 是什么。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,所以若萤幕不设定两边留白,字型大小就会完全一致。这乍看是非常合理的设定,但也产生一些问题。例如印刷惯用 10 pt,在 300 dpi 下,每个字可以用 30 点表示,相当足够,但在萤幕上,就只剩 10 点,加上英文字母上下有突出,主要的部份例如字母 x,只剩下 5 点可用,看起来就比较粗糙。再加上萤幕跟眼睛之间还有键盘,一般观看距离比纸张来得远,字看起来就更小了。


这时,微软想出了一个聪明 (?) 的方法来改善这问题:相对于 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 度,投射出的距离,是会随着观看距离而改变的。底下这张图,直接来自 CSS 2:



这里显示出,在 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 的问题,本文略过不表。

喜欢这篇文章吗? 分享出去给作者一点鼓励吧!

分享给朋友:
您可能感兴趣的文章:
随机阅读: