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

Hinting, or screen optimising, is the process by which TrueType or PostScript fonts are adjusted for maximum readability on computer monitors. This text compares different ways of hinting (black & white, grey-scale, ClearType, DirectWrite), and explains the behaviour of fonts under different rasterisers.
提示或屏幕优化是调整TrueType或PostScript字体以在计算机显示器上实现最大可读性的过程。本文比较了不同的提示方式(黑白,灰度,ClearType,DirectWrite),并解释了不同光栅器下字体的行为。

Hinting, or screen optimising, is the process by which fonts are adjusted for maximum readability on computer monitors. I have been designing type since the early 1990s, and for as long as I can remember, type designers have been saying that hinting would soon be made obsolete by new advances in hardware and software. Now, almost 20 years later, hinting seems to be more relevant than ever.
提示或屏幕优化是调整字体以在计算机显示器上实现最大可读性的过程。自20世纪90年代初以来,我一直在设计类型,并且只要我记得,类型设计师一直在说暗示很快就会被硬件和软件的新进展淘汰。现在,差不多20年后,暗示似乎比以往更加重要。

The problem is that typical modern fonts are not designed primarily for the 72--96 dpi resolution of computer screens, but for the much higher 1,200+ dpi resolution of print media. The letterforms are designed and stored as outlines, mathematically perfect lines and curves which look great at high resolutions, but can be distorted or even illegible when converted into groups of pixels, the on-or-off dots that make up a computer's display. And although there has been much discussion about high-definition computer monitors for decades, the fact of the matter is that my 5 year old mobile phone still takes photos with finer detail than my brand new computer can show on its screen.
问题是典型的现代字体并非主要设计用于计算机屏幕的72--96 dpi分辨率,而是针对打印介质的1,200+ dpi分辨率。字体设计和存储为轮廓,数学上完美的线条和曲线在高分辨率下看起来很棒,但在转换成像素组时,可能会扭曲甚至难以理解,组成计算机显示屏的开关点。虽然几十年来对高清电脑显示器进行了大量讨论,但事实是我5岁的手机拍摄的照片仍然比我的全新电脑在屏幕上显示的细节更精细。

This is the reason that webpage designers have long been more or less limited to a dozen or so fonts (Verdana, Georgia, Arial, etc.) that have been fine-tuned by hand so that typical text sizes (9--14pt) display well at low resolutions. These fonts are so common that most computer users think of them as free, but the reality is that Verdana, for example, is probably the most expensive, labor-intensive font ever produced. It includes characters used to write an extremely wide range of languages, and each of these characters had to be adjusted to be readable at every point size between 9 and 60 (at 60pt the resolution is sufficient to display the letterforms accurately). In other words, each of more than 890 characters was 'redesigned' dozens of times, once at every point size.
这就是为什么网页设计师长期以来或多或少地限制了十几种字体(Verdana,Georgia,Arial等),这些字体经过手工微调,因此典型的文字大小(9-14pt)显示低分辨率。这些字体很常见,以至于大多数计算机用户都认为它们是免费的,但事实上,Verdana可能是有史以来生产的最昂贵,劳动密集型字体。它包括用于编写极其广泛的语言的字符,并且每个字符都必须调整为在9到60之间的每个点大小都可读(60pt分辨率足以准确显示字形)。换句话说,超过890个字符中的每一个都被重新设计了几十次,每个点大小一次。Original outline of Fedra Sans Screen Regular, before rasterisation

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

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

Outlines of Fedra Sans Screen at various sizes. Notice how different the outlines are in order to achieve the optimal legibility of screen. Every letter is basically designed for each point size again.
各种尺寸的Fedra Sans屏幕概述。请注意轮廓的不同之处,以实现最佳的屏幕易读性。每个字母基本上都是针对每个磅值设计的。

This is exactly what hinting is about: programming instructions that fine-tune a font's rasterisation, the process by which its mathematically ideal outlines are mapped onto a monitor's pixels. Hinting can control the heights and widths of a font's uppercase and lowercase letters, the widths of its individual lines, the amount of white space around letters, the size at which uppercase letters start to use different stem-widths from lowercase letters, how the angle of italic characters changes to best fit the pixel grid, and many other extremely technical details, all on a pixel-by-pixel basis. If this sounds like a rather tedious, time-consuming activity, it is, (even for type designers, who are accustomed to tedious, time-consuming activities).
这正是提示的关键所在:编程指令可以微调字体的光栅化,这是将数学上理想的轮廓映射到显示器像素上的过程。提示可以控制字体的大写和小写字母的高度和宽度,单个行的宽度,字母周围的空白量,大写字母开始使用小写字母的不同主干宽度的大小,角度如何斜体字符的变化最适合像素网格,以及许多其他非常技术性的细节,所有这些都是逐像素的。如果这听起来像是一项相当繁琐,耗时的活动,那就是(即使是那些习惯于单调乏味,耗时的活动的类型设计师)。

Join our mailing list and get €20 off Typotheque fonts

Last year there was considerable hype about the @font-face declaration, a function that makes it possible for a webpage to display any font, freeing designers from dependence on the 'web-safe' fonts and opening new design possibilities (not the least of which is the creation of visual identities which are consistent across both print and web media). On the other hand, this also raises new issues, including poor onscreen display of non-hinted fonts. And because hinting is tedious, time-consuming and widely believed to be nearly obsolete, 99% of all fonts, even commercial ones, are non-hinted.
去年有关于@ font-face声明的大量炒作,该功能使网页可以显示任何字体,使设计人员不必依赖"网页安全"字体并开启新的设计可能性(至少是这是创建视觉识别,在印刷和网络媒体上都是一致的)。另一方面,这也引发了新的问题,包括非暗示字体的屏幕显示不良。而且由于提示是乏味的,耗时且被广泛认为几乎已经过时,因此99%的字体,甚至商业字体都是非暗示的。

Hinting TrueType and PostScript fonts

Even when fonts
Even when fonts are hinted optimum onscreen results are still not guaranteed, as different font technologies approach hinting differently. In the PostScript system most of the font scaling is handled not by the fonts, but by the rasteriser software, so fonts in PostScript format look often good with relatively simple hinting or no hinting at all. In the TrueType system, however, the rasteriser is controlled by sophisticated hinting instructions contained within the font software; without this information TrueType fonts do not display well onscreen.
暗示最佳的屏幕效果仍然无法保证,因为不同的字体技术有不同的暗示。在PostScript系统中,大多数字体缩放不是由字体处理,而是由rasteriser软件处理,因此PostScript格式的字体看起来通常很好,相对简单的提示或根本没有提示。但是,在TrueType系统中,光栅化器由字体软件中包含的复杂提示指令控制;如果没有此信息,TrueType字体在屏幕上显示不佳。

Both systems have advantages and disadvantages. One advantage of the PostScript system is that the 'intelligence' is concentrated in the rasteriser, so any improvement to the rasteriser immediately produces better rendering of all PostScript fonts. Even 20 year old fonts render nicely on the latest Mac. In the TrueType system, rasteriser updates require all fonts to be updated as well for optimal results. Thus fonts hinted for black and white or greyscale rendering will not work as well with Windows' ClearType rasteriser. On the other hand, TrueType hinting provides direct, pixel-by-pixel control over the rasterising process, which PostScript hinting does not.
两种系统都有优点和缺点。 PostScript系统的一个优点是"智能"集中在栅格化器中,因此对栅格化器的任何改进都会立即产生更好的所有PostScript字体渲染。即使是20年前的字体也能在最新的Mac上呈现出色。在TrueType系统中,栅格化更新需要更新所有字体以获得最佳结果。因此暗示黑白或灰度渲染的字体对于Windows的ClearType栅格化器不起作用。另一方面,TrueType提示提供了对光栅化过程的直接逐像素控制,而PostScript提示则没有。Macro photography of Apple Mac Book Pro, subpixel rendering

Macro photography of Apple Mac Book Pro. On LCD monitors (flat screens) every pixel is made from three elements which can be controlled separately. Subpixel rendering takes advantage of the way your eyes perceive colour, using shades of blue, red and green to simulate higher screen resolution in horizontal direction.
Apple Mac Book Pro微距摄影。在LCD显示器(平面屏幕)上,每个像素由三个元件组成,可以单独控制。子像素渲染利用了眼睛感知颜色的方式,使用蓝色,红色和绿色的阴影来模拟水平方向上更高的屏幕分辨率。

Mac OS vs. Windows

A lot has been written about how Mac OS renders text compared to Windows. I will not go into details here, but the primary difference is that Microsoft's rasteriser tries to align characters to whole pixel grid, with the result that 'Regular' weights look lighter, 'Bold' weights look heavier, and subtle details of design can be lost at small point sizes. Apple's rasteriser tries to preserve the design of the typeface as much as possible, sometimes at the cost of image clarity. Windows' rasterising software produces extremely good results with a few built-in TrueType fonts, but sub-optimal results with 99% of other typefaces. The Mac OS Quartz technology ignores font hinting completely and renders all fonts equally well regardless of their font format.
关于Mac OS如何呈现文本与Windows相比,已经写了很多。我不会在这里详细介绍,但主要区别在于微软的栅格化器试图将字符与整个像素网格对齐,结果"常规"权重看起来更轻,"粗体"权重看起来更重,设计的细微细节可以是丢失在小点大小。 Apple的rasteriser试图尽可能地保留字体的设计,有时以图像清晰度为代价。 Windows的光栅化软件使用一些内置的TrueType字体产生了非常好的结果,但99%的其他字体产生了次优效果。 Mac OS Quartz技术完全忽略了字体提示,并且无论字体格式如何,都能很好地呈现所有字体。

So let's focus now on Windows --- this is where hinting makes a difference --- and let's focus on TrueType fonts, which look superior in Windows at the moment.
所以让我们现在关注Windows--这就是提示有所作为的地方 - 让我们专注于TrueType字体,这在Windows中看起来更优越。

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

Black and white hinting, developed in the days when operating systems could only turn pixels on or off, controls which pixels will be displayed at a given point size. This kind of hinting is called grid-fitting because the outlines of the font are significantly modified to fit the pixel grid of the screen. It is the most time-consuming hinting process, and it takes an experienced hinter at least 80 hours to hint a single font with the basic 256 character set. Fonts with extensive character sets and/or numerous styles of course take much longer. This process also usually adds white pixels between characters to improve legibility, which can create a difference in length between printed and screen versions of a text. Microsoft's Verdana and Georgia are examples of black and white hinted fonts. Newer technology has made black and white hinting obsolete and permitted onscreen results that are much truer to the original letterforms.
在操作系统只能打开或关闭像素的日子里开发的黑白暗示控制着哪些像素将以给定的点大小显示。这种提示称为网格拟合,因为字体的轮廓被显着修改以适合屏幕的像素网格。这是最耗时的提示过程,它需要一个经验丰富的hinter至少80小时来提示基本256个字符集的单个字体。具有广泛字符集和/或众多样式的字体当然需要更长的时间。此过程通常还会在字符之间添加白色像素以提高易读性,这可能会在文本的打印版本和屏幕版本之间产生长度差异。微软的Verdana和Georgia是黑白暗示字体的例子。较新的技术使得黑白暗示过时,并允许屏幕上的结果与原始字体更加真实。Black and White rendering of an unhinted font, at 10 ppem, magnified to 200%

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%

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%

Black and White rendering of an unhinted font, at 15 ppem, magnified to 200%
黑色和白色渲染的未着色字体,15 ppem,放大到200%Black and White rendering of an hinted font (Fedra Sans Screen), at 15 ppem, magnified to 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

Anti-aliasing is a technique that was introduced in Windows 98. It smooths visibly jagged lines by using varying shades of grey to render type on screen, so instead of being limited to only black or white pixels, the rasteriser can also choose to compromise between them.
抗锯齿是Windows 98中引入的一种技术。它通过使用不同的灰色阴影在屏幕上呈现类型来平滑锯齿状线条,因此栅格化器不仅可以限制为黑色或白色像素,还可以选择在他们。

When hinting fonts for grey-scale rendering, characters don't need to be forced into precise pixel positions. Characters are modified both horizontally and vertically, but using fewer instructions. Greyscale hinting is almost as time-consuming as black and white hinting, and a hinter typically spends 72 hours hinting one font of 256 characters. If you use CRT monitors, those bulky boxes from the 1990s, then greyscale hinting is the best you can get.
当提示用于灰度渲染的字体时,不需要将字符强制进入精确的像素位置。水平和垂直修改字符,但使用较少的指令。灰度暗示几乎与黑白暗示一样耗时,而暗示通常花费72小时暗示一个256个字符的字体。如果你使用CRT显示器,那些来自20世纪90年代的那些笨重的盒子,那么灰度提示是你能得到的最好的。Grey-scale rendering of an unhinted font, at 10 ppem, magnified to 200%

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%

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%

Grey-scale rendering of an unhinted font, at 15 ppem, magnified to 200%
15 xpem的未着色字体的灰度渲染放大到200%Grey-scale rendering of an hinted font (Fedra Sans Screen), at 15 ppem, magnified to 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 is a Microsoft proprietary subpixel rendering technology. It attempts to improve the appearance of text on flat-panel monitors by using the fact that every pixel is made from three elements which can be controlled separately. ClearType takes advantage of the way your eyes perceive colour, using shades of blue, red and green to simulate higher screen resolution.
ClearType是Microsoft专有的子像素渲染技术。它试图通过使用每个像素由三个可以单独控制的元素构成的事实来改善平板显示器上文本的外观。 ClearType利用您的眼睛感知颜色的方式,使用蓝色,红色和绿色的阴影来模拟更高的屏幕分辨率。

This means that text resolution can be three times greater, but only horizontally. That also means that in ClearType hinting, characters are not adjusted along the vertical axis, which effectively halves the amount of work. A single font of 256 characters takes about 40 hours to hint.
这意味着文本分辨率可以是三倍,但只能是水平分辨率。这也意味着在ClearType提示中,不会沿垂直轴调整字符,这实际上会减少一半的工作量。单个字体为256个字符需要大约40个小时才能提示。ClearType rendering of an unhinted font, at 10 ppem, magnified to 200%

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 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%

ClearType rendering of an unhinted font, at 15 ppem, magnified to 200%
15页的未着色字体的ClearType渲染,放大到200%ClearType rendering of an hinted font (Fedra Sans Screen), at 15 ppem, magnified to 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 ships with a new font rasteriser, DirectWrite. It uses ClearType sub-pixel text rasterising, but applies anti-antialiasing both horizontally and vertically. This means that curves look smoother than with the ClearType rasteriser. Hinting is the same as for normal ClearType. The most dramatic change with DirectWrite is that it also improves rendering of OpenType fonts with PostScript outlines. DirectWrite replaces the older GDI rasteriser, and will work in Internet Explorer 9, as well in an as-yet unspecified future release of Firefox.
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 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 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 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 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 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%

DirectWrite rendering of an hinted font (Fedra Sans Screen), at 31 ppem, magnified to 200%. Compare the smoother curves compared to the ClearType example above
DirectTerite渲染的提示字体(Fedra Sans Screen),31 ppem,放大到200%。比较上面与ClearType示例相比更平滑的曲线

Practical Implications

What does all this mean to a type designer? Hinting can improve the rendering of fonts. But those fonts will be rendered differently by different rasterisers on different platforms and often in different applications as well, (compare for example text in the Safari and Explorer browsers on the same Windows computer). If the designer's intention is consistent cross-platform rendering, the fonts also need to use consistent design across similar letters.
这对设计师来说意味着什么?提示可以改善字体的渲染。但是这些字体将由不同平台上的不同光栅器以及通常在不同应用程序中以不同方式呈现(比较例如同一Windows计算机上的Safari和Explorer浏览器中的文本)。如果设计者的意图是一致的跨平台渲染,那么字体也需要在相似的字母上使用一致的设计。

It is clear that one day font hinting will finally become obsolete, but it is not clear when that day will come. The most widely used operating system in the world, Windows XP (still 58.4% market share, as of this writing), has ClearType turned off by default, so unhinted fonts typically do not display well at small sizes. Whether we like it or not, it looks like hinting will be around for quite some time. But if you like how fonts display on the Mac at small sizes, you can take that as proof that it is already possible to render text well without any hinting at all.
很明显,有一天字体提示最终会过时,但不清楚何时会到来。作为世界上使用最广泛的操作系统,Windows XP(截至本文撰写时仍为58.4%的市场份额)默认情况下关闭了ClearType,因此未打印的字体通常在小尺寸时不能很好地显示。无论我们喜欢与否,看起来暗示将会存在很长一段时间。但是,如果您喜欢Mac上小字体显示字体的方式,您可以将其视为可以很好地呈现文本而无需任何暗示的证明。

Check out Typotheque screen hinted fonts:

Fedra Sans Screen

Fedra Mono Screen

Fedra Serif Screen
Irma Screen

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

查看英文原文

查看更多文章

公众号:银河系1号
公众号:银河系1号

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

(未经同意,请勿转载)
(未经同意,请勿转载)