TrueType Hinting and Font Rendering
Ascender's Tom Rickner has been tuning fonts for the screen for more than 20 years, and is recognized as the leading authority on TrueType hinting. In this article Tom provides an overview of font rendering.
The way a font looks on screen is determined by the system’s rasterizer, an indispensable piece of software which produces the bitmaps we view on screen or in print. Fonts can be stored as bitmaps, outlines or strokes. Each format has its pros and cons, which we will discuss in future issues, but all of them are ultimately rendered as a bitmap.
A bitmap is essentially a series of discrete pixels arranged to produce the desired shape of a letter at a specific size and resolution. Bitmaps can be black and white, where a pixel is either “on” or “off”. Bitmaps can also be grayscale or even color. The number of shades of gray or number of colors in a bitmap is referred to as the bit depth. In the case of stroke or outline fonts, the data can be interpreted by the rasterizer to produce bitmaps at an effectively infinite number of sizes, bit depths and orientations.
Let us begin by examining in broad terms how a typical TrueType or OpenType font is converted into pixels.
Scalable Outline Format The outline of each glyph is stored as a series of coordinates that, when connected by lines and curves, produce the shape of the letter in question. OpenType fonts can have their glyphs described with either cubic beziers (Postscript CFF) or quadratic beziers (TrueType) which use different mathematical descriptions of their curves. But the idea remains the same: a series of connected points define the idealized shape of each letter.
Outline Scaling These coordinates are scaled to the desired size for rendering. Type size is typically expressed in printers’ points. While point size is useful for typographers and graphic designers, it does not communicate the resolution of the rendering device, and so a more precise unit of measurement is what we call pixels per em, or ppem. This resolution-independent value defines the number of device pixels within the point size of the font. One can envision the scaled outline as being drawn on tracing paper, laid over graph paper, where the squares produced by lines on the graph paper represent the pixels of the device. The height of the point size in pixels is the scaled ppem size.
Outline Adjusting Once an outline is scaled to the desired target size, a bitmap could be created by simply filling in pixels which reside within the glyph outline. This process of filling pixels is called scan conversion. One of the simplest scan conversion algorithms is to turn a pixel “on” if its center resides within the confines of the glyph outline. This very simple method produces adequate results at large sizes, or with very high resolution, but it is inadequate for low resolution environments like a desktop or mobile screen.
These results can be improved by adjusting the outline to better fit the pixel grid using what is generically referred to as ‘hints’. Hints are defined as any code or data which, when interpreted by a font rasterizer, will improve the resulting bitmap. They typically ensure a level of consistency in height alignments and stem weights, as well as improve the overall shapes and spacing of a font. The hints can be generated either “on the fly” within certain rasterizers, or (in the vast majority of cases) they are developed as a part of the font production process. The latter can be done manually, automatically, or some combination of the two. This overview is too brief to cover such a deep topic thoroughly, but it may suffice to say that the more manual human intervention that is applied to the hinting of a font, the higher the quality of the final rendering.
Font Rasterizers in the Wild There are many different rasterizers in use today, and each of them is unique in some way from all the others. As the inventors of TrueType, Apple delivered the first TrueType rasterizer with Macintosh System 7 in 1991. In an effort to make TrueType the standard font format, they licensed TrueType to Microsoft and other font foundries. However, even the first port of Apple’s code to Windows 3.1 resulted in small differences. The differences have only increased with time, and so it is a significant challenge to produce a font which renders the same pixels in multiple environments. Matters are complicated further now that OpenType is the defacto standard, as OpenType can support either TrueType or PostScript style outline data, and thus each rasterizer has two main code bases to support these different sub-formats.
Figure 5 - comparison of a font rendered in popular font rasterizers
In addition to these, there are a variety of proprietary implementations, which have their own idiosyncrasies. In our next issue we will look at each of the major rasterizers in greater detail and explore how different types of OpenType data interact with them.