Microsoft 向左,Apple 向右


title: Microsoft 向左,Apple 向右

date: 2015-09-20 22:56:26

tags:

  • Typography
  • Apple

最近被周围的人问到一个很有意思的问题:

为什么宋体字在屏幕上和纸上看起来不一样

要回答这个问题,就得先从对现象的验证开始。我们首先从一本印刷书中截取一段用宋体1排印的内文,然后输入电脑,观察它在不同条件下是怎样被显示的:

不难看出,在 Windows 下2,宋体的显示的确和纸书有所区别,申言之,文本整体看起来很「硬」,远远看去很容易辨认,但细看却觉得笔画扭曲、失去了原来的结构。而 Mac(OS X 系统) 的字体显示就是另外一种风格3:它的字型更接近于打印在纸张上的效果,但细看起来却有些「糊」,没有 Windows 下那种一眼就能辨认出的锐利感。

此外,我们还能看出 Windows 系统的字体显示效果会受字号影响。当我们改用一个较大的字号(图中为 16 磅)后,可以看到原本丢失的笔画细节重新出现,整体效果更接近于印刷,但比起 Mac 上那种圆润的感觉仍显得较为粗糙。与此相对,Mac 上的字体效果受字号的影响则很小。

那么,是什么导致了这种区别呢?我们不妨再把画面放大:

上图是「默」字在三种不同场景下的显示效果,图中的一个个小方块就是像素点。我们发现,在 Windows 中以较小字号显示时,文字就像 LED 灯箱上的字一样,是由一个个像素整齐排列而成的;而当字号变大时,文字的边缘变得不那么明晰,在笔画周围出现了不少灰色的像素。同样的现象在 Mac 下则尤其明显——文字几乎已经没有一个明确的边界,围绕着笔画的是大量彩色像素点。

事实上,不仅是宋体,其他字体在 Windows 和 OS X 中也会出现这种显示效果的分异。但我们所关心的是,字体在屏幕上为何要用这种「拐弯抹角」的方法显示呢?不同操作系统的字体显示效果为何区别很大、又是受何种设计理念的指导呢?

首先应当明确的是,屏幕上显示的任何元素都是由一个个像素构成的4,但像素的数量是有限的,对于文字这种细节丰富的形状难免力不从心。因此,如何用有限的像素最大程度地表现出文字,就成为一个重要的问题。

理科生和文科生的思维差异就在这里显现出来了。理科生思维简单暴力,他们的办法是简化、变形文字的笔画,从而降低对像素数量的要求,只求「神似」。这一派别的学名叫做 hinting,其代表就是 Microsoft。你可以看到在 Windows 下,「默」字中的点、撇、捺都被简化成了像素在对角线上的组合;只是在字号变大时,因为有更多像素可以利用,文字的细节才稍显丰富。文科生则会追求一种更艺术的方法:既然本来笔画就没法显示清楚,那干脆就不清楚到底,在笔画的周围加上大量浓淡不齐的辅助像素。这近看起来虽然惨不忍睹,但只要离开一段距离,人眼就不能辨别这么小的尺度。结果,像素在人眼中互相重叠,字体的细节就像化学反应一样显现出来了。这一派叫做 Sub-pixel rendering(亚像素渲染),其代表就是 Apple。

上面文理科思维的比喻当然是戏谑的说法,但 Microsoft 和 Apple 在设计理念上的分异却是显而易见的。简言之,在 Microsoft 看来,文字的边缘必须跟像素一一对齐,以保证辨认度和清晰度,即使代价是结构的变形;而在 Apple 看来,文字必须尽可能地保持它的本来面目,即使代价是显得模糊。

既然有差别,一个不可避免的问题就是:谁更好看?文理科区别也好,工程师和艺术家的碰撞也罢,在过去的十几年中,两家科技巨头就这么分别坚持着自己的价值观和方法论渲染屏幕上的字体,也各自赢得了拥趸。果粉嘲笑 Microsoft 食古不化,字体扭曲;软粉讽刺 Apple 拿腔拿调,字型模糊。但近几年,情况出现了变化。iPhone 4 横空出世,将 61 万多个像素点塞进了 3.5 英寸大小的屏幕中,比之前足足提高了四倍,达到了印刷品的标准,此后,手机的高分辨率化趋势一发不可收;电脑屏幕的分辨率也越来越高,1920*1080 的「全高清」分辨率走下神坛,进入到笔记本中。在这种像素竞赛的大背景下,原本掣肘字体显示的像素紧缺问题已经大大缓解了。看起来,似乎是 Apple 的解决方案更符合趋势:它既能显示出更自然真实的字型,也免去了把每个文字一一为对齐像素而优化的成本,更能充分利用像素。与此相比,Microsoft 那种一个个改字型的做法似乎太笨、也太过时了。

真的是这样吗?

在刚刚发布的 iOS 9 中,有一项不为人知的新功能「动态文本(Dynamic Type)」。简单说来,系统字体被一分为二:Display 和 Text。当显示的字体较大,在 20pt 以上时,系统显示的是 Display 字体,它保留了全部的笔画细节,并且有高达九种不同字重。而当字号下降到 20pt 以下时,系统就会切换为 Text 字体。它在与 Display 保持高度一致的同时,简化了一些细节,例如字母 a 的末端稍稍收敛,字母 t 的两臂则更加舒展,字间距有所扩张,字重变化被削减为六种,以保证小字号下的可读性。

这是什么?这不是 Microsoft 那帮工程师才会干出的事吗?

如果你知道 Microsoft 这几年也通过在 ClearType 和 DirectWrite 之类的技术向 Apple 所青睐的次像素渲染靠拢,就不会对这些看似「离经叛道」的做法大惊小怪。须知在设计的世界里,本来就没有什么四海皆准的法则,也没有什么最优解,有的只是针对不同的材质做不同的处理,从而达到相对最好的效果。文字大、像素多,就充分利用,尽可能地展现出文字本身的美感;文字小、像素少,就做一些精简,先保证文字的可读性。从这个角度看,两家公司在字体渲染问题上的互相靠拢并不是什么妥协或者放弃,而是一种「因『材』制宜」的思考。这比拘泥于一般意义上的「传统」或「美丑」,要有意义得多。


iOS 9 中的新字体苹方,引发了可能是中文互联网有史以来、针对字体问题最广泛的一次讨论。有讨论不是坏事,问题是绝大多数人都只会凭主观感受而给出「美」「丑」这样黑白分明的评价,但「美」「丑」在这里其实并不那么重要。当用户评论美丑时,她只代表自己个人的审美;更何况以很多用户对字体的了解之肤浅,根本达不到谈审美的程度:有多少人只因为一句「像安卓」就给了新字体差评?Apple 作为一个拥有庞大用户基础的公司,既不可能、也无必要去讨好每个用户的口味。那为什么要换字体?因为旧字体字重残缺,扁平化设计呼唤一个粗细过渡更为丰富的字族;因为旧字体的笔梢的喇叭口过于夸张,屏幕显示需要一个更平和简约的设计;因为旧字体字库不全,用户要求一个能高质量而齐全地显示各国文字的方案——这就是一个基于手机屏幕显示这一材质,从功能性角度做出的决策。它在设计上或许是前卫的,但在审美上,它是绝对中立的。

在某处看到过一句话说,在一切二元对立的争论中,终极的答案只有一个,那就是「视情况而定」;但我们要在是非对错这样促狭的论争之外找出更加宏观、普适、高尚的切入点。设计也是一样。纯粹的审美标准大概是不存在的——它也是「视情况而定」,受到社会环境、历史甚至权力的多重影响。但把目光从无尽的美丑之争上移,我们就能找到一个更加普适而重要的标准,那就是「忠于原材料」。工作证上的字该用衬线体还是无衬线体?黑白印刷中的图片该做什么调整?有了这个视角,你就能在在选择的十字路口,做出更快速而准确的决定。无论是向左还是向右,都不要忘了这一点。

Be true to its material.


  1. 「宋体」是一个上位概念,代表这一类横细竖粗、末端有装饰部分的中文字体。事实上,不同厂商、不同名称的「宋体」有很多,它们字型类似,但在笔画细节的处理上有所区别。本文目的是验证和解释屏幕字体渲染中的各类现象,而究属何种宋体,并非有很大影响的变量,为简明起见,略去不提。 ↩
  2. 采用一台安装了 Windows 7 中文版的计算机进行测试,屏幕分辨率为 1366*768 像素。 ↩
  3. 采用一台安装了 OS X 10.10 的 MacBook Air(2013 年初)进行测试,屏幕分辨率为 1366*768 像素。 ↩
  4. 若你觉得抽象,不妨想想广告灯箱,那上面的灯就类似于这里的「像素」,灯的明暗色彩变化构成了不同的图形。 ↩