Information for type users

How does hinting help?

Since hinting is fundamentally about improving the appearance of text at small sizes and low resolutions, many of our concerns when hinting a font are the same as when drawing a font. At Microsoft we take great pains to ensure that all of the fonts we ship are hinted to very high levels. The issues we attempt to address through hinting fall into the following seven categories: color, readability, spacing, weight, alignment, symmetry and 'local aesthetics' (the actual bitmap shapes for each character).

Color
Color is arguably the most striking aspect of a text setting. This is no less true at screen sizes than at high resolution or on the printed page. Abrupt and uneven changes in the color of a word or line are likely to distract the reader. If text is to be legible, an even color is essential.
    In the context of typography, the word 'color' refers to the balance of black and white on the page or screen. The black character shapes and white background of the page combine to produce 'color'. Regardless of how bold or light that color is, it should at least be even and consistent.
    The color of words is determined and complicated by a number of issues - such as the contrast between thick and thin stem weights, the size of the characters' internal spaces, the amounts of intercharacter spacing and interlinear spacing, the jaggedness of diagonal strokes, and the overall thickness of a stroke. Excessively patchy, dark or light areas tend to attract the reader's eye too much for the reading process to be a smooth and efficient one.
    Maintaining an even text color means that the type remains as unobtrusive for the reader as possible. Figure 3 below demonstrates the difference between even and uneven color in different fonts used to set the text.

Figure 3a Uneven color in a text setting. Note how unevenly distributed the stroke weight is, and how the bowls of the lowercase a and e are very tight in comparison with the open round characters.	Even color in a text setting. Stroke weight is consistent, diagonals and curves are controlled, and the overall effect is much more appealing than the example at left.

Figure 3b This is the color produced by the PostScript version of Helvetica Bold Italic rendered at 18 ppem by Adobe Type Manager v3.01. Reduced.	The same text set in TrueType Arial Bold Italic at 18 ppem, and rendered by the Microsoft TrueType rasterizer v1.66. Reduced.

Readability
Readability is a second critical attribute of a well-hinted font. Every glyph should be identifiable as a particular character. If this is not the case, it will be difficult to attain the desired standard of legibility with the font. At very low resolutions it can become quite difficult to represent a character adequately. This is where an element of compromise comes into play; making an 'm' look like an 'm' at 9 ppem may require some playing with the bitmap. Figure 4 below shows some particularly unreadable glyphs.

Figure 4a	Figure 4b	Figure 4c

Spacing
Another contributor to poor legibility at low resolutions is inconsistent intercharacter spacing. This irregular spacing occurs as the result of two things: the rounding up or down in width of the bitmap to fit the character outline, and the difference between the width of the bitmap in pixels and the set width of the character on a high resolution printer. In reality, the space between characters and between words should appear as a regular interval to the eye. Making sure that glyphs do not run into one another at small sizes is vital to maintain even color across the font.
    Spacing characters at low resolutions can be extremely difficult. What should be done, for example, when the lowercase 'i' occupies a total width of four pixels and has a one pixel stem width? Placing one pixel of space on either side creates problems with the remaining pixel. Adding it to the right or left will affect the spacing of characters that precede or follow the letter 'i' in a word, while adding to the stem width will normally make it too heavy for the rest of the characters in the font. These are important considerations, for as the illustrations below show, intercharacter spacing can have a profound effect on the legibility of a font. With the control TrueType offers for adjusting the space around characters as well as the actual letterforms themselves, it is relatively easy to ensure a text setting such as the one shown on the right below. More information on how TrueType makes spacing issues easier to deal with is given later.

Figure 5a. Spacing Uneven spacing in a text sample. Notice how some of the characters bump up against each other, while others create excessive space between themselves. Together these things can dramatically alter the 'color' of a setting.	Even spacing. Each character spaces well between others and the overall effect is much more appealing.

Figure 5b. Spacing The spacing produced by ATM v3.01 Helvetica Bold (at 12 ppem / 9 points). Enlarged.	TrueType Arial Bold, rendered at 12 ppem (9 points) by the Microsoft TrueType rasterizer v1.66. Enlarged.

Weight
In a well-hinted font the weight of the strokes of the characters is controlled. This is important not just within a given font, but also in relation to other fonts in the same typeface family. It makes little sense to deem a weight bold if at the same size the roman or italic weights are just as heavy or even heavier. The following are specific considerations addressed by good quality hinting:

• At which ppem sizes do character's stem widths widen to two, three, four and five pixel stems? Is this suitable for the weight and appearance of the font, or is it too late, or too soon?
• How do the weights of the regular characters compare with the bold and italic of the same typeface family? (it should be possible to control the stem widening (to more pixels) sufficiently to produce a weight difference at every size)
• Do the uppercase glyphs widen in the stems before the lower case glyphs?
• Do the weights of the numerals follow the uppercase or lowercase characters ( neither)?
• Do round character features become wider before straight and square features? Or vice versa?
• Are the overshoots consistent? Do they happen too early or too late? Do they work with fonts in the same family?

Figure 6. Weight across a font family PostScript versions of Times and Times Bold rendered by Adobe Type Manager v3.01 at 11 ppem (8 point). Enlarged.	TrueType Times New Roman rendered by the Microsoft TrueType rasterizer 1.66 at 11 ppem (8 point). Enlarged. Here the weight relationship between the two fonts is much more apparent.

Alignment
Another important consideration when hinting a font is the control of various alignments, both within the font, and in the wider font family. Generally, similar elements should be kept the same at small sizes, where a one or two pixel difference is much more noticeable than it would be over a height of 24 pixels, for example. In practice this means forcing uppercase characters to align to the same height, and doing the same with lowercase characters at both descender level, ascender level and x height. Cap heights need to align properly when a word is set in uppercase characters. But even more than this, these same elements need to align properly across the different variants of the same typeface family. It will normally be important to ensure that x-heights, for example, align exactly when an entire sentence is set in a regular weight except for one word which is set in either italic or bold. Figure 7 compares an example of proper alignment with one of improper alignment.

Figure 7a. Alignment across a font An example of poor alignment across a line of text. Note how the round characters appear taller than those with flat tops, and how unsettling it is to follow the line.	The same font as shown at left, but with improved alignment. Although the round characters actually have slightly greater outline size than the flat characters, they are forced to the same height at this size.

Figure 7b. Alignment across a family PostScript versions of Helvetica, Helvetica Italic, Helvetica Bold and Helvetica Bold Italic rendered by Adobe Type Manager v3.01 at 12 ppem (9 point). Enlarged.

Figure 7b. Alignment across a family TrueType versions of Arial, Arial Italic, Arial Bold and Arial Bold Italic rendered by the Microsoft TrueType rasterizer v1.66 at 12 ppem (9 point). Enlarged.

Symmetry
Although symmetry could easily be subsumed under the following category (local aesthetics) it is discussed here separately because it is generally something which needs to be controlled across the entire font. Despite the subtleties often present in the outlines of characters with diagonal strokes, one of the cleanest methods of dealing with diagonals is to treat them symmetrically at small sizes. This ensures that 'jaggies' are regularized and minimized. The illustrations below show how treating the diagonal strokes symmetrically can improve the appearance of the local shape.

Figure 8a. Symmetry in a character The uppercase 'M' (13 ppem/10 point) and lowercase 'w' (15 ppem/11 point) of Helvetica, rendered by Adobe Type Manager v3.01. Enlarged.	TrueType Arial's uppercase 'M' (13 ppem/10 point) and lowercase 'w' (15 ppem/11 point) rendered by the Microsoft TrueType rasterizer v1.66.

It makes little sense for nearly symmetrical characters to be treated non-symmetrically with only a few pixels. In lines of text, such as those shown below, symmetrical bitmaps can substantially improve the general appearance:

Figure 8b. Symmetry across a font In this text sample set at 36 ppem, the diagonals have not been treated symmetrically. Notice how this adversely affects the textual color.	Here the diagonals are symmetrical, helping lend the sample a much more even color, despite the weight problems apparent in the lowercase r.

Local aesthetics
The categories discussed above have been those that affect the look of the font as a whole. Of course it is also important to consider local aesthetics - the individual bitmap shapes themselves. Hinting can be particularly useful in helping the avoidance of individual pixel spurs and flat runs, for example. It can also help ensure that specific bitmaps are not deformed, remain readable, and that bowls and counters have not closed up.

Next section: TrueType hinting vs other methods

introduction | what is hinting? | why is it necessary?
how does it help? | TrueType hinting vs other methods

back to Information for type users | Hot topic: fonts on the Web
back to the Microsoft Typography Home Page

this document last updated 10 March 1996
© 1996 Microsoft Corporation. all rights reserved.
comments to the MST group: ttwsite@microsoft.com