Fine Tuning the Light Latin Autohinter output (Part 1)


No Autohinter is perfect. The intent is that the Light Latin Autohinter works well enough for most glyphs. Autohinting for all glyphs in the font should be carefully checked and proofed in VTT 6.10. Hinting for certain glyphs may need editing, either by using the Visual Hinting tools, or by editing the VTT Talk code directly.

As with any typeface design project, a great proofing and editing environment, is critical to achieving great quality results. VTT 6.10 has a built in Rasterizer, that can match how fonts render in the Browser, allowing you to confidently proof your font, and edit the hints, before installing and testing the font live from within the browser. Proofing can be done in the Main Glyph window, by viewing the rendering in the text run examples below the main glyph. By viewing the glyph run as well as looking at the Visual Hinting display, you will begin to recognize when you see certain features that have not been recognized by the Autohinter, or when the Hints are referencing incorrect points on the outline.

see the previous post on setting up VTT 6.10 for proofing Webfonts, to ensure you have the correct settings.

There are a few categories of fixes, (listed below 1-4), that may require some attention.

1. Local fixes to hints within an individual glyph, where the Autohinter has not recognized a certain feature, and the hints may either be missing for that feature, or hints are referencing incorrect points on the outline.

2. Local adjustments to individual glyphs hints, to add interpolate commands, to improve the typographic color and proportion of the glyph,

3. Local fixes to individual glyphs to add ‘deltas’ at specific sizes, to enhance legibility, and to improve the shape & proportion of the glyph.

4. Global adjustments, added to the ‘cvt’ table to adjust the heights of a range of glyphs, at a specific size, such as x-height for all lowercase glyphs, or Cap Height, for all Cap characters.

In this post, I will cover some examples of Category 1. Number 1 is the most important of these fixes, and will need special attention after the Autohinter has run. Categories, 2, 3, & 4 relate to ‘fine tuning’ the font hinting to further improve the screen output quality. I will cover these in a later post.

Category 1.

Example glyph: Cap Q, Georgia Pro Regular.

In this example, the Autohinter Light, does not recognize the bottom round feature in the Capital Q, and does not add any hinting to control this feature. This results in this part of the glyph, looking too light onscreen at a range of sizes, and the feature does not round consistently. See the illustration below, Green box highlighting problem of missing hints, and red underlines highlighting the rendering issues.

CapQ

Editing the Hinting, to add a fix, is easy.

There are two ways to approach it, either by using the graphical hinting tools, or by writing the code directly in the VTT Talk Window, and compiling.

Using the Graphical Hinting tools.

The fix can be made to the ‘Q’, by adding new hinting commands, using the Graphical Hinting tools. (See the steps and the animation below)

(1) Choose the YLink tool from the toolbar. With the left mouse button held down, drag from point, 13, to 31. This will add two lines of code in the VTT Talk Window. (a) Yanchor is added to point 13, using a reference to cvt 9, (Cap Round undershoot) and (b) YDist is added from point 13 to point 31

(a) YAnchor (13,9) (code added by the GUI, hinting)

(b) YDist (13,31) (code added by the GUI, hinting)

(2) Choose the YInterpolate tool. With left click on the mouse held down, position the middle of the YInterpolate cursor over point 13, and drag from point 13 to point 31. With left click on the mouse held down, drag the YInterpolate ‘elastic band’ , to select point 0, as the point to be interpolated between point 13, and point 31, as shown in the animation below. This will add the following line of code to the VTT Talk.

  • YInterpolate (31,0,13)

(3) Open the VTT Talk Window (ctrl 5) and type Res, in front of the YAnchor(13,9)

  • ResYAnchor (13,9) = (Final code, with the Res appended manually in the VTT Talk)

(4) Open the VTT Talk Window (ctrl 5) and type Res, in front of the YDist(13,31)

  • ResYDist(13,31) = (Final code, with the Res appended manually in the VTT Talk)

Note: The ‘Res’ commands used to control the rounding, are not supported in the GUI, and will need to be appended to the VTT Talk code manually. 

(4) Compile the VTT Talk Window (ctrl R)

(5) Save (ctrl S)

Note: When using the Graphical Hinting tools, to add hinting, the high level code for these hints are added to the VTT Talk Window. When Hinting is added via the GUI, VTT will delete the original ‘comments’ added by the Autohinter. Make a copy of the font, once the Autohinter Light has run as a backup, if you would like to have a reference to these comments. The comments are shown in the VTT Talk Window between /* & */. For example: /*Auto-Hinting Light*/. These comments may be useful to keep as a reference to how the font was hinted.

The code added as shown in the animation above, will fix the rendering problem in the Q at a full range of sizes.

Writing the code directly into the VTT Talk Window.

(1) Go to the Cap Q, and open the VTT Talk Window (crtl 5), as shown above.

(2) There are three commands that need to be added. (a:) ResYanchor on point 13, to anchor this point to the Cap Round undershoot, which references cvt 9. (b:) Adding a ResYdist to control the distance from point 13 to point 31. (c:) Adding an interpolate command to position point 0, so that point 0, is in the correct position, relative to point 13 and 31, which now have new gridfitted positions.

/*New Code Added Manually*/

ResYAnchor (13,9)

ResYDist (13,31)

YInterpolate (31,0,13)

(3) Compile the VTT Talk Window (ctrl R)

(4) Save (ctrl S)

manualedits

Looking at the Hinting in the Cap O will give a good reference here to follow, to control the bottom round of the Cap Q. Note, when the new code is added as shown below, compile the code (ctrl R) on the Keyboard, followed by (ctrl S) to save once you are happy with the results.

The code added in this example will fix the rendering problem in the Q at a full range of sizes. This is the same solution as the first example, but this time the code is added manually to the VTT Talk window. If there are only a few hinting commands to be added, as in this case, it is often as easy to write the code manually in the VTT Talk Window, and compiling.

Category 1.

Example 2, glyph: Lowercase a, Verdana Pro Regular.

In this example, the Autohinter Light, does not recognize the middle stem in the lowercase a, and does not add any hinting to control this feature. This results in this part of the glyph, looking too light onscreen at a range of sizes, and the feature does not round consistently.

Using the Graphical Hinting tools.

The fix can be made to the ‘a’, by adding new hinting commands, using the Graphical Hinting tools. (See the steps and the animation above)

(1) Choose the YInterpolate tool. With left click on the mouse held down, position the middle of the YInterpolate cursor over point 21, and drag from point 21 to point 5. With left click on the mouse held down, drag the YInterpolate ‘elastic band’ , to select point 26, as the point to be interpolated between point 21, and point 5, as shown in the animation. This will add the following line of code to the VTT Talk.

  • YInterpolate (5,26,21) (note, point 26 is not yet grid-fitted)

(2) Right click on point 26, and drag one box to the right to choose the align to grid function. This will change the above command from a YInterpolate to a YIPAnchor command, positioning point 26 on the grid.

  • YIPAnchor(5,26,21)

(3) Choose the Ylink tool from the toolbar. With the left mouse button held down, drag from point, 26, to 11. to create a YDist from point 26 to point 11

  • YDist (26,11)

(4) Open the VTT Talk Window (ctrl 5) and type Res, in front of the YDist(26,11)

  • ResYDist (26,11) = (Final code, with the Res appended manually in the VTT Talk)

Note that at the smallest sizes, 9 and 10ppem, the middle bar is too high causing clashing. Go to 9ppem by clicking on the glyph at this size in the size run below the main character in the Main Window, or by using the keyboard shortcut ctrl = and entering the size 9.

(5) Choose the YDelta tool from the toolbar. With the left mouse button held down, click on point, 26, and drag down by one pixel.

(6) Repeat step 5 for 10ppem

(7) Compile the VTT Talk Window (ctrl R)

(8) Save (ctrl S)

Writing the code directly into the VTT Talk Window.

The same fix can be made for the lowercase a, by writing some hinting code directly into the VTT Talk Window and compiling. This fix uses some code that calls a Function, designed to optimally position a middle feature such as the middle stem of the lowercase a. This code is supported in VTT 6.10 and can be used after the Autohinter has run, to optimally position mid bars in glyphs such as Cap H, E F, or in this case the lowercase a. One advantage of using this method, is that at 9 and 10 ppem the middle of the a is positioned correctly, thus removing the need to add any additional Deltas to correct this.

Important Note. When this Hinting command is used, and VTT Talk is compiled, you will not be able to make any further edits via the GUI. If further edits are made by using the Graphical Hinting tools, the code will be overwritten by VTT and will be lost.

(1) Open the VTT Talk Window (ctrl 5)

(2) Type the code at the end of the VTT Talk, just before the Smooth() command. For this example the code looks like this

  • ResYIPDist||(5,26,11,21)

(7) Compile the VTT Talk Window (ctrl R)

(8) Save (ctrl S)

The code essentially does the same thing as in first example above. Point 5, at the beginning and point 21 at the end, are the two points, I used in the Interpolate in the first example. Points 26, and 11, are the points on the middle stem.

In the next post in the series I will look at Categories, 2, 3, & 4 relating to ‘fine tuning’ the font hinting to further improve the screen output quality.

Mike


Comments (0)

Skip to main content