中英文模式阅读
中文模式阅读
英文模式阅读


提示或屏幕优化是调整TrueType或PostScript字体以在计算机显示器上实现最大可读性的过程。本文比较了不同的提示方式(黑白,灰度,ClearType,DirectWrite),并解释了不同光栅器下字体的行为。


提示或屏幕优化是调整字体以在计算机显示器上实现最大可读性的过程。自20世纪90年代初以来,我一直在设计类型,并且只要我记得,类型设计师一直在说暗示很快就会被硬件和软件的新进展淘汰。现在,差不多20年后,暗示似乎比以往更加重要。


问题是典型的现代字体并非主要设计用于计算机屏幕的72--96 dpi分辨率,而是针对打印介质的1,200+ dpi分辨率。字体设计和存储为轮廓,数学上完美的线条和曲线在高分辨率下看起来很棒,但在转换成像素组时,可能会扭曲甚至难以理解,组成计算机显示屏的开关点。虽然几十年来对高清电脑显示器进行了大量讨论,但事实是我5岁的手机拍摄的照片仍然比我的全新电脑在屏幕上显示的细节更精细。


这就是为什么网页设计师长期以来或多或少地限制了十几种字体(Verdana,Georgia,Arial等),这些字体经过手工微调,因此典型的文字大小(9-14pt)显示低分辨率。这些字体很常见,以至于大多数计算机用户都认为它们是免费的,但事实上,Verdana可能是有史以来生产的最昂贵,劳动密集型字体。它包括用于编写极其广泛的语言的字符,并且每个字符都必须调整为在9到60之间的每个点大小都可读(60pt分辨率足以准确显示字形)。换句话说,超过890个字符中的每一个都被重新设计了几十次,每个点大小一次。Original outline of Fedra Sans Screen Regular, before rasterisation


原始轮廓Fedra Sans Screen Regular
,在光栅化之前Hinted version of Fedra Sans Screen, modifying the original outline to fit the grid of the computer screen


Fedra Sans屏幕的暗示版本,修改原始轮廓以适合计算机屏幕的网格。Outlines of Fedra Sans Screen at various sizes


各种尺寸的Fedra Sans屏幕概述。请注意轮廓的不同之处,以实现最佳的屏幕易读性。每个字母基本上都是针对每个磅值设计的。


这正是提示的关键所在:编程指令可以微调字体的光栅化,这是将数学上理想的轮廓映射到显示器像素上的过程。提示可以控制字体的大写和小写字母的高度和宽度,单个行的宽度,字母周围的空白量,大写字母开始使用小写字母的不同主干宽度的大小,角度如何斜体字符的变化最适合像素网格,以及许多其他非常技术性的细节,所有这些都是逐像素的。如果这听起来像是一项相当繁琐,耗时的活动,那就是(即使是那些习惯于单调乏味,耗时的活动的类型设计师)。

Join our mailing list and get €20 off Typotheque fonts


去年有关于@ font-face声明的大量炒作,该功能使网页可以显示任何字体,使设计人员不必依赖"网页安全"字体并开启新的设计可能性(至少是这是创建视觉识别,在印刷和网络媒体上都是一致的)。另一方面,这也引发了新的问题,包括非暗示字体的屏幕显示不良。而且由于提示是乏味的,耗时且被广泛认为几乎已经过时,因此99%的字体,甚至商业字体都是非暗示的。

Hinting TrueType and PostScript fonts


Even when fonts are
暗示最佳的屏幕效果仍然无法保证,因为不同的字体技术有不同的暗示。在PostScript系统中,大多数字体缩放不是由字体处理,而是由rasteriser软件处理,因此PostScript格式的字体看起来通常很好,相对简单的提示或根本没有提示。但是,在TrueType系统中,光栅化器由字体软件中包含的复杂提示指令控制;如果没有此信息,TrueType字体在屏幕上显示不佳。


两种系统都有优点和缺点。 PostScript系统的一个优点是"智能"集中在栅格化器中,因此对栅格化器的任何改进都会立即产生更好的所有PostScript字体渲染。即使是20年前的字体也能在最新的Mac上呈现出色。在TrueType系统中,栅格化更新需要更新所有字体以获得最佳结果。因此暗示黑白或灰度渲染的字体对于Windows的ClearType栅格化器不起作用。另一方面,TrueType提示提供了对光栅化过程的直接逐像素控制,而PostScript提示则没有。Macro photography of Apple Mac Book Pro, subpixel rendering


Apple Mac Book Pro微距摄影。在LCD显示器(平面屏幕)上,每个像素由三个元件组成,可以单独控制。子像素渲染利用了眼睛感知颜色的方式,使用蓝色,红色和绿色的阴影来模拟水平方向上更高的屏幕分辨率。

Mac OS vs. Windows


关于Mac OS如何呈现文本与Windows相比,已经写了很多。我不会在这里详细介绍,但主要区别在于微软的栅格化器试图将字符与整个像素网格对齐,结果"常规"权重看起来更轻,"粗体"权重看起来更重,设计的细微细节可以是丢失在小点大小。 Apple的rasteriser试图尽可能地保留字体的设计,有时以图像清晰度为代价。 Windows的光栅化软件使用一些内置的TrueType字体产生了非常好的结果,但99%的其他字体产生了次优效果。 Mac OS Quartz技术完全忽略了字体提示,并且无论字体格式如何,都能很好地呈现所有字体。


所以让我们现在关注Windows--这就是提示有所作为的地方 - 让我们专注于TrueType字体,这在Windows中看起来更优越。

Hinting Black and White rendering (Grid-Fitting), 1-bit


在操作系统只能打开或关闭像素的日子里开发的黑白暗示控制着哪些像素将以给定的点大小显示。这种提示称为网格拟合,因为字体的轮廓被显着修改以适合屏幕的像素网格。这是最耗时的提示过程,它需要一个经验丰富的hinter至少80小时来提示基本256个字符集的单个字体。具有广泛字符集和/或众多样式的字体当然需要更长的时间。此过程通常还会在字符之间添加白色像素以提高易读性,这可能会在文本的打印版本和屏幕版本之间产生长度差异。微软的Verdana和Georgia是黑白暗示字体的例子。较新的技术使得黑白暗示过时,并允许屏幕上的结果与原始字体更加真实。Black and White rendering of an unhinted font, at 10 ppem, magnified to 200%


黑色和白色渲染的未着色字体,10 ppem,放大到200%Black and White rendering of an hinted font (Fedra Sans Screen), at 10 ppem, magnified to 200%


黑色和白色渲染的暗示字体(Fedra Sans屏幕),10 ppem,放大到200%Black and White rendering of an unhinted font, at 10 ppem, magnified to 200%


黑色和白色渲染的未着色字体,15 ppem,放大到200%Black and White rendering of an hinted font (Fedra Sans Screen), at 15 ppem, magnified to 200%


黑色和白色渲染的暗示字体(Fedra Sans屏幕),15 ppem,放大到200%

Hinting for Grey-scale rendering (Horizontal and Vertical), 4-bit or 8-bit


抗锯齿是Windows 98中引入的一种技术。它通过使用不同的灰色阴影在屏幕上呈现类型来平滑锯齿状线条,因此栅格化器不仅可以限制为黑色或白色像素,还可以选择在他们。


当提示用于灰度渲染的字体时,不需要将字符强制进入精确的像素位置。水平和垂直修改字符,但使用较少的指令。灰度暗示几乎与黑白暗示一样耗时,而暗示通常花费72小时暗示一个256个字符的字体。如果你使用CRT显示器,那些来自20世纪90年代的那些笨重的盒子,那么灰度提示是你能得到的最好的。Grey-scale rendering of an unhinted font, at 10 ppem, magnified to 200%


灰度渲染的未着色字体,10 ppem,放大到200%Grey-scale rendering of an hinted font (Fedra Sans Screen), at 10 ppem, magnified to 200%


灰度字体(Fedra Sans屏幕)的灰度渲染,10 ppem,放大到200%Grey-scale rendering of an unhinted font, at 10 ppem, magnified to 200%


15 xpem的未着色字体的灰度渲染放大到200%Grey-scale rendering of an hinted font (Fedra Sans Screen), at 15 ppem, magnified to 200%


灰度字体(Fedra Sans屏幕)的灰度渲染,15 ppem,放大到200%

Hinting for ClearType rendering (Horizontal Only)


ClearType是Microsoft专有的子像素渲染技术。它试图通过使用每个像素由三个可以单独控制的元素构成的事实来改善平板显示器上文本的外观。 ClearType利用您的眼睛感知颜色的方式,使用蓝色,红色和绿色的阴影来模拟更高的屏幕分辨率。


这意味着文本分辨率可以是三倍,但只能是水平分辨率。这也意味着在ClearType提示中,不会沿垂直轴调整字符,这实际上会减少一半的工作量。单个字体为256个字符需要大约40个小时才能提示。ClearType rendering of an unhinted font, at 10 ppem, magnified to 200%


未着色字体的ClearType渲染,10 ppem,放大到200%ClearType rendering of an hinted font (Fedra Sans Screen), at 10 ppem, magnified to 200%


提示字体的ClearType渲染(Fedra Sans屏幕),10 ppem,放大到200%ClearType rendering of an unhinted font, at 10 ppem, magnified to 200%


15页的未着色字体的ClearType渲染,放大到200%ClearType rendering of an hinted font (Fedra Sans Screen), at 15 ppem, magnified to 200%


提示字体的ClearType渲染(Fedra Sans屏幕),15 ppem,放大到200%

Hinting for DirectWrite rendering (Horizontal and Vertical)


Windows 7附带了一个新的字体栅格化工具DirectWrite。它使用ClearType子像素文本光栅化,但在水平和垂直方向都应用抗抗锯齿。这意味着曲线看起来比使用ClearType栅格化器更平滑。提示与普通ClearType相同。 DirectWrite最显着的变化是它还改进了使用PostScript轮廓的OpenType字体的渲染。 DirectWrite取代了旧的GDI栅格化器,可以在Internet Explorer 9中使用,也可以在未来未指定的Firefox版本中使用。DirectWrite rendering of an unhinted font, at 10 ppem, magnified to 200%


DirectWrite渲染未着色的字体,10 ppem,放大到200%DirectWrite rendering of an hinted font (Fedra Sans Screen), at 10 ppem, magnified to 200%


提示字体的DirectWrite渲染(Fedra Sans屏幕),10 ppem,放大到200%DirectWrite rendering of an unhinted font, at 15 ppem, magnified to 200%


DirectWrite渲染的未着色字体,15 ppem,放大到200%DirectWrite rendering of an hinted font (Fedra Sans Screen), at 15 ppem, magnified to 200%


提示字体的DirectWrite渲染(Fedra Sans屏幕),15 ppem,放大到200%ClearType rendering of an hinted font, at 31 ppem, magnified to 200%


提示字体的ClearType渲染,31 ppem,放大到200%DirectWrite rendering of an hinted font (Fedra Sans Screen), at 21 ppem, magnified to 200%


DirectTerite渲染的提示字体(Fedra Sans Screen),31 ppem,放大到200%。比较上面与ClearType示例相比更平滑的曲线

Practical Implications


这对设计师来说意味着什么?提示可以改善字体的渲染。但是这些字体将由不同平台上的不同光栅器以及通常在不同应用程序中以不同方式呈现(比较例如同一Windows计算机上的Safari和Explorer浏览器中的文本)。如果设计者的意图是一致的跨平台渲染,那么字体也需要在相似的字母上使用一致的设计。


很明显,有一天字体提示最终会过时,但不清楚何时会到来。作为世界上使用最广泛的操作系统,Windows XP(截至本文撰写时仍为58.4%的市场份额)默认情况下关闭了ClearType,因此未打印的字体通常在小尺寸时不能很好地显示。无论我们喜欢与否,看起来暗示将会存在很长一段时间。但是,如果您喜欢Mac上小字体显示字体的方式,您可以将其视为可以很好地呈现文本而无需任何暗示的证明。

Check out Typotheque screen hinted fonts:

Fedra Sans Screen

Fedra Mono Screen

Fedra Serif Screen
Irma Screen

中英文模式阅读
中文模式阅读
英文模式阅读

查看英文原文

查看更多文章


公众号:银河系1号


联系邮箱:public@space-explore.com


(未经同意,请勿转载)