Ascender Blog

Monotype Imaging is a leading provider of advanced font products specializing in font technologies, type design, multilingual font development & licensing and software development for mobile phones. The Monotype Imaging team is renowned for its TrueType and OpenType font expertise, and can tune fonts for on-screen legibility in Microsoft Windows as well as Digital TV, Set Top Boxes, Mobile Phones, Game Consoles, Embedded Systems, Consumer Electronics and other devices.


Tom Rickner explains font rendering

Wednesday, October 13, 2010

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 post 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.

Figure 1 - A bitmap font characterFonts 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.

Figure 1. Bitmap of an ampersand” and its underlying data.
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.

Scalable outline, bitmap, grayscale, and color anti-alias rendering

Figure 2. A scalable outline and some of its possible rasterizations.
Let us begin by examining in broad terms how a typical TrueType or OpenType font is converted into pixels.

Outline of a glyph with points identifiedScalable 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.

Figure 3. Scalable outline of an “S” with its defined point structure.

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.

TrueType hinting compared: unhinted, auto-hinted, and manually hinted fonts

Figure 4. TrueType font comparisons with various hinting methods. Note the problem characters.
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.

Comparison of Windows ClearType, Apple Quartz, Adobe CoolType and FreeType font rendering software

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. 

More Information:
On-Screen Legibility (hinting)
Fonts for User Interfaces

Labels: , , , , ,

Links to this post:

Create a Link