HINTING
autor: Olivera Stojadinović
August 2006
translation into English: Danijela Tomazović
November 2009
Many fonts look completely different when viewed on the monitor compared to when printed. It happens that on the screen stems are of different thickness and the letter heights are once larger once smaller, so the letter widths and spaces between them are also often not logical, and this layout differs when font size is changed or enlarged. However, these anomalies disappear when the text is printed. This means that the font is well envisioned and drawn, but the hinting is not (well) done. Hinting is additional programming that ensures aligned letters layout in smaller sizes and resolutions. This procedure is necessary with the fonts designed for sales and is done by production experts. However, the available font design software (Fontographer, FontLab) enable automatic hinting, which can be quite successful in case necessary adjustments are previously made, so this kind of hinting can be done by a designer herself.
In digital fonts, the letters are defined in vectors, as a group of closed curved contours outlining the letter shape. These lines are recorded through coordinates of nodes and their tangents ends. Vector definition enables different letter sizes to be achieved with geometrical enlarging or reducing of the existing outline.
When letters are shown on the screen, imageset on film or printed, the vector outline must be turned into a bitmap, which is a group of dots (pixels) on the grid whose density is determined by the resolution of the output device – screen, printer or imagesetter. The more resolution and font size are larger, the more precisely image follows the shapes defined by the outline. In case the resolution or font size is smaller, the number of pixels available for font layout is smaller, so it can happen that the image becomes quite different than its geometrical outline. The quantity relevant for this is PPM (pixels per eM), that is, the number of pixels included in the letter height (M-square). This quantity is the smallest in screen layout, since the monitors have the lowest resolution, and this is the reason why some fonts look much worse on monitors than when printed.
PPM value is calculated in the following way:
PPM = resolution [dpi] / 72 × letter size [pt]
This way, on the screen of 72 dpi (dots per inch) resolution, the 12 pt (1pt = 1/72 inch) font will be defined using 12 pixels, and if the screen resolution is 96 dpi – using 16 pixels.
The process in which the geometrical outline is turned into a group of pixels is called rasterization. The letter outline falls onto the rasterizing grid and those pixels that are within the drawing are black – included, and the ones that are outside are white – excluded. However, bordering pixels that the outline itself falls onto should also be defined. The look of rasterized character largely depends on which ones of them will be included and which ones excluded. In different letter sizes and rasterizing grid resolutions, the letter outline will have different position. Basically, the coordinates of the points should be each time rounded up to a whole number based on certain criterion.
In order for the letters in the font to look uniformed in different PPM values (for different resolutions and letter sizes), algorithms are added to the font. These are the programs controlling the way rasterization will be done. A group of these instructions is called the hints, and hinting is the process of their determining.
Besides vector definition of the letters and their spacing, hints are an important characteristic of the font. In case the font is turned into outlines (as it is sometimes done when font is sent to a printing house), only the drawings of the letters and the current spacing remain while the hints are lost, so sometimes it happens the small letters come out wider in print or with different stems. This is why it is important for the letters to remain in font format, so that the rasterization is done as defined by hinting.
PostScript and TrueType fonts are defined in different ways, so they also have different hinting. In PostScript formats, the vector definition is simpler, and implementation of hints is easier. When the parameters are well adjusted, automatic hinting gives quite satisfying results. TrueType format includes three types of different programs (instructions) which on different levels control the points positioning during rasterization. These programs use a special programming language and are very efficient but also complicated for usage, so the hinting of TrueType fonts is usually delegated to experts specialized in this field. A well performed TrueType hinting gives better results than PostScript (Type 1) hints in small sizes, especially in italic fonts.
There are character level hints as well.
On a font level, alignment zones and standard stem widths are defined, as well as control data which additionally define hinting process.
Within the glyph, horizontal and vertical stem hints can be added, as well as diagonal and serif hints. Type 1 hints are exclusively horizontal and vertical (stem hints), though diagonal and serif are added in TrueType format.
Alignment zones control the behavior of overshoots (round letters and caps crossing the line below and above the straight letters) in small PPM (letter height in pixels) values. Top and bottom alignment zones include the overshoot for both small and capital letters. The alignment direction is also defined, that is, round letters in small sizes are inclined towards aligning with straight letters (overshoot disappears). Besides these primary alignment zones, secondary zones around ascender and descender heights can be defined as well. Alignment zones are also called blue values.
In order for these zones to be defined properly, one has to be careful that when drawing the letters, all flat characters are on a baseline and are of equal height, and the round letters and caps do not cross the overshoot zone.
Within the font, usually a few standard values of stem widths repeat in range of characters. Stems can be horizontal or vertical, and their width is defined by the orthogonal distance between the two characteristic points. It is important for those points to be extremes, meaning that their tangents are horizontal, that is, vertical. (In diagonal stems, width is defined by two given points which do not have to be extremes.)
In order for the letters to undergo hinting properly, it is desirable that those elements of letters we always want to show uniform are precisely drawn, in order to be of same dimensions. This is how, for example, widths of vertical strokes on small letters should be equal also widths of horizontal strokes on small letters, serif thickness etc. All of this is applied to caps and other characters.
Additional control parameters are the third segment of the hinting at font level. With them, one can set the border PPM value for overshoots, and can also set the tolerance value for widths of stems which are to be hinted. The names of these parameters also have the “blue” tag: BlueScale, BlueShift, BlueFuzz. In automatic hinting, they have some default values in the beginning.
Hinting is done within single characters as well, where besides the values defined within the font, distances typical for the given character are also hinted, and those can be distances between particular elements as well as widths of white spaces, that is, counters.
In order to perform hinting properly, one needs:
Too many hints can damage the look of the letters. In PostScript fonts, diagonal and serif hints should be excluded, because they are not supported within this format. If automatic hinting does not give the correct layout of a single character (letter), the hints can be added or removed manually.
Type 1 hint is defined by two typical points and direction. It is shown as a horizontal or vertical line with an arrow pointing the direction. There are rules about the interposition of Type 1 hints. They cannot be added one onto another, and must not overlap.
A difficulty which occurs in PostScript is hinting of the three equally spaced stems. They cannot be hinted properly as by the standard procedure, but each letter must be divided in two segments. Their hints are successively active, so overlap is avoided with this. This procedure is called hint replacement (it is not possible to apply it in Fontographer, but only in FontLab).
When it is about TrueType format, hinting is completely different. For each character, a special program controlling the movement of the points when PPM value is changed is defined. There are three types of instructions: basic program (Font Program) is started when font is used for the first time. Second basic program (PPM Program) responds to each PPM size change. Local programs (Glyph Programs) are executed for each glyph when it is scaled. The points whose movement is controlled are called touched points , and the positions of other points are derived with interpolation. Besides the stems which additionally can be slanted, as well as counters, serifs are also hinted. The points are linked by stems, single or double links, and the final adjustment is done by so called delta-hints .
Although the hinting procedure is different than in PostScript formats, it is recommended that the letters are first drawn and hinted as PostScript (Type 1), and only then converted in TrueType format. Correctly inserted Type 1 hints are a good base for further work on TrueType hints.
LITERATURE
Using Fontographer.pdf [1.77 KB]
FontLab Studio User's Manual
Adobe Systems: Basic Type 1 Hinting, by David Lemon
Microsoft: Introduction to [TrueType] Hinting
Microsoft: The Raster Tragedy at Low Resolution, by Beat Stamm
SIL: Notes on Hinting with FontLab, by Victor Gaultney
TrueType Typography: TrueType Hinting, by Laurence Penney
Will-Harris: Get The Hint! Tom Rickner interview