About fonts > TrueType
TrueType Hinting (4 of 5):
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 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.
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.
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.
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
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? Or 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?
Each of these issues is important in aiding legibility on the screen. If there
isn't a discernible difference between two weights of a font on the screen, it
can be difficult to tell headings from text. If uppercase glyphs appear much
bolder than lowercase ones, they will draw too much attention to themselves. And
if round characters widen too early, they can affect both the spacing and the
color of a text setting.
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.
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
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.
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.
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.
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 methodsintroduction | what is hinting? | why is it necessary? | how does it help? | TrueType hinting vs. other methods
Last updated 30 June 1997.
Top of page