Developing fonts > Tools & SDKs > VTT resources
From typeface to font file
Preparing a Typeface for TrueType
All typefaces and font sources need to be prepared before a TrueType hinting project can be started.
Today two of the most common ways typefaces have been stored as sources are in an Ikarus or a PostScript format. Many typefaces are drawn with bézier drawing programs or commercial bézier based font programs and made into PostScript font files. Acceptable print quality can be achieved with a bézier font program without the use of standardized marking procedures required by professional type foundries. Often designers mark béziers without paying attention to how exact the bézier point markings are positioned. A higher quality process is necessary to prepare a font file for hinting to insure that the minimum amounts of instructions are used in the final font file. An example of a problem is if, a glyph is suppose to be on the baseline and it is not or if a stem is suppose to be exactly straight and it is not, extra hints would be needed to make them correct. Always keep in mind that if you start with bad outlines, you can't improve them later.
Designing the outlines for Trebuchet
The current TrueType production process is split: with the design and hinting process done on a Macintosh, and the testing of the font file on Windows.
Trebuchet was a project intended to be a clean screen reading font, as well as a scalable printing outline font.
After working through drawings and individual images, I started the outlines using Macromedia Fontographer 4.1 for the Macintosh. Starting with outlines I created for a previous project, which was an unreleased grotesque style design.
Trebuchet is a sans serif typeface with modern geometric features. I used consistent stem distances, accurate group height alignments and zero tolerances for straight strokes and point alignments. This is not always the case in the design of all fonts, especially less modern designs.
The methods I used in the design process for Trebuchet made it easy for me to also hint the final font file.
After I completed the outlines, I used a method similar to the one described in the next section. The only difference was I also
used two additional professional tools: one an outline conversion tool and the other a TrueType table tool. You can obtain similar results with
the method described below.
Preparing a Font with Fontographer 4.1
In this section, we'll discuss using Macromedia Fontographer 4.1 for the Macintosh to create a TrueType file that can be used with Visual TrueType.
For information about how to draw using Fontographer and more indepth aspects of the program, see the Fontographer User's Manual or an excellent
book "Fontographer: Type by Design" by Stephen Moye, Published by MIS Press (1995) ISBN: 1558284478.
Working with Fontographer, there are several settings and procedures you should be aware of.
Launch Fontographer 4.1. Then from the 'File' menu select 'New Font...' A window is displayed for an Untitled-1 font.
NOTE: The original versions of Fontographer were made to create PostScript fonts. The initial default settings are for a Macintosh PostScript font.
Selecting the 'Element' menu and 'Font Info...' displays the Font Information dialog. Here you can name this font, set the style, encoding, metrics and insert a copyright notice. The name will be used to create a Fontographer file when a new Fontographer file is saved. This name is also used when a font is generated from this Fontographer file for font file names and font format table information. The style is used when creating a family and Fontographer uses this field similarly to the name field. "Font Metrics" set the font units for this font file. Font Metrics (or Units per Em) are by default 1000 and is the standard setting for a PostScript font. In TrueType, for best performance, it is strongly recommended that a TrueType font file be 2048 Units Per Em (UPEM).
Exercise 1: Setting font information and font metrics.
If you have not done so already, select 'New Font...' from the 'File' menu. Then select 'Font Info...' from the 'Element' menu. You should now have the Font Information dialog displayed. Name the font by typing a name (ex: MyFont) in the Name:FamilyName field. The default "Plain" style is set for the Name:Style name field. The field currently appears blank, but by selecting the Style Name pop-up menu, the 'Plain' menu item is already checked and selected. For the Encoding field we will keep the default encoding set to Macintosh. The next fields are the Font metrics fields. We will scale all values in the Font metrics field by 2.048. This sets the font's metrics to be at 2048 units per em. Set the fields as follows:
Ascent = 1638, Descent = 410, Em Square = 2048, Leading = 0, Underline Position = -272, Underline Width = 41. Click the 'OK' button.
You now have a font in 2048 UPEM. Next double-click the 'A' character (decimal # 65). In the 'A' character window, draw an image. If you are familiar with Fontographer and working in 1000 units you will notice the units displayed for point coordinates are approximately twice as large as you might expect. (Actually 2.048 times as large.) Any glyph copied from a 1000 unit font to this file will be automatically scaled to 2048 units.
Exercise 1-1a: Working from your Existing Typefaces
In the next exercise we will open an existing PostScript printer font, scale the font metrics, create a TrueType font with Fontographer and discuss some other TrueType tools.
IMPORTANT: Fonts are copyrighted software. It is a violation of most User License Agreements to make a derivative work from such copyrighted software. Use only fonts, which you have drawn or created and are the property of you or your company.
From the File menu select 'Open Font...' The dialog displays files based on the items checked at the bottom of the dialog. Select one of your PostScript printer fonts. You should now have a window displaying all the glyphs in the PostScript printer font. Next, perform the steps we followed in Exercise 1 to scale the font metrics. Start by selecting 'Font Info...' from the Elements menu. Note that the values for Ascent and Descent when added equal the Em Square. As we did in Exercise 1, scale all values in the Font Metrics by multiplying them by 2.048. Click 'OK' and the font file is now in 2048 units.
It is common for Macintosh PostScript fonts to not contain some symbol characters as outlines. If this is the case with your printer font you should create outlines or use a set of standard symbol characters from your library. Select 'Save' from the 'File' menu to create a Fontographer file.
Before we can output a TrueType font it is advisable to use composite glyphs for glyphs that are built from one or more already existing glyphs. The 'Aacute' is an example that should be made from the uppercase A and the acute diacritic.
To build an 'Aacute' composite glyph with Fontographer:
- Select uppercase A glyph in the main character window.
- From the 'Edit' menu select 'Copy Reference' (cmd-G)
- Select the 'Aacute' character in the main window. Select 'Paste' (cmd-V) from the 'Edit' menu.
- Select the 'acute' diacritic in the main window and select 'Copy Reference' (cmd-G) from the 'Edit' menu.
- Open the 'Aacute' glyph by double clicking on the 'Aacute' in the main window.
- In the 'Aacute' window 'Paste' (cmd-V) the acute glyph.
- Position the diacritic over the base glyph.
I have found the most effective way to create a composite in Fontographer, is to get/paste the base glyph first, then get/paste the diacritic second. This is important when it comes to working in TrueType later in the production process.
You are now ready to generate a TrueType font from the bézier outlines in Fontographer.
Select 'Generate Font Files...' from the File menu. In the 'Generate Font Files' dialog you can choose to select from the 'Easy' dialog items or the 'Advanced' dialog items. In the 'Easy' dialog items you can generate a Macintosh font or a PC font. In this example I use and recommend using the 'Easy' dialog items and generating a Macintosh TrueType font file.
Note: What is the difference between Macintosh and PC fonts? The Macintosh uses two types of file formats: resource files and data files. Fonts on a Macintosh need to be resource files. The basic TrueType font on a Macintosh contains a 'FOND' resource and an 'sfnt' resource. The information in the 'FOND' resource is additional information necessary for the Mac OS. The 'sfnt' is the TrueType font. TrueType data files are used by Visual TrueType and are generated by either creating a PC font in Fontographer or by converting the 'sfnt' resource into a data file. Additionally, the Mac OS uses information on files called 'Finder Information' to identify file types. Fontographer outputs PC TrueType fonts with different 'Finder Information' necessary for Visual TrueType.
The 'Finder Information' should be:
- Type = sfnt
- Creator = 'mdos', 'bass' or 'Bass' are common but not required.
- A creator code is required and must be 4 characters.
You can change the 'Finder Information' with several applications including ResEdit.
Macintosh suitcase and binary data file.
Before generating a font file there are a few additional steps we need to take. The first step is: By selecting 'Computer: Macintosh' Fontographer will generate a Macintosh auto-hinted TrueType font suitcase. Since this is a resource file, Visual TrueType can not open the file. Visual TrueType only opens data files. You will need to use an application that can convert this Macintosh TrueType font resource to a data or PC TrueType font. TrueEdit from Apple Computer is such a program. Apple font tools are available from fonts.apple.com.
The other step with generating a Macintosh font in the 'Easy' mode is a bug that does not generate the 'yacute' and the 'multiply' glyphs. The work around for this problem is the following:
- Open the Element: 'Font Info...' dialog and increase the 'number of characters allowed in font:' by two numbers.
- Then copy and paste the 'yacute' and 'multiply' glyphs to the last two spaces.
- Select the new 'yactue' (one click) and then 'Element: Selection Info...'(cmd-I). In the 'Character Information' dialog, enter 'yacute' in the 'Character name:' field. Then click the 'Set Unicode' button. This should set the 'Unicode' field to $00FD (Note: In Fontographer the dollar sign represents the value is expressed in hexadecimal. Another common method is by using a preceding 0x or x.)
- Click the 'OK' button and you should see an alert dialog. 'There are multiple glyphs with that name. Do you want to swap the names of the two glyphs?' Click OK.
- Now when you output a Macintosh font these glyphs will be generated and placed at the end of the glyph order.
This method places the glyphs in a sensible order. This order is similar to the original recommended order published by Apple Computer in the original TrueType spec. 1.0.
In item 3 above, by setting the 'Character name' and 'Unicode'; hex number we accomplish two things. Fontographer uses this information when writing two tables in a TrueType font file. The 'post' table contains a glyph index and is paired with a PostScript name. The 'Character name' sets the glyph's PostScript name in the 'post' table. The 'Unicode' number is used when writing the Windows version of the 'cmap' (Character Mapping table.) In the Windows 'cmap' the mapping is a glyph index to Unicode number.
You can use this method of adding glyphs and glyph information to create large fonts that cover more than one Windows code page (such as the WGL4 character set.)
Finally once you have output a Macintosh TrueType font suitcase, you can use the tool TrueEdit. TrueEdit will convert a TrueType font suitcase to a TrueType data file that can be used in Visual TrueType or on a PC running Microsoft Windows.
Exercise 1-1b. Creating the Data File for Visual TrueType
Launch TrueEdit. Open the suitcase file from the 'File menu'. Select 'Save as...' the 'Save as...' dialog appears. Change the 'File type' to 'Bass file'. I use different file names and extensions during different stages of the production cycle. When saving 'Myfont.suit' I prefer to rename the file 'MyFont.fog.ttf'.
Note: Bassomatic and .bass were the original names given by Apple computer to some of the early TrueType software. RoyalT was the first TrueType instruction editor and is still available from Apple Computer. As Visual TrueType and RoyalT originally only opened data files of the type 'sfnt'. The name Bassomatic comes from the TV comedy series Saturday Night live. TrueType's original name was Apple Royal. RoyalT was a pun on the word 'royalty.' Royalties were a common font licensing practice at the time.
Using Visual TrueType
Now that we have created a TrueType data file we can now start the hinting process.
In the next sections I will discuss hint preparation. I would suggest reading the text first, then using your .ttf file you created in the previous section, follow the steps to measure and hint your font.
To start off, I've used a sans serif font for the measurements because of its simple design. Then when discussing hinting I use a more common serif example. The hinting structures and philosophies for the serif can be easily transferred to a sans serif design, by not including the hints for the serifs.
The method we used for generating TrueType from Fontographer created a TrueType font file that is already 'hinted.' The hints were automatically generated by Fontographer and are not of the quality of a well hinted font done by a trained Typographic Engineer/Designer. Human intervention is essential in achieving a font that is clean on the screen as well as from a laser printer.
Using Visual TrueType we will remove these automatic hints and replace them with well thought out manual hints specifically designed for the current font.
Exercise 2-1a: Hint preparation.
Launch Visual TrueType. From the 'File' menu select 'Open...' and open your font. By selecting from the menu, 'Views: Character Set' (cmd-9) and with your file preferences set to 'glyph index based' you will see all glyphs in your font.
Next select 'Prepare Font...' from the 'File' menu. In the 'Prepare Font' dialog all boxes should be checked. By clicking 'OK' 'Prepare Font' will remove the auto-generated hints and import three templates to build three important tables. VTT builds a template 'Cvt' table that we can later fill in with more font specific data. The two other tables that are created are the 'Pre-Program' and the 'Font Program'. For an explanation of the 'Cvt', 'prep' and 'fpgm' See the appendix at the end of this document or see this document.
Creating the Control Value Table Entries
Before we can begin hinting individual glyphs we need to organize some data about the entire typeface and the entire family.
In the Trebuchet family I have four fonts. A regular, bold, italic and bold italic. At low resolution, I must keep the x-height, Cap, height, and all other heights constant across the family. I need to keep the color of the regular and italic weights the same and the bold and bold italic the same. I finally need to control the relationship between the bold weights and the regular weight to show their weight difference at all sizes. To control all these conditions there are several methods that can be used. One method is to insure that if the original outlines are similar between fonts that their control values are the same. It is common for the all fonts in the typeface to contain the same major group's height Cvt values. In actual outlines, the stem weights of an italic font are often lighter than the regular font.
NOTE: At printer resolution and high screen resolution, Cvt values will be unused and the original distances will be used.
In cases where there are differences between fonts, a more robust approach could be used. Some TrueType hints use a hinting method referred to in VTT as 'inheritance'. Inheritance uses functions to copy values from a main Cvt to other dependent Cvts. The method is employed for small ppem sizes and is not used above a defined ppem size. We will use a simple method of inheritance later when we discuss the pre-program.
The general procedure is to compile control value information by measuring the outlines in VTT. Then, when all four fonts are measured, compare the data. You may need to average some of the values to make the family cohesive.
Measuring Outline Features
Visual TrueType uses four main character groups when using control values. Uppercase, Lowercase, Figures and Other. Typographically the Other group consists of sub groups, such as math or punctuation glyphs.
In Visual TrueType open the Cvt window from the 'Views: Control values' (cmd-4) menu item. 'Prepare Font' has imported templates for Cvt, Font program, and Pre-program.
The first 28 entries in the Cvt are grouped in pairs. This is a hinting method Visual TrueType uses for modifying heights to keep two values the same at low sizes. In this hinting method the first Cvt value is usually the flat or base value, the second value is the overshoot (distance from the base value.)
Example: In a font I'll call 'MyFont', if Cvt #2 is set to 1465. This is the vertical distance the uppercase glyphs are from the baseline. The next value, Cvt #3 would be 25. This is the distance from the baseline to the top of all round uppercase glyphs, minus the flat glyph's distances. UC round distance = 1490, UC flat distance = 1465. Difference = 25. This is a high level method of TrueType hinting that keeps round glyphs consistent with flat glyphs unit there is enough pixels to display a round overshoot.
How this works...An Uppercase round glyph uses Cvt #3 as its height. Through a function call made from the Pre-Program (/*Modify Double-Specified Heights: */) the function reads in the value from Cvt #2. It then rounds that value from font units to pixels. Next it reads Cvt #3 and rounds that value. Then it adds the two together and finally writes Cvt #3 with that value.
In Visual TrueType we use some high level hinting concepts. Because of this, some Cvts have been reserved for specific uses. It is important to not alter or change of these Cvts or Visual TrueType will not behave as it was intended.
Cvts 0..36 are used for heights, Cvts 40..64 are reserved by the program's compiler and Cvts 65..156 can be used for major group features. Cvts 157 and 158 are reserved for flares and cups and are used by a portion of the Pre-program that will control flares at small sizes. Reserved Cvts should not be removed. User defined Cvts can be added beginning at Cvt #159.
Now we can begin the process of manually measuring individual glyphs.
The first measurements are the vertical (Y) heights for groups of glyphs.
Measuring the Uppercase Top for Overshoot calculations.
The following guidelines can be used for calculating the font heights.
- Cvt#0 is the ASCENDER_HEIGHT and is obtain by measuring the height of the lowercase b, d, h, k, and l.
- Cvt#1 is the overshoot amount for the ascenders. This maybe the lowercase 'f' height if the height is actually taller than the other ascenders.
- Cvt#2 (CAP_HEIGHT) is measured from the baseline to the visual top of the uppercase 'flat' glyphs. Examples are: B, D, E, F, H, I, J, K, L, M, N, P, R, T, U, V, W, X, Y, and Z. The value should be the point where hinting will originate from. Similar to the baseline. This may not be the value at the top most of the glyph.
- Cvt#3 is the top overshoot of the uppercase round glyphs. This value is calculated by using the most common or average value from the uppercase round glyphs (ex: C, G, O, and Q.) Measured from the baseline to the top of the glyph. Subtracting the value by Cvt #2.
- Cvt #4 (FIGURE_HEIGHT) is the value from the baseline to the top of the flat figure glyphs. (ex: 5 ,7)
- Cvt #5 is the figure top overshoot value.
- Cvt #6 (X_HEIGHT) is the lowercase flat top value. Similar to the CAP_HEIGHT, this is not necessarily the top of the lowercase x, but the visual top of the lowercase flat glyphs.
- Cvt #7 is the lowercase top overshoot value.
- Cvt #8 (UC_BASELINE) this value is usually zero.
- Cvt #9 this is the bottom uppercase overshoot. This value is usually negative and the same absolute value as Cvt #3.
- Cvt #10 (LC_BASE_HEIGHT) this value is usually zero.
- Cvt #11 is the bottom lowercase overshoot. This value is usually negative and the same absolute value as Cvt #7.
- Cvt #12 (FIGURE_BASE_HEIGHT) this value is usually zero.
- Cvt #13 is the bottom figure overshoot. This value is usually negative and the same absolute value as Cvt #5.
- Cvt #14 (DESCENDER_HEIGHT) this value is the flat descender value often measured from the lowercase p and q. The lowercase g and j may or may not be the same.
- Cvt #15 is the descender overshoot value. Used if the round descenders (g or j) are lower than the flat descenders.
- Cvt #16 (PARENTHESIS_TOP) is the top of the parenthesis, brackets, and braces. These glyphs are generally aligned to the lowercase ascender value. This value is often the same as Cvt #0.
- Cvt #17 could be used for a design where the one of the pairs of brackets or braces overshoots the parenthesis height. Commonly this value is left as zero.
- Cvt #18 (PARENTHESIS_BOTTOM) this is the bottom of the parenthesis. The value is negative and often the same as Cvt #14.
- Cvt #19 is the overshoot for the parenthesis. If an overshoot is used this value is negative.
- Cvt #20 (SUP_ao_BOTTOM) this value is for the 'a', 'o' ordinals and is often the same as Cvt #24.
- Cvt #21 this is the ordinal's overshoot amount and usually the same as Cvt# 25.
- Cvt #22 (SUP_ao_TOP) this value is for the 'a', 'o' ordinals and is often the same as Cvt #26.
- Cvt #23 this is the ordinal's overshoot amount and usually the same as Cvt# 27
- Cvt #24 (SUP_12_BOTTOM) this is the bottom of the flat superiors (superior one or two.)
- Cvt #25 is the round overshoot value of the superior three.
- Cvt #26 (SUP_12_TOP) this is the flat top of the superior numerals. ( in a full set of superiors the value is the top of the superior 5 and 7.)
- Cvt #27 is the superior top overshoot value.
The Cvts from 28..35 were used by earlier versions of Visual TrueType for serif fonts. These earlier versions used one Cvt entry for only vertical serif distances. Then a function for hinting the horizontal direction of a serif.
The method I describe for hinting serifs requires Cvt entries for the horizontal direction as well as the vertical direction. I've predefined Cvts for X and Y serif distances in each main glyph group. I measure serifs usually by measuring horizontally from the right side of the main stem to the right extreme of the right serif, from the left side to the left extreme of the left serif. Vertically from the glyphs base to the top most extreme of the serif.
Measuring the left outside serif.
The last Cvt in this section is number 36. This Cvt is used by a high level function for italic strokes. In upright fonts this value is '0'. Later when we measure the italic fonts I will explain how this is measured.
In italic fonts this value is the horizontal distance from the left extreme of an uppercase stroke to the uppercase flat height. In mathematics, this distance is the 'run', hence the comment '/*ITALIC_RUN*/.' The uppercase flat height would be mathematically called the 'rise'.
Regularizing actual distances to create a consistent Cvt table.
When you have measured the distances for the Cvt values, the actual common or average values need to be coordinated for the entire font.
In MyFont, Cvt# 3 ,5 ,7 ,9 ,11 , and 13 are overshoot values. (The difference between the round height and the flat heights.) The measurements of actual overshoot distances in MyFont produced:
Cvt #3=27, #5=21, #7=21, #9=-25, #11=-20, and #13=-20.
It is a matter of personal preference as to how much you would like to regularize your values. I find it easier, cleaner and a fundamental job of 'hinting' to regularize as much as possible.
If we were to leave Cvt # 7 (lowercase top round) as 21 units and Cvt #11 as 20 units (lowercase bottom round) the tops of the lowercase would be greater than the bottom at least at one size.
In MyFont the difference between the largest value in a groups overshoot and the smallest is very small. Comparing the three most important character groups, (Uppercase, Lowercase, and Figures) the Uppercase average is 26 units, the lowercase is 20.5 units, and the figures are 20.
The values I used for the uppercase overshoot are 25 units, for lowercase and figures I used 20. The difference of 5 units is not a great difference but at medium resolution this is a significant amount for this font.
Note: Between character groups, values of 5 or greater units should be considered large enough to make different from other values. Within a character group and on a major feature such as an uppercase stem distance, a larger value (~10 units) should be considered.
Now that we have looked at the height values we can compile the information for MyFont.
- 1509 /* ASCENDER_HEIGHT */
- 1465 /* CAP_HEIGHT */
- 1465 /* FIGURE_HEIGHT */
- 1071 /* X_HEIGHT */
- /* UC_BASE_HEIGHT */
- /* LC_BASE_HEIGHT */
- /* FIGURE_BASE_HEIGHT */
- -420 /* DESCENDER_HEIGHT */
- 1465 /* PARENTHESIS_TOP
- -420 /* PARENTHESIS_BOTTOM */
- 595 /* SUPERIOR_ao_BOTTOM */
- 1480 /* SUPERIOR_ao_TOP */
- 595 /* SUPERIOR_12-BOTTOM */
- 1480 /* SUPERIOR_12_TOP
When measuring the top of the uppercase and figure heights, I found the round glyphs such as the 'O' and the 'zero' were at the same height values. But the flat glyphs, the 'H' and the '5' were different slightly. The 'H' was 1464 units and the '5' was 1470 units. This is a discrepancy that may or may not have been intended in the original design. If I were to leave the CAP_HEIGHT as 1464 and the FIGURE_HEIGHT at 1470 then the figures would be one pixel taller at some sizes and the round figures would be force to be too tall by the hints. I decided the figures and uppercase should be made the same. I rounded the CAP_HEIGHT up to 1465 and brought the FIGURE_HEIGHT down by 5 to 1465. Then with the 25-unit overshoot these groups will align at low sizes. This type of discrepancy is common and this is a good example of the kind of decisions involved in hinting outlines. Other values, which may not be clear, are Cvt #22 and 26. In this font there are no flat superiors to measure. The value was calculated by subtracting the superior overshoot in Cvt#25 from the measured top of the superior three.
Measuring Stems and Strokes
The last major measurements we need to take for the Cvt is the groups' stem distances. These distances are commonly:
Straight features, Round features, Diagonal distances and Serif distances. These can be further divided into horizontal (X) and Vertical (Y), uppercase, lowercase, figures, punctuation, superior figures, math and possibly many others.
The Cvt template that was imported by 'Prepare Font' contains some common predefined Cvt values for a Latin font. Descriptions of the use of each predefined Cvt are noted in the comments to the left of the Cvt and hex Cvt Attribute numbers.
We will measure the font distance in character groups, Uppercase, lowercase, figures, other, punctuation, superiors, math and diacritics.
Starting with uppercase in the horizontal or 'x' direction we will measure the uppercase H left and right stem. This is the UC, X, Straight or stem distance. Continue measuring other uppercase stems and note their distance. Next measure the round uppercase glyphs (B, C, D, G, O, P, Q, R, S.) Note their values. Measure diagonal glyphs (K, M, N, R, V, W, X, Y, Z.). Measure diagonal strokes in horizontally perpendicular to the baseline (as you would a straight stroke.)
In serif fonts measure the horizontal serif length from the uppercase stem out to the most extreme point on the serif. Two Cvt are predefined, one for the shorter distance and one for a longer distance. If all serif lengths are approximately the same, use only on value.
Uppercase H left stem measurement.
The next group of Cvts are for vertical or 'y' distances. Measure straight stem distances. Measure round 'y' distance, diagonal and serif. The 'y' serif distance is often measured up from a point on the baseline to the top of a serif and from the CAP_HEIGHT to the bottom of a serif.
Do the same for lowercase and figures. In the lowercase Cvt group, Cvts are predefined for the i,j dot distances. The X distance is the horizontal dot distance, the first Y distance is the vertical dot distance and the second Y distance is the white space from the top of the i/j to the bottom of the dot.
Continue and measure distances as defined by the template's comments. For straight or round features there is an alternate Cvt. This will be used if there are two major distances. Initially only one measurement is needed.
Now that we have measured all major glyph distances, we can create some actual Cvt values. The value used should be the most common distance, similar to but not necessarily the mathematical average. When creating this Cvt value the distance for a group's feature may be very similar or may contain two main distances. If this is the case, it may be necessary to divide the distances into two or more groups. A simple example is if a font has serifs of two basic lengths there are two Cvts used, one for the shorter distance and one for the longer distance. A distance of 25 font units is a large enough distance to require a new Cvt, but there is no 'golden rule' in preparing a Cvt. Specific decisions need to be made on a per typeface basis.
In MyFont the distance measurements for the uppercase main glyphs are:
B = 200/211/198
C = 211
D = 200/209
E = 200
F = 200
G = 201/211
H = 200
I = 201
J = 198
K = 200
L = 200
N = 190
O = 210/211
P = 200/207
Q = 210/211
R = 200/211
S = 201/200
T = 201
U = 200/199
If we were to use the mathematical average for the uppercase x_straight distances the value would be 199. But looking at the values the most common value is 200. Generally it is best and easiest to use the most common and rounded value. Looking at the x_rounds values, 210 would be a good common, rounded value. You should note the uppercase N and S deviate from their group's main distance a considerable amount of 10 units. It is up to your discretion to use the larger common value or another closer value for a glyph such as the uppercase N. At this stage there are not enough features that deviate in this font to warrant an additional Cvt. When hinting a glyph such as the uppercase S, you may decide it is best to use the smaller straight value instead of the larger round value. In this font I would use the common, larger value for these glyphs since the difference is not that great, I want to keep these features the same at small sizes and actual distances will eventually be used at the larger printout sizes.
After you have measured and decided the value for each pre-defined Cvt from the Cvt template, fill the values in the appropriate Cvt. Once you have completed filling in the values compile the Cvt table by selecting 'Compile: Compile Selected Window...'
With experience measuring distances to build a Cvt will be much clearer when you know how you will use these Cvts for hinting. Always keep in mind and as you hint more glyphs in the font, you could add local glyph distances. Add these if two or more features need to be kept the same pixel size. If a feature only appears once on a glyph, consider this a unique feature and a control value is not needed.
Before we can hint we need to fill in three additional Cvts that are used in a more global manner. Cvts 65, 66, and 67 are font wide inheritance Cvts. Inheritance is used to globally control stem thickness by using one main Cvt for many Cvts. Cvt 65 is the main Cvt and will be used to keep all stems at one pixel. Cvt 66 is used for controlling the X direction above this one pixel size. Cvt 67 is used to control the Y direction independently from the X direction above the one pixel size. Then at larger sizes, approximately 30PPEM and above we use more specific group Cvts.
The general method of selecting values for these control values is:
Use the thinnest stem distance from the Cvt 65. Commonly the lowercase 'o' Y distance is used. This is the distance that is meant to be one pixel. This will force larger distances to stay at one pixel till we want to break away from this type of control. In MyFont the value for Cvt 65 is the same as Cvt 72, lowercase, Y, straight.
For Cvt 66, the X direction, I use the dominant X distance. This is often the uppercase stem. If that appears to heavy of a stem to use as a dominant control value another common Cvt could be the lowercase X stem Cvt.
Cvt 67 is used for the Y direction and is often the same as Cvt 65 and the lowercase Y distance.
Fill out Cvts 65, 66, and 67. Compile the Cvt window.
Without inheritance round stems are heavier than straight stems at small sizes.
Most distance Cvts have a hexadecimal numeral and comment to the right of the Cvt number and Cvt value. The hexadecimal number is call a 'Cvt Attribute'. The Cvt Attribute helps the VTT compiler select an appropriate Cvt.
You can view the Cvt Attribute by selecting the hexadecimal number in the Cvt. Then from the 'Edit' menu 'select Edit Cvt Attribute...' Example: The number 0x1241 attribute is a lowercase, black color, X direction, stroke.
When links are made on a lowercase glyph, with the settings, straight stroke and use a Cvt, the compiler would use a Cvt with this Cvt Attribute. The Cvt Attributes have been set in the Cvt template and can be changed by using this 'Edit Cvt Attribute...' dialog.
Select various Cvt Attributes and notice the settings and how they relate to the comment for the Cvt.
Hinting and Cvt Attributes
Here we are going to see how these Cvt Attributes are used. In the Main Window of VTT we will enter a hint that should select an appropriate Cvt.
In a text font that has been measured and a Cvt created, display the uppercase O. (for this exercise. If you don't have a fully filled out Cvt you can use Prepare Font and add Cvt values for the uppercase X straight Cvt #68 and X round Cvt #70.)
From the 'Visual TrueType' menu, enable the menu item 'Show X Direction'.
The menu item, 'Show Y Direction' should be unselected.
Items 'Gridfit' and 'Pixels' from the 'Display' menu should be unselected.
Select 'Show Fewer Points' from the 'Display' menu.
In the Hinting Tool Icon bar, X direction tools should be enabled. Select the Xlink tool.
From the left most curve of the uppercase O, drag the Xlink tool to the other inner most point.
Shift-click on the arrowhead. Select the round, Cvt, minimum distance tool from the pop-up menu.
You should see Cvt #70 displayed in the Cvt Xlink symbol. Shift-Click on the symbol and a Cvt pop-up will appear showing Cvt 70 with an attribute of (UpperCase Black X Round.) Link from the right most outside of the uppercase O and the round Xlink Cvt tool should remain as the default and Cvt #70 should also be automatically selected.
The VTT compiler used the attribute to select Cvt 70. The compiler also used the glyph's group data of UPPERCASE. Imported when we ran 'Prepare Font', from the character group data file (CharGrp.txt.) This group data appears in the top of every glyph's main window.
Next shift-click on the arrowhead and change one of the Xlinks to a stroke/with Cvt. The Cvt displayed should have changed to 68 and the arrow will change to a square icon. This shows how the compiler uses the type of Xlink to select the appropriate type of stroke. Next change the arrow again to a distance/with Cvt arrow (pointed arrowhead.) The Cvt icon should contain a question mark indicating the compiler couldn't find an appropriate Cvt for this link. If we had defined a Cvt with a Cvt Attribute of uppercase, Black, X, distance, the compiler would have chosen that Cvt.
With a fully filled out Cvt, display the lowercase o in the main window. Again, select the Xlink tool and link across the left round stroke of the o. Select the round arrowhead by Shift-click on the arrowhead. Change the arrow to round/with Cvt. Cvt 83 should be selected. Change the arrowhead to a stroke/straight/with Cvt and Cvt 81 should be selected. And finally, select the distance arrow/with Cvt. Unlike the uppercase where no Cvt was selected, Cvt 94 was selected. Cvt 94 is the distance on the lowercase i,j dot, and has an attribute of X lowercase black distance. It was selected since this is the only Cvt with the correct attributes for the Xlink we used. If there are two Cvts with the same attributes, the compiler will pick the Cvt whose value is closest to the actual distance between the two points in the link.
When hinting for the typeface family, It is usually best to start with the regular or normal upright weight. Decisions made for stem thickness, overshoots and font heights are most critical to the normal upright weight. All other weights and styles should be based on the decisions made for the normal font. Common decisions are, when will the stems turn from one pixel to two pixels. If the stems are two pixels too early for the normal weight it may be difficult to hint the bold font so it appears bold. It would also be confusing for the user if a normal weight font is too bold at a small size such as 12 point.
We will begin hinting by starting with the most important glyphs in the normal weight font, the control characters. The control characters are the characters used for spacing all others in the font and for deciding stem thickness' and breakpoints. In the uppercase group the control characters most commonly used are the uppercase O for a round control character and the uppercase H or uppercase I for a straight control character and uppercase V for diagonals. All uppercase glyphs are spaced between both round and straight control characters. In the lowercase the 'o' is used for the round and the 'n' is used for the straight and the lowercase 'v' for diagonals. Figures are spaced between the zero.
I start by hinting the control characters in the main three groups, uppercase, lowercase, and figures. When those are complete, I then decide how to control when stems break and how each group works with the other groups. After weight is decided, I then start hinting the rest of the glyphs in the main three groups. When all main group's glyphs have the main hints. I move on to spacing. I space the three main group's glyphs to a finished quality.
Then I move on to the remainder of the font. All other glyphs are spaced between the glyphs they are most commonly used with. For example, spacing math signs we use the zeros. Punctuation such as the quotes or parentheses, use a combination of lowercase control characters, other lowercase ascender characters and/or uppercase characters. The 'T' is useful for spacing the ©, ®, and 'trademark' because it is usually the first glyph that would hit on the right side during spacing.
When beginning hinting, first put the hint structure for the glyph so that it will control the majority of sizes as best as possible. Then after you have hinted the main control characters, look more specific to each PPEM size pixel shape and spacing at each PPEM size. This specific hinting for specific sizes is done with changes to the main hints or by adding exceptions with Delta hints.
Hinting the first glyph
I will use a serif text font of regular weight in the hinting example. This is a simple common design and shows the use of serifs. Hinting a sans serif font is similar, minus the links for the serifs. We'll begin hinting with the uppercase, starting with the 'O'.
The first thing to do is to control the vertical direction. We'll begin by controlling the heights. In VTT with the uppercase O in the main window, show the Y direction, turn off the X direction from the 'Visual TrueType' menu. Turn off gridfitting and pixels and select Show Fewer Points from the 'Display' menu. Select the Ylink tool from the tool bar. Shift-click on the top most point of the O, then select the round to grid icon. You should see an empty Cvt icon with an anchor symbol on the point you have selected. Shift-Click the Cvt icon and select Cvt #3 (UC, top, overshoot). Next select the bottom most point and to the same as you have done to the top, except this time select Cvt #9 (UC, bottom, undershoot). Compile these hints by selecting 'Compile this Window' (cmd-R) from the 'Compile' menu. Next we will control the top and bottom round stroke with a link and Cvt. With the Ylink tool still selected, click and drag from the bottom most point to the inner most point defining the round stroke. Shift-Click on the arrowhead and select a round stroke, with Cvt and minimum distance. Cvt # 74 should have been automatically selected. Use the same steps for controlling the top round stroke by linking from the top most point to the inner most point defining the top round stroke. Cvt #74 should also have been automatically selected. Compile the hints.
Now we will add the hints for the horizontal direction. Turn off 'Show Y Direction' and turn on 'Show X Direction'. Before we can begin hinting the X direction, we must decide what hint strategy we will take. The strategy will effect spacing and the width of the bitmaps generated by the hints. We have several choices. Let's try hinting with each one to see how it changes the image.
The first method of hinting the uppercase O
The first method is using the sidebearing points to link in to the main glyph from both sides. This will keep the glyph from expanding outside the advance width and control spacing most effectively. The problem with this method is, the glyphs will be compressed or expanded as the advance width compresses or expands. Any rounding of values will effect the width of the bitmap. This method is most effective if the font is wide or expanded in style.
Start by selecting the Xlink tool from the toolbar. Link from the left sidebearing point to the left most portion of the O. Shift-Click on the arrowhead and change it to a distance, with no Cvt, and don't maintain minimum distance. This will not force a pixel of white when the distance is too small. Now link across the left round stroke and change the arrowhead to round, Cvt, and maintain minimum distance. Cvt #70 should be chosen. Link from the right sidebearing to the left most of the O. Change the arrowhead to a distance, no Cvt, and don't maintain minimum distance. Link from the right most point on the glyph to the inner most right point defining the right X round stroke. Change the arrowhead to a round, Cvt, and maintain minimum distance. Cvt#70 should be chosen. Compile the hints.
Turn on 'Gridfit', 'Pixels, Show size run' and 'Show text string' from the 'Display' menu. Notice when you turn off and on gridfit how the pixel pattern changes. Now from the 'Size' menu select '9pt'. Using the up arrow key move up in point sizes and pay special attention to the relationship between the outside of the bitmap and the right and left sidebearing points. When the sidebearing points and the outside of the bitmap are in the same X location, there is no white space between that side and the next character's origin point. Reset the size to 9pt or a lower size so there is no white space on either side of the glyph. Notice how in the Text string on top, the repeated uppercase O is touching. This is considered bad spacing. Select the Xlink tool. Shift-Click on the arrowhead for right sidebearing link and change its properties to distance, no Cvt and maintain minimum distance. The bitmap should compression one pixel and the text string should now not crash together when the uppercase O is repeated.
The second method of hinting the uppercase O
A second method is to link from the right and across the glyph to the left. This method will push all bitmaps to the left if any rounding causes values to increase. It is advisable to have bitmaps pull to left if there is a choice of pulling left or right. In most applications a blinking cursor will overlap the end of the last character typed. If a bitmap is pulling to the right in its cell, the blinking cursor will eliminate the right portion of the bitmap. The user would find it difficult to read those characters when they are typing.
The third method of hinting the uppercase O
The third method is to link from the left sidebearing and across the glyph to the right. As with the previous method this will have the tendency to push the bitmaps to the right.
The fourth method of hinting the uppercase O
A fourth method is to not use the sidebearings but just hint starting from a starting point on the glyph. This is the least forceful method that will have the effect of rounding a start point and that start point will control the origin of the bitmap. This is most useful when a font has plenty of sidebearing space. The method also would require some manual exceptions to the spacing at some sizes. But this is a good method of maintaining the original position of the glyph.
I have decided for this current font, I will use the first method of hinting I described above. Hinting from the sidebearings with the initial hint on the right side maintaining minimum distance.
I will continue to use this method for all other glyphs. This will maintain some type of consistency across the entire font. I may need to make exceptions for specific glyphs and specific sizes.
After putting the initial hints on the uppercase O, select the uppercase H. We will return to the O later.
As we did for the uppercase O, set the Y direction in the main window, turn off the X, then turn off pixels and gridfitting.
Note: it is not a requirement in Visual TrueType to hint one direction first before hinting the other. You may find it more intuitive to start hinting in the X direction.
Select the Ylink tool from the toolbar. Shift click on the bottom of the H in the Y direction and select 'round to grid' from the floating palette. Next shift click on the Cvt sign and select Cvt 8 for UC_BASE_HEIGHT. Repeat these steps for the other side of the stem. Next shift-click on the top of the H and repeat the previous steps, but this time select Cvt #2 for CAP_HEIGHT.
The next series of links will start off these points and will control the serifs. Link up from the base point (Cvt 8) and link across the serif on the left side. Do the same for the right side starting from this same base point.
Note: We do not need to touch all points when hinting. If two points are at the same position and make an unbroken straight line, we can use either point for hinting and the other point will travel with the hinted point. Because when the hints are compiled, an instruction called 'Interpolate Unused Points' keeps these two points moving together.
Link from the top CAP_HEIGHT point across to the other side of the serif on the left side. Then do the same for the right side. In all serif links Cvt 80 should have been chosen. If not, Shift click on the Cvt sign and change the Cvt to the one you have set for UC, Y serifs. When linking tight areas it may be necessary to zoom in to select or link to points.
The final two links in the Y direction will control the bar on the H. Select the YInterpolate tool from the toolbar. Like from the top of the serif link to the serif link at the top of the glyph. Next stretch the interpolation to the bottom of the bar. Now select the Ylink tool from the toolbar and selected link to the top of the bar. Shift-click on the arrowhead and change the arrow to a stroke. Cvt 72 or a Cvt appropriate for this bar should be chosen.
You may now have a few questions.
Why did we link from the top of the serifs to control the bar?
Linking from the top of the serifs will keep the position of the bar relative to how the serifs expand or contract. The other method could have been use from baseline point and the top of the cap height point as parents for the bar. Either method is acceptable. You can try either method and pick the best method based on the pixel pattern you see. When changing the links make sure you select the base point link and not a point that hasn't been used. If you do you will create a new start point.
We also could have not interpolated the bar at all. Another method could have been to shift-click on a point at the bottom of the bar, round that point to grid, then link up to the top of the bar from there. This would make the bar have no relation to the other hinted points. The bar would round to a location close to its original outline coordinate. The effect would be that the bar would sometimes be high and sometimes be low and generally its position would be inconsistent.
Why did we interpolate and round the bottom point and not the top point on the bar?
If we use the top point as the child point in the interpolation, the bar would have a tendency to round down and may cause the bar to be low. It is better visually for the bar to be high as opposed to low, so I use the bottom point and if the bar can not be centered it will be pushed up.
Compile the Y direction hints.
Now turn off the Y direction and turn on the X direction.
We are going to continue hinting the X direction in the same manner we hinted the uppercase O, hinting from the sidebearings. Select the Xlink tool from the toolbar. Link from the right sidebearing point to the right outside of the stem. Shift-click on the arrowhead and change it to distance, no Cvt and maintain minimum distance. Link from the left sidebearing to the outside of the left stem. This link will have the same settings as the right sidebearing link. (the links remain at the last setting.) Now Xlink from the left side of the left stem to the other side that defines the left stem bottom. Shift-click on the arrowhead and select the stroke, Cvt, minimum distance arrowhead. Cvt 68 should be auto-selected. Now do the same to the right side stroke. Select the point you just linked to and link up to the point that is at the same location in the X direction and is on the other side of the H bar. Shift-click on the arrowhead and change the settings to directon, don't maintain minimum distance and no Cvt. This will keep the top of the stem equal with the bottom of the stem. This link is necessary since the outline does not continue up to the stem as it would for an uppercase I. Do the same for the other side's stroke. Now we are going to control the serif's length from the left and right stems. Link from the left side of the left stem and out to the top serif. Cvt 78 or 79 should have been selected. Link out to the bottom serif and you should have the same Cvt selected.
If at any time a Cvt is not selected (?) then select the proper Cvt you have defined in your Cvt table. A Cvt is not selected when one of the attributes of the current link does not match any of the attributes defined in the Cvt table. Xlinks for the inside top serif link may cross over the outline defining the bar of the H. This type of link would be a gray and no Cvt will be found. The Cvt for serifs have attributes whose colour is white. It is possible to define Cvts for serifs that are black, white or gray. I find this repetitive. I just simply manually choose the correct Cvt.
Link from the other Xlink that defines this left stem to the top serif length. You may have to manually select the Cvt. Xlink across for the bottom serif. Do the same for the serifs on the right stem. Compile the hints.
Next we'll hint the main diagonal glyph. Select the uppercase 'V'.
Hinting diagonals are considered one of the toughest images to control. For the uppercase 'V' in MyFont will use a Visual TrueType link called the 'stroke'. The stroke is a high level hinting instruction that moves points in both the horizontal and vertical direction. The basic concept of a stroke hint consists of two pairs of points that make up the diagonal stroke. The pairs are the points across the bottom of the stroke and the second pair is across the top of the stroke. Similar to an Xlink across a straight stroke, but with a link for the bottom and the top.
For hinting the 'V' enable the X and Y directions. (You need to enable both directions because the diagonal stroke works in both X and Y.) Drag across the left stroke from the bottom outside point to the inner point at the crotch of the 'V'. Then drag across the top of the stroke from the last on curve point along the straight portion of the outline, to the other side to an on curve point which is the last point on the straight portion of the diagonal's outline. The diagonal stroke link should have selected Cvt 76 automatically. If not select the Cvt for the uppercase diagonal stroke. Now for the other diagonal start from the inner crotch point (which will be controlled by the first stroke) and link across to the lower outside point across the diagonal. Then link across the top of the stroke to the other side's last point along the outline's diagonal. The Cvt selected should be the uppercase diagonal Cvt or the Cvt for the smaller uppercase X diagonal Cvt.
Now select the Xshift tool and link to the serif from the left diagonal point (that has been controlled by the diagonal stroke) to the serif end. Shift-click on the serif point you have linked to and select round to grid.
The reason we used an Xshift instead of an Xlink is because on this diagonal we are linking from a diagonal stroke. All the diagonal stroke's points will not be put exactly on grid boundaries. If we use an Xlink from one of these points not on a grid boundary, the point we link to will be rounded to a position similarly off the grid boundary. This is true even if we use the link setting of round to grid. (What we call 'round to grid' is more truthfully a round the distance setting.) This would cause unwanted results at higher resolution when gray scale is applied.
Xshift and round the distance the same for the inside of the stroke and the other right diagonal. And lastly X shift the point at the extrema at the center of the bracketed serif and round this to grid. Now turn off the X direction. And begin hinting the Y direction.
X direction of the Uppercase V
Shift-click on the bottom point and select round to grid and the Cvt for either the uppercase baseline or overshoot. In my case I use the overshoot Cvt 9. Ylink up to the point defining the crotch, with a distance, no Cvt and maintain minimum distance link. Shift-click on the top right point and select round to grid and Cvt 2. Do the same for the left side. YLink to both side of the serif and select the 'Y' serif Cvt 80. Do this for both sides.
Finally we need to interpolate the points in the Y direction that were used in the Stroke command. This not necessary but highly advised since it will create a much smoother pixel pattern. In the Y direction, with the Y interpolate tool, select the top point we used to anchor the top of the V to Cvt 2 and the bottom point we anchored to Cvt 9. These are the parents of the Y interpolation. For the points to be interpolated (or child points) select the points on both strokes that were used in the stroke command and are between the parent points. We do not need to interpolate the point that is at the same Y location as the bottom parent point of our interpolation.
Compile the hints.
Y direction of the Uppercase V
Now we have hints on all three major glyphs in the uppercase, we will start hinting the lowercase and the figure's main glyphs. Select the lowercase 'o' and use the same hint structure as we used for the Uppercase 'o'. This time lowercase Cvt values should be selected. After compiling the hints for the 'o' move to the lowercase 'n'. In the X direction link inward as we did on the other glyphs and link across the left stem. Link up to the point across the intersection of the top transition from the inside Xlink point. This is similar to the link we used on the uppercase H to control the top of either stem. Link into the right side from the sidebearing and then across the right stem. Now control the serifs from the left and right side stems. Use the Cvt for the lowercase X serif, Cvt 91 and/or 92. Compile the hints.
Select the Y direction and have the X direction off. Shift-click to round the top and bottom portions of the n as we did with others. Select the lowercase baseline Cvt 10 for the bottom points and Cvt 7 for the top round point and if the left stem's top is on the x-height select Cvt 6. (If the top of the left stem is not aligning to either the round or x-height you could link to it from the round top portion.) Use Ylinks with serif Cvt (93) for the bottom serifs, as we did previously for the uppercase. Ylink across from the round top portion to the inner point that defines the top stroke. Ylink from the top of the round, to the top of the stroke that intersects the left stem. Here will maintain minimum distance for this point and use no Cvt. Ylink across the stem to the other side. Select a Cvt that is for an alternate or secondary feature. I have defined Cvt 85 as a thin alternate straight stroke. I will use this same Cvt for the lowercase h, m, b, d, q, and r. Next we'll control the top left serif. Here I have an extrema at the inside of the serif. I want to round extremas to the grid in most cases. These extremas are the points that are at the peak of an arch or straight stroke. The stem points we selected for the uppercase H in the X direction were extremas. Here in the Y direction point 15 is an extrema. This point should be used as a reference point for the other surrounding points. Ylink down from the top of the serif point, which we used previously and rounded to the x-height, to the extrema point 15. Use a distance, Cvt and maintain minimum distance link.
This is the first instance where we did not define a Cvt for a feature that should be used in other glyphs. The top serif feature is repeated in several glyphs and we should control them in exactly the same manner.
Detail of the top of the lowercase n
Stop here. We should use a Cvt for the link from the top of the serif to the extrema point 15. This feature is repeated in other glyphs (b, d, h, I, j, k, l, m, p, and r.) Since we did not see this when we were creating the Cvt we can add this new Cvt at number 157. (157 is the next available Cvt.) Measure the distance in Y from the top of the serif to the extrema in all the glyphs. Find a good average and create the new Cvt entry for Cvt 157.
To create a new Cvt. Open the Cvt window. Type the new Cvt number (157) followed by a colon. Add a few spaces then type the Cvt value. After the value you can add a Cvt attribute. By typing 'zero' and 'x' Visual TrueType will interpret this as a Cvt attribute. Highlight the '0x' then from the 'Edit' menu select the 'Edit Cvt attributes...' menu item. Set the attributes for this Cvt.
After compiling the Cvt window, we can resume hinting. Shift-Click on the Cvt symbol and select the new Cvt 157.
Link across to point 17 with a distance, no Cvt and don't maintain minimum distance. Link up to point 18 and use a distance, Cvt (93) and maintain minimum distance. Compile the hints for the lowercase n.
Now hint the lowercase 'v' as we did the uppercase 'V' using the lowercase Cvts.
Move on to the final main glyph group, the figures. Open the figure zero and hint this in the same manner as we did for the uppercase O and lowercase o, using figure Cvt values. Hint next the figure 1. The hinting structure for the 1 is similar to the left side of the lowercase n but without the break from the left transitional stroke. You can also use the Cvt 157 for the top serif Y distance. Once you have completed the zero and one I will move on to the next section, which is making the groups work together and controlling stem thickness.
Controlling stem thickness, breakpoints and making the font consistent
We only hinted three glyphs in the uppercase and lowercase and two in the figures groups so we could compare all major features before hinting the rest of the glyphs. Here we will be concerned with breakpoints and stem thickness. The items to look for and questions to ask are:
Do the uppercase, lowercase and figures break evenly from one pixel to two, etc. If the uppercase breaks before the others, for example, this would be a visual problem.
At what PPEM do the stems go from one pixel to two? If it is too soon (15PPEM) the font will appear bold when it is actually lighter weight. 20PPEM is a good time for most regular weight fonts to turn to two pixels.
When is it visually acceptable to have the rounds be heavier than the straight stems?
When do the overshoots appear? Are they always larger than flats once they first appear? Are they consistent between groups? Should they be or is it ok for the Uppercase to act differently than the lowercase?
Look at the font with gridfitting turned on and the text and size run displays on. In the 'File' menu select the 'Preferences...' menu item. In the dialog, type sample text in the 'Extra Text' dialog field, using the O, H, V, o ,v ,n, 0, and 1. Starting at 9PPEM look at the thickness of all glyphs in the text string. Do not be concerned with odd pixel patterns, here we are only concerned with thickness and breakpoints.
In MyFont the stems are turning to two pixels at 17PPEM. This is controlled by a section of the Pre-program using Cvt inheritance set for below 17PPEM.
The Pre-program was imported when we ran Prepare Font. The inheritance portion will use main Cvt for other Cvts to make them all the same distance until a specified size. This is how we are controlling all to be the same till 17PPEM. We can alter the thickness of all stems in the font by changing this main Cvt value or by using exceptions called Delta hints that will expand or reduce this main Cvts value at specific sizes. To find the inheritance section, Select 'Pre-program' (cmd-3) from the 'Views' menu. In the Pre-program window select 'Find' (cmd-F) from the 'Edit' menu. Search for the words 'use of inheritance.'
You should see a description of inheritance that is followed by a comment for inserting DeltaC instructions (see TrueType spec for the syntax on Delta hint instructions) to alter the main Cvt 65. After that comment are two function calls to function 31 in the 'fpgm' table.
CALL, 66, 65, 8, 31
The first function call copies the value from Cvt 65 into Cvt 66 till 8PPEM. This '8' should be changed to the PPEM size you want the stems to break to two pixels. I would suggest starting at 17PPEM.
In the template Pre-program, the third value from the left in these function calls is set to 8PPEM. This value should be changed to a higher value for inheritance to invoked.
CALL, 67, 65, 8, 31
The second function call copies Cvt 65 to Cvt 66 till 8PPEM.
This is the first use of inheritance in the Pre-program. Here we are starting the process that will keep all stems one pixel till a size we want them to turn to two.
We finish the process with the next list of function calls for each group and the groups Cvts.
The first group of function calls are for the uppercase. The first section of calls in the uppercase group is for copying the X main Cvt66 to the other X uppercase Cvts till a specified size
CALL, 68, 66, 8, 3
From 0..16PPEM Cvt 66's value is the same as Cvt 65. Therefore copying Cvt 66 into Cvts 68, 69, 70, 71, 76, and 77 will make them the same as 65.
Above 16PPEM Cvt 66 is no longer equal to Cvt 65 but all the other X UC Cvts remain set equal to 66.
Then above 31PPEM all the X UC Cvts are now back to their set values. This has the effect of keeping all stems in all groups the same below 17PPEM and all X distances in all groups the same between 17 and 30PPEM.
The next section controls the Y Cvts and copies Cvt 67, the Y main Cvt to all uppercase Y Cvts. Above 16PPEM all Y stems use their own set values. These threshold values should be tailored to each individual font.
To recap the weight control by using inheritance:
We first hint the control characters in the main groups.
View the font and decide at what PPEM the stems will remain one pixel.
Set the inheritance PPEM value in the first function call in the Pre-program from the default 8 to the value the font will turn to two pixels. The value is often 17PPEM.
Decide at what PPEM size the groups can use there own Cvts and not the main directional X or Y Cvt. Usually the X direction needs to be controlled to a higher PPEM size than the Y.
Making Exceptions to the Hints with Deltas and Spacing
Now that we have set the inheritance values in the Pre-program to control the weights we can now finalize the main portion of our font.
Begin with the uppercase control characters O, H, and V. For most text fonts, cleaning up hinting can begin at 9PPEM. If we have a good solid set of hints our glyphs should be finished for larger sizes above the 28PPEM. More ornate designs may require some refinement at larger sizes than the more common text designs.
All fonts no matter how intelligent the hints usually need some type of conditional statement to control hints differently at one size than at another. In TrueType, Delta hints are used to make these exceptions.
Start by selecting the uppercase O. Select 9PPEM. That is the smallest size we will likely be able to make the screen bitmaps clean. In my serif font the main hints are maintaining one pixel on the right. My inheritance settings are insuring the stems are all one pixel and luckily the bitmap pattern is symmetrical. The O is pulling left in its cell. At this low resolution, this is a good bitmap. The width is faithful to the scaled original width (not manually altered) and there is a pixel of white so it will not crash when it is repeated.
I then will select the uppercase H to check to see if this is also pulling left or if it is centering. If one control character pulls one way and the other centers then there is a spacing problem. In the uppercase H there is zero sidebearings from the end of the serifs. Visually it centers. I need to decide if I want to shift the right portion of the H over one pixel or shift the left of the O over one pixel. I can shift these sections by using the Visual TrueType XDelta tool.
To test which looks visually better, select the O in the main window, and then select the XDelta tool from the toolbar. Shift-click on the left point which has an Xlink from the left sidebearing and a pop-up dialog appears. Drag the cursor to the +1 value on the pop-up Delta ruler. The glyph and bitmap should compress one pixel. With the text string displayed at the top of the window, you can compare the UC H and the UC O. Now the spacing in the lower string of text should center. If you find the UC O to appear too condensed then reverse the process for adding the XDelta. Shift-click on the point and return the Delta ruler to the value of zero. This removed the XDelta and returns the glyph's bitmap to the original position.
Next select the uppercase H. Use the same XDelta process. But this time move the point with the Xlink from the right sidebearing, we can compress the uppercase H and space it like the uppercase O. Look in the text string again and see if visually the H is now too compressed for the font. Decide which image you would be most happy with, the O or the H. Before we can finalize our decision, we should look at the way other like glyphs space. View all the other uppercase glyphs and see if more center or more pull. If more center than pull, it would be best to compress the uppercase O. If more glyphs pull left then if would be best to force the uppercase H to pull left. Once you have a decision verify how the lowercase spaces. If you original font is spaced properly the lowercase should be behaving in the same manner as the uppercase. The goal is to select the method that will produce the least amount of work. Sometimes there are half pulling and half centering. In this case you have to choose one.
In my case my lowercase pulls left. I am happy with the image of the compressed H. Also the H was a bit expanded at that size and making it one pixel narrower would not hurt its readability.
After inserting an XDelta on the right side of the H, I will then move up the size to 10PPEM.
I will continue the process for 10PPEM the same way as I did for 9PPEM. Deciding whether to position the control characters left or center. During this process I look at the bitmap pattern after I have moved the glyph or made any changes to its spacing. I find it easiest to correct this PPEM size for spacing and at the same time the visual bitmap pattern.
In my font the bitmap pattern for 15PPEM of the uppercase O is not acceptable. It is symmetrical but not smooth. In all four corners there are extra pixels which are causing an heavy, blobby appearance. I can correct this by moving some of the hinted points with Delta Hints.
By looking at the outline and bitmap pattern, if the outline were to move up at the top and down at the bottom of the inner outline, this may be enough to remove the extra pixels. By selecting the Y direction and the YDelta tool from the toolbar, shift-click on the top inner outline point that is linked to controlling the top round portion of the O. A pop-up ruler should appear. Slide the cursor to +4/8. This will move the Ylink point up one half a pixel in the Y direction. The outline should now clear some of the pixels and give a different, better pattern. The value of +4/8 should be enough to do the job. You can test different amounts by increasing or decreasing this amount of movement.
The points that weren't touched by any hints move up as well due to a lower level TrueType instruction. You can see this Visual TrueType Talk instruction in the VTT Talk window (cmd-5). At the end of the commands is a 'Smooth' command. This command is then compiled into a IUP[X] and IUP[Y] TrueType instructions (cmd-2). These instructions move the points that haven't been hinted with the points that have been hinted. The effect smoothes out the outline. The Delta tool can shift points individually or with neighboring points. By shift-clicking we are moving the point and its neighbors that smoothes the outline. This moves the point inline with the other hints and not after. Moving points individually is useful only if a stray pixel is near a point and it can be removed by moving the one point. It is more efficient to move points with Delta hints by using the shift-click method.
Doing the same to the lower inner outline we now have a single pixel width image. In my case I have a better image than without the Delta hints but my image is now not symmetrical. I find that by moving the right inner and outer hinted outline points with a shift-click in the X direction and the outer left hinted point +2/8 on the right and -2/8 on the left I now have a finished symmetrical image. This size is now complete for this glyph.
Continue moving through the sizes till there are not spacing or image problems. Move and reference other control characters as we did for the 9PPEM size. After completing the uppercase O move to the uppercase H, then the uppercase V. Once the Uppercase is complete use the same processes for the lowercase, figures and eventually the remaining glyphs.
After all control characters are spaced and complete begin completing the rest of the uppercase glyphs starting with the uppercase A through the Z. Reference the hinting examples in the font MyFont.fog.ttf.source for sample hinting patterns on the remainder of the uppercase, lowercase and figure glyphs.
After all glyphs are spaced properly and the images have been improved we can finalize the composite glyphs. These glyphs do not have Visual TrueType tools. We need to edit the TrueType ('glyf' program) (cmd-2) instructions.
Fontographer built the composite instructions, if the font file used composites in the original Fontographer file. Using the Get Reference menu item in Fontographer did this.
Select the 'Aacute' in the character/glyph set (cmd-9). Select the TrueType window (cmd-2). The window is blank. (the instructions are in a binary form and not a readable form). To view the instructions, compile (cmd-R) the window. Visible instructions are created from the binary of the instructions. In MyFont the instructions that were written by Fontographer are:
OFFSET[R], 36, 0, 0
OFFSET[R], 141, 399, 334
The first instruction is OVERLAP. This is a instruction intended to be informative and labeling all glyphs because there is suppose to be an overlapping composite (a composite glyph who's component's outlines overlap.) All forms of Microsoft Windows do not support this OVERLAP instruction. We do not recommend overlapping contours in TrueType fonts because on some PostScript devices these areas appear white and not black as intended. If you have a glyph which has a diacritic that joins the base glyph it is best to join these outlines and not to make a composite glyph. The 'Ccedilla' glyph often is a joined C with cedilla. This should not be a composite.
Remove the OVERLAP[R] instructions in the composite glyph. Compile (cmd-R) the TrueType window. You should now have:
OFFSET[R], 36, 0, 0
OFFSET[R], 141, 399, 334
Next before the first OFFSET[R] instruction insert the following command:
Compile (cmd-R) the TrueType window. You should now have:
OFFSET[R], 36, 0, 0
OFFSET[R], 141, 399, 334
The USEMYMETRICS instruction forces this glyph to take the metrics (advance width) from the glyph specified in the first OFFSET instruction. The OFFSET instruction is made of 3 arguments and one Boolean flag. The Boolean flag is set so the bitmap of the composite matches the original bitmap shape. This is set with the syntax of 'R'. The first argument is the glyph index for the component. The next value is the X offset amount in units per em. The final value is the Y offset. Base glyphs should always be first and usually have zero offset amounts for both X and Y. The second OFFSET is the diacritic. The X offset is for centering the diacritic, and the Y is usually constantly the same for all Y distances in all composite glyphs. Since the diacritics are positioned for the lowercase they need to be shifted up. If the diacritics are all properly aligned, they can use the same Y offset.
The values for positioning the diacritics are set for high resolution and when properly set give good results at most sizes. At small sizes rounding can effect the position of the bitmap. We use a high level TrueType function which will help keep the diacritic centering over the base glyph in X and a second that will make sure the diacritic does not round down into the top of the base glyph.
Open the Font Program (cmd-7) window from the Views menu. Find (cmd-F) 'Function 79'. This is the function used for insuring a glyph is not touching the top of a base glyph. The next function #80 is used for positioning the diacritic in the X direction.
To use these functions we need to add a CALL instruction in each composite glyph's local TrueType instructions (cmd-2). In each function there is a comment showing a sample of the syntax for the CALL instruction.
First well add the call for the X direction. For correct results we need to use the function for the X direction first. Function 80 uses 5 arguments. The first is an offset value that can be applied to the diacritic. This is usually unnecessary and set to zero. The next two values are point numbers from the outline of the diacritic. The four and fifth values are two point numbers on the diacritic. The final value is the function number.
The syntax for CALL 80 is:
CALL, 0 , A1, A2, B1, B2, 80
A1 and A2 should be points from the diacritic. B1 and B2 should be points from the base glyph. The next instruction shifts the contour number 2 (the diacritic) if it is not already between the base glyphs two defined points. It is acceptable to repeat the point number from one or both sets of point values. To use one point on the diacritic and one on the base glyph you would set the arguments to A1, A1, B1, B1. (In MyFont the actual values would be 33, 33, 17, 17.)
The instructions for MyFont for the X direction are:
OFFSET, 36, 0, 0
OFFSET, 141, 399, 334
CALL, 0 , 33, 36, 17, 18, 80
Now we can add the Y function. For this direction we need to know a point number at the top of the base glyph and a point number at the bottom of the diacritic. In MyFont the point 18 is one of the points at the top of the A. Point 33 is a point at the bottom of the acute.
The syntax for CALL 79 is:
CALL, 2, B1, A1, 79
The first number '2' is the contour number to be shifted. The first and second contours are the base glyph 'A'. Contour numbering starts at zero. (In this glyph there are contours 0,1, and 2) The third contour is the acute and is referred to by number 2. The next number is the point at the top of the base glyph and the second the point at the bottom of the acute. The last number is the function to be called.
The final instructions for the 'Aacute' are:
OFFSET, 36, 0, 0
OFFSET, 141, 399, 334
CALL, 0 , 33, 36, 17, 18, 80
CALL, 2 , 18, 33, 79
After adding the two calls to the TrueType window, compile them (cmd-R).
You will need to repeat these stems in all your composite glyphs. In glyphs that have diacritics below the base glyph the Y function should not be used. An example of this glyph is a sans serif 'Ccdeilla'. The Y function does not ship diacritics down, only up.
Other problems that could arise are usually caused by some syntax or manual change to a diacritics position. An example of a problem is, if the diacritics are poorly positioned vertically and the composites vertical positioning in the uppercase is poor, then you may mistakenly alter the height in the main diacritic. When the lowercase composites diacritics are vertically high and the uppercase are fine, some hinters have manually added Delta hints to lower the diacritic in the base glyph. Then when the uppercase composites are using this same glyph the diacritic is actually now below the top of the base glyph at this PPEM size. When the Y positioning function is called it does not shift this diacritic because the distance is not equal to zero but it is a full pixel less than zero. The Y positioning function only works when the diacritic is above and the distance is zero between the diacritic and base glyph.
If the Y function is called before the X function the X positioning maybe unpredictable. Always call the X function first.
In composite glyphs with diacritics that contain more than one outline, (bollé and dieresis) to calls are necessary for the Y direction and two shift contour calls are required for the X direction.
In Trebuchet Bold, the instructions for the 'Adieresis' are:
OFFSET[R], 36, 0, 0
OFFSET[R], 142, 44, 370
CALL, 0, 14, 32, 5, 6, 80
CALL, 2, 5, 17, 79
CALL, 3, 5, 29, 79
The first line sets the metrics from the first OFFSET glyph's metrics.
The second line calls the base glyph 'A' who's glyph index is decimal 36.
The third line calls the diacritic 'dieresis' glyph index 142 and shifts it over 44 in X and up 370 units in Y.
The next line is a function call for positioning in 'X'. It positions the point 14, that is the left dot's inner point and point 32, that is the right dot's left inner point, Between the two top points of the base glyph, points 5 and 6.
The next two lines shift contour number 2 (left dot of the dieresis) and contour 3 (right dot of the dieresis).
The final two lines are for Y positioning. The first call checks to see if the left dot of the dieresis is touching the base glyph and the second call checks the right dot of the dieresis. The first set argument in the CALL is for contour 2, the left dot and contour 3, the right dot. Point 5 is a point at the top of the base glyph and is used in both calls. Point 17 is at the bottom of the left dot of the dieresis. Point number 29 is at the bottom of the right dot of the dieresis.
Begin Finalizing the Font File
After we have corrected any problems with composite instructs and added functions to correct any spacing errors, we can tidy up any remaining glyphs.
During the hinting process values in the font files may have changed. The first process after hinting is to update the font files values that are stored in the 'maxp' table. To update this table select the menu item 'Recalc 'maxp' table...' from the 'File' menu. In the alert dialog click the yes button.
The next feature in the font we will set is for control of when a gray scale device such as the Windows rasterizer displays gray-scaled images. Setting values in the 'gasp' table can control gray scale. In the 'File' menu, select 'Edit 'gasp' table...' In the gasp table dialog, the values are set to default amounts. On the left are the entries for the maximum size the settings on the right will be employed. With the default values when glyphs are displayed below 8 PPEM they will not use hints and will use gray-scaled images. From 9 PPEM to 15 PPEM hints will be used (Grid fit) and gray scale will not resulting in black or white images only. Above 15 PPEM both hints (Grid fit) and gray scaled images will be displayed. To set this table in your current font, I would recommend using gray scale, without grid fit below 8 PPEM. I would use "grid fitting, without gray scale" from 9 PPEM to when the stems turn from one pixel to two pixels. Then from the two pixel PPEM and up "use grid fit and gray scale" for all other sizes.
In the main window select the uppercase O. Note the PPEM size that the first image is two pixels in stem thickness. In MyFont it is 17 PPEM. Then select from the 'File' menu, 'Edit 'gasp' table...' Change the second default setting from 15 PPEM to 16 PPEM. Click on the 'Set' button. This sets the 'gasp' table so on a gray scale device, gray scale should be used above 16 PPEM.
Next, from the 'Display' menu, enable the 'Gray scale' menu item (the 'MS Rasterizer 1.7' will automatically be checked.) With pixels and grid fit turned on, view several of the lowercase and uppercase glyphs in the font. In Visual TrueType the 'gasp' table will not be read. When Gray scale is turned on in VTT it will be on for all sizes. View the glyphs at sizes that have gray scale and the images are one pixel in thickness. Notice how diagonal and round images that are not fully covering pixels are now gray. In some areas such as on a lowercase v, the thin diagonal strokes appear fuzzy and faint. This is the reason we suggest turning gray scale on only when you have enough thickness to show two pixels. If you find even when the font is two pixels some features appear faint or poorly defined. Try viewing them with out gray scale turned on in VTT. If you find the non-gray image clearer, reset the value in the 'gasp' table to above the recommended value.
To view images at the default value (4 times over scale set in the VTT Preferences), your monitor setting needs to be set for 16 colors (or grays) or higher. If your monitor setting is less than 16 colors you may see unexpected results or what would appear to be missing pixels. These missing pixels are actually gray values that can not be displayed in the black and white mode.
After setting the 'gasp' table we can now begin the final steps before shipping the font. Last major step is verifying your work, commonly called 'proofing' the font.
The proofing stage of font production is a large part in creating a good TrueType font. The two main stages of the proofing parts of font production are for esthetic evaluation and technical font file verification. The first stage should be the esthetic evaluation of 300 dpi printout and low resolution screen proofing. After the esthetic evaluation is finished the font files technical stability should be tested.
The esthetic evaluation stage should be done more than once before the font is finalized. More correctly this evaluation is done in stages during the hinting production cycle and completely at the end of the hinting cycle. The first time esthetic proofing should begin is when there are sufficient glyphs with hints. These hints can be checked to see if they are controlling the glyphs properly at 300dpi printer resolution. You should check to see if the hints are too strong or have errors that were not apparent at screen resolution but now deform the outlines at printer resolution. Proofing of the entire font should be done also before the font is shipped.
Proofing and testing of font files at Microsoft is done by installing the font file in Windows 95 and later in testing on Windows NT, Windows 3.1 and the Macintosh OS.
Before we can move the font to Windows we need to create a usable binary version from our Visual TrueType source file. As we have added hints in Visual TrueType, additional source information has been added to the file. This text information allows us to view the hints and instructions in a human readable manner. The text information is necessary when editing or revising the hints in Visual TrueType. This file format is similar in concept to the way software engineers use source code to write applications and then compile this source code into machine language.
Before we install the TrueType font in Windows, we will remove the extra source code. In Visual TrueType, select 'Ship font...' from the 'File' menu. When you select 'Ship font...', you will be warned in the dialog that it is advisable to rename the font file so you don't overwrite the source data. If you do overwrite the source file you have been working on in Visual TrueType, you will not be able to edit or append the hint information in the font.
Do not overwrite your source file when running 'Ship font'
This additional source text information is required to make corrections. It is common practice when hinting with Visual TrueType to name the source file 'MyFile.ttf.source'. It is also common to rename this file to 'MyFile.ttf' or 'MyFile.ttf.stripped' when you are complete and ready to strip a copy of the font file.
After you have renamed your font and run 'Ship font...', you need to move the file over to a server that can be read by both Macintosh or Windows. Windows NT Server supports both operating systems. You also can use a diskette formatted for a 1.44Mb or 720k PC drive and a Macintosh that can read PC diskettes.
Font Testing Tools
There are several steps to prepare the font for testing and several tools to run.
The first step is to calculate some new tables based on the new hinting information.
With the tool 'Cachet.exe', a Windows console tool, we can calculate the 'VDMX', 'LTSH', and 'hdmx' tables. These tables help performance and the visual appearance of the images in the font.
For full explanations of the 'VDMX', 'LTSH', and 'hdmx' tables, see the OpenType Specification.
Copy the .ttf font file from the diskette or server to a directory with the cachet.exe tool. Double-click on 'dosprmpt' in the c:\win95\ directory. This will display an MS-DOS console window either full screen or in a tiled mode (tip: with ALT + Enter the console window will toggle between maximize and tile.)
Some basic MS-DOS commands.
will change the directory to a specified directory.
Ex: 'CD \win95' will make the current directory win95
will change the directory one level up.
Ex: If at the prompt the current directory displayed is C:\win95\system , CD.. will make the current directory C:\win95
displays the contents of the current directory.
Displays the sub directories in the current directory.
mean all files. '*.ttf' means all file with the extension .ttf
deletes all files in the current directory with the extension .ttf.
The structure of a hinting and testing cycle is the following:
- a source file contains all editable information and is the master file.
- Run 'Recalc "maxp" table' from the VTT 'File' menu on the source file after all hinting is complete.
- Create a second stripped file from the source file by selecting 'Ship Font...' from the VTT 'File' menu to strip out extra information used by the editor.
- Copy the file to Windows and run CacheTT to generate some new tables.
- Load the font into Windows and print and view the font with WordPad.
- Run Flint to validate all instructions and tables.
The first tool we will use is cachett.exe. CacheTT is a NT Console and Windows 95 DOS application. It creates and or modifies the VDMX, hdmx, and LTSH tables by calculating values from the TrueType rasterizer.
After the font is hinted it is necessary to calculate the current metrics information at specific sizes. If the hints are controlling the advance width by moving sidebearing points the values for the advanced width when scaled will not match the actual hinted version at a specific size. CacheTT uses the rasterizer to calculate the actual width in pixels and store it in the 'hdmx' table.
Vertically, hints may cause glyph bitmaps to be one or more pixels less or greater than if there were no hints and the outlines values were just scaled. In Windows, these bitmaps images if not calculated and the original metric information is used by Windows, will be clipped if they exceed the known cell height. The VDMX table stores the actual height in pixels after hinting for specific sizes so bitmaps are not clipped.
The LTSH table is calculated to help performance by telling the rasterizer when it can expect the font not to have hinted widths.
For a full explanation of these tables, refer to the Microsoft OpenType Specification.
Change the current directory to the directory with the cachet.exe tool. In my example, My current directory is C:\win95. At the prompt I type CD \tools\cachett . My cachet.exe resides in a sub directory of a directory on the same level as the win95 directory.
Run cacheTT by typing:
cachett myfile.ttf myfile2.ttf
at the DOS prompt. Cachett will recalculate or create by default a VDMX, hdmx and LTSH table. For a full explanation on the default settings and how to customize cacheTT see the CacheTT user guide 'cachettug.doc' supplied with the tool.
After you have created the new file with the cacheTT you can now use this font in Windows applications. Copy the file into the Fonts folder in Windows 95. I create test documents with Microsoft WordPad. WordPad is a simple word processor that is useful for proofing fonts. I use these documents to check color, recheck spacing and generate higher resolution printout on a laser printer.
If you find problems that you wish to correct, make those corrections to the original sources file. Then rerun Ship Font and Cachett on this corrected file.
After you are completely happy with the estectic look of your hinted font file you are now ready to being the final test on the TrueType font file information.
The tool Flint is a Windows 95 application that uses the rasterizer and reports if there are any warning or errors with any of the instructions or tables in the .ttf file. Examples of warning or errors are that an instruction is referencing a Cvt value that does not exist. This would be considered an error which should be corrected.
Lauch Flint. From the File menu select 'Choose Font...'. Select your .ttf file. From the Settings menu select Size. Leave the resolution at 72x72. Set the size to the desired point sizes. I would suggest 4-500 point. To select how Flint will report errors, select the Output menu item from the Settings menu. By checking 'Output results to file' you can elect to have results saved in a .txt file. You also can set the tolerance Flint will use to test hints. If a hint moves an outline point more than this set value a warning is given. This is to check that any hints that are not intended are found. Or it is possible to mistakenly move the wrong point or Cvt and cause distortion of the outline. The default setting is 5.000. The value is in pixels.
After you have selected the output method you are ready to process your font. Select Run from the Test menu and the font will be processed.
After you have corrected any errors in the font by fixing them in the source file it is important to re-run all steps.
Prepare the Remaining Family Members
After completing the testing and corrections for the regular weight font. The next font we will process will be the italic font. The italic font's height distances should be the same as the regular weight font. Italic font's stem widths are generally smaller than their upright family members are.
When measuring the stem distances we will not try to match the regular distances and falsely force the stems to be the same. Use the correct distances for each font. Then during hinting we will make sure through inheritance and hint controls that break points for stem distances are keep consistent between styles.
Create a .ttf file of the italic font with the same steps we used in processing the regular font. Once the .tff is created open the file in Visual TrueType. Next run 'Prepare font...'
Measure the italic groups as we did for the regular font and create a Cvt table.
In creating the Cvt table we need to measure one additional value. This value is called the 'Italic Run' and is used by the stroke command. It is found at Cvt #36.
In Visual TrueType, open an italic font. Select the measure tool from the toolbar. Measure the italic angle, which best represents, the angle of the typeface. Usually this can be done from the UC I, UC H, or LC l.
If the design is serif and it is difficult to find two points that are from the baseline to the Cap height, place the measure tool at an imaginary line that is parallel to and extends from one side of the italic stem to the baseline. From the baseline measure to the top of the uppercase glyph and along the italic stem. The value displayed in VTT as 'dx' is the x distance or the italic run. In my case the value is 399. Add this value to the Cvt table in Cvt #36. Compile the Cvt window.
Measuring the italic run.
Before we begin measuring stem distances, we should add the Cvt font wide inheritance values. We want the stems to be consistent with the regular weight so we will use the values for inheritance from the regular weight. The values I used in the regular weight were 74 for the thinnest single pixel control, 193 for the main X control taken from the uppercase stem, and 74 for the main Y control taken from the Y stem distance of the lowercase. Enter your values in Cvts 65, 66, and 67.
Now we can begin measuring the X and Y stems. Begin in groups as we did with the regular weight. When measuring X stems in an italic we will measure diagonal stroke distances. The measurement is taken from the left side of the main stroke to the right side, parallel to the baseline.
Measuring an italic stem.
For Y stroke measurements there are few Y diagonal strokes. The only possible Y diagonal strokes may be on a lowercase and uppercase K. The Y measurement is taken perpendicular to the baseline from one side of a diagonal stroke to the other.
The measure tool will snap to the outline if there is no point near the area that you have selected. The line of the arrow will be straight when the cursor is dragged parallel to the baseline for X measurements or dragged perpendicular for Y measurements. X distances may be slightly thinner than the stem measurements of the upright style font of the same weight. In my italic font my distances were averaging 178 units. The regular weight was 200 units.
When measuring round distances select the extrema points you will use for the X links. In my italic font the measurements were consistently 210 units. (Comparatively the regular weight was 210 units.)
In X straight distances there are no straight stems in the italic. The Cvt value for straight stems can be set the same value as the groups major X diagonal distance or used as an alternate manually selected Cvt for larger or smaller diagonals.
For serif X distances we will not use a Cvt. The serifs protrude in X from a diagonal stroke and are not consistent distances from the main stroke of the diagonal. In the hinting stage we will use an X shift and round to grid (anchor) method of controlling the serifs.
Continue to measure the remaining values for X and Y. Finish by adding the averaged group values to the Cvt table and compile the Cvt window.
Hinting the Italic
Now that we have set up the Cvt table we will begin hinting with control characters and in groups.
Begin with the uppercase group. Select the uppercase O. Even though this is an italic glyph the hint structure will be the same as the regular upright font. Turn on the pixels (cmd-B.) Notice how the extrema points on the outline are the only points in either the X or Y direction that are parallel to the grid lines. In hinting these points will be moved to grid boundaries in the same way the regular font's points are moved. The points in between will be smoothed/interpolated between these points.
We again need to decide a hint strategy for spacing the glyphs. The method used in the regular weight was to link in form the sidebearings and maintaining minimum distance on the left side.
I will use a method of hinting in from the sidebearings and not maintaining minimum distance or by not using a control value. I will use Delta hints to control spacing when there are problems. You could experiment with other hinting methods described in Section 3. "Hinting the First Glyph."
In my italic font the left side of the uppercase O is almost on the right sidebearing. If we were maintaining minimum distance on the right side we would falsely be pushing the glyph to the left.
Select the X link tool from the toolbar and link from the right sidebearing to the outside right extrema of the O. Shift-click and change the link to a distance, no Cvt, and don't maintain minimum distance. Next link in form the left side with the same link settings. X link across the left stem with a round, Cvt, and maintain minimum distance link. Link in from the right extrema to control the right stroke and finish the X direction.
Uppercase O, X direction links.
Select the Y direction and turn of the X direction. As with the regular uppercase O, shift-click with the Y link tool on the top and bottom points. Select, round to grid then shift-click on the highway sign to add Cvt #3 for the top overshoot point and Cvt #9 for the bottom overshoot point. Y link with a round link, with Cvt, and maintain minimum distance on the top and bottom round stroke. Compile the uppercase O's hints.
Now we can begin hinting the first of several diagonal strokes. Select the uppercase H in the main window. In hinting the italic glyphs that have a main diagonal stroke we need to add an additional step. We need to set an italic angle for the stroke. Enable both the X and Y directions. Select the angle tool from the toolbar. From the bottom of an italic stroke in the uppercase H, click and drag up and along the angle of the diagonal stroke. You will see a black line displayed that will rotate as you move the cursor up, down, left or right from the origin point of the cursor. When the mouse is released the line will turn gray and the italic angle for this glyph has been set. To rest the angle, reselect a new origin point and repeat the process.
Enable both the X and Y directions. For the hints on the H we will use a similar type of hint structure as we used for the uppercase V diagonal stems in the regular font. The main stems of the H are hinted with a Stroke command. The serifs will be hinted in X with an X shift from the main diagonal stroke and then rounded to grid.
As with other glyphs we need to decide how to start the glyphs origin point or first hint. This can effect spacing and centering of the glyph. Since the outlines of the glyphs in an italic font are almost always to the right of the advance width, I have a preference of linking in from the right sidebearing and hinting from right to left in the X direction. Linking in from the left side would cause the glyphs generally to be pushed to the right even more than they are now.
I also prefer hinting in the X direction first when using the stroke tool. The stroke tool requires you display both X and Y directions. If I hint the Y direction first there are to much information on the screen for me to clearly see the glyph when adding the stroke links.
With the X and Y directions on link from the right sidebearing point X link to a point at the top of the right diagonal stroke of the H. This point should be the final on curve point of the diagonal stroke. On a bracketed serif the point selected will be the last on curve point at the transition to the curve of the serif and the last point in the straight part of the diagonal.
Select the Stroke tool from the toolbar. Link from the top of the diagonal across the stem for the first Stroke pair and across the bottom for the final Stroke pair. Select the X shift tool and link to the farthest point on the serif from each side of the stroke using the closest Stroke point to the serif. After linking with the X shift tool round this point to grid.
Now add the Y hints starting by anchoring the top of both sides of the H to Cvt 2. Y link to control the serif distances on both sides of the stem with Cvt 80 (the serif height.) After the top hints are finished, do the bottom portion of the H. Anchor both bottom points and select Cvt 8. Y link with Cvt 80 to control all serif heights.
Finally select the Y interpolate tool. First select the parents, on of the bottom anchored points and one of the top anchored points. Control the bar by selecting a bottom point on the bar as a child point and round that point to grid. Next we need to control the points we used in the stroke command. Select all points used on both strokes as child points for the interpolation. Select the Y link tool and link up across the bar with a straight, Cvt and maintain minimum distance Y link. The Cvt that should have been selected is the thin Y straight stroke Cvt. In my font it was Cvt 72. Compile the hints.
The next main glyph for hinting is the uppercase V. Its hint structure will be the same as the regular font's V.
Other Hinting Methods
As you look at other glyph shapes it may not seem obvious how to start hinting more complicated shapes. The methods we used above can be applied to most all other shapes.
Looking at a lowercase serif 'a' we can break it into sections and see how similar it is to glyphs we have already hinted.
Lowercase a Main Features.
The illustration above should help you see the major features and strokes. The vertical lines are showing areas that will use X hints. The horizontal lines are Y hints and the diagonal lines show the main diagonal stroke.
On the left side of the 'a' in the X direction, the round stroke is the same as the left side of the uppercase or lowercase 'o'. We would use a round X link with a Cvt for that feature. The right stroke and tail can be treated the same as other diagonal strokes we've encountered on the uppercase 'H'. First we would do the stroke on the diagonal. Look at the diagonal and see how the drawn two parallel lines along the diagonal of this stroke show the full stroke feature. How the inner countour and round strokes intersect the diagonal stroke. Compare this stroke to the stroke of the uppercase 'H'. The intersecting bar's points were interpolated between the inner stroke on either side of the H. On the 'a' we have several points that interrupt the inner stroke of the right side of the a. We can use a stroke using the two points at the transition where the stroke turns back and into the tail. In the illustration these points are numbered, 28 on the left and 19 on the right. The second pair of points used for this stroke are the two top points of the stroke, points 15 and 16. Then in X, we will interpolate the points along the inner diagonal stroke that are at the intersection points, points 0, 14, and 32. Point 32 is controlling the counter and needs to stay along the diagonal for the left side to remain a consistent weight. If we don't control this point it will move left and right and cause the center section to be thin or fat. (note: in this outline, two points are used to define the intersection areas of the round and diagonal strokes. This was a method of marking outlines that is common but not always essential. In hinting these points used are the ones along the area to be controlled. In this example they are points 0 and 14 are along the diagonal.)
Detail of Two Points at a Diagonal Stroke Intersection.
After controlling the main diagonal the tail can be treated the same as we did for a serif and use an X shift, rounding the farthest point on the tail to grid. Point 24 in the previous illustration of the lowercase a features.
The complete hints for the 'a' would be, hint in from the left sidebearing to the left most point on the a (#7) with an X link, using a distance, no Cvt and don't maintain minimum distance. X link across the round stroke with a Cvt (to #38.) Xlink with a distance link from the inside of the bowl to the top inside point of the right diagonal stroke (#15.) Using the Stroke tool select the top two pints as the first pair (15 and 16) and the bottom two points which are the last two points on contour before the curve starts (28 and 19.) X interpolate the points along the left diagonal at points 0, 32, and 15. X shift the farthest point on the tail in X and round that to grid (#24.)
In Y select the top point (#11) and round that to grid with a Cvt 7 (lowercase top overshoot.) Do the same to the bottom (#3) with Cvt 11 (lowercase baseline overshoot.) Y link across the bottom (#42) with a round Cvt link. Round the top point (#16) of the right diagonal to grid and use Cvt 6 (x-height.) Y shift to the point, which slants the top of the stroke down (#15) and don't round this point. Round the bottom of the stroke to grid (#26) and use Cvt 11. Then Y link across the round stroke of the tail (#21.) Y link up to the top of the tail (#23) with a distance link, maintain minimum distance and no Cvt. (note: if this tail is a repetitive feature on other lowercase glyphs you should define a Cvt for this feature and use it on all other tails.) Finally Y shift (no round) from the top of the round stroke (#11) to the point of the round (#3) to the bottom point that intersects the diagonal and round strokes (#0) using a Y shift. Compile the hints.
Hinting flared stems and cupped serifs
When stems of some typefaces are flared they appear as slab serifs at small screen sizes because there is not a high enough amount of pixels to represent the flare. Cupped serifs sometimes have one large pixel showing the cup when the stem is a small as two pixels. In both cases we would like to not show these flares when there is not enough resolution to show them as a slight feature. In the Pre-program and Cvt program we have set up a test that will make a stem stay straight when hints are applied to flares. It uses Cvt #157 and #158 that are set aside to be used for the distance the flare or cup is away from the main stem.
Measuring a flare.
When hinting a flared uppercase I, we want to control the middle of the stem in X with an X link and a Cvt. Then from both sides of the X link we will X link with a distance, Cvt, and don't maintain minimum distance Cvt. We will use either Cvt 157 or 158. The Pre-program will test if the distance is large enough so two pixels will be displayed. If the distance is too small to show two pixels Cvt 157 and 158 will be set to zero font units and the flare will not appear.
These are the X hints for the flared uppercase I. The flare distance was measured and the value of 50 was place in Cvt 157. In the X direction, X link across with a straight link using Cvt 68 and maintain minimum distance. From the first link point X link to the top flare with a distance, Cvt 157, and don't maintain minimum distance. Do the same for the bottom flare. From the right side of the stem, link out to the top and bottom right flare points with the same settings as the left side flare (with Cvt 157.) Compile the hints. With the Display: Show size run menu item enabled you should see that the stem remains straight until there are two pixels for the flare. To test this you can change one of the flares so it does not use a Cvt. You should see that the flare appears as a single pixel in the X direction and has the effect of making the design appear to be a typeface with a slab serif.
X Links for a Flared Uppercase I.
The Appendix is based on an introductory TrueType hinting page from the Microsoft Typography web site.
Basic global tables
Basic TrueType hinting involves three tables that are global to the entire font: the Control Value Table, the Preprogram Table and the Font Program Table.
Control Value Table ('Cvt')
TrueType allows control over the regularity of features through the use of values stored in the 'Cvt' table. Control values are measurements of features, such as lowercase stem widths. These stems, although similar to one another, may have slightly different outline distances. With Cvts the distances can be controlled so they are the same pixel width at a low resolution. At a higher resolution the control value won't be used but the natural distance will display in the stems. The Control Value table doesn't require these values to be glyph feature distances. The values are an integer and can be accessed from many TrueType instructions. The table also can be written to as well as read from other tables.
Other examples of glyph and font features that can be stored in the control value table are: cap heights, x-heights, overshoot distances, ascender heights, baselines, figure heights, serif lengths and heights, italic angle, group (uppercase, lowercase, etc.) stem distances, group round distances. Other features might be: smaller group distances such as a math sign stem distance, braces, brackets, or parentheses distances.
Figure 1. Features of a lowercase 'b'.
In every font there are certain conditions that will always apply. In TrueType we control these conditions through code placed in the preprogram. The 'prep' table is executed each time a glyph size or resolution is changed and before the glyph's local instruction are executed. This is a good place to control global conditions for all glyphs. Some examples of what to put in a 'prep' are...
- Controlling when hinting instructions are used and when they are not. In Microsoft fonts we turn off hints below 8ppem and above 2048ppem. We feel it unnecessary to use hints below 8ppem or above 2048ppem. This also prevents some technical issues from arising.
- Turning on control to check for missing pixels in continuous strokes. In some cases the outline may pass between pixel centers and would result in holes in the bitmap. This control checks for these conditions and adds pixel/s where these 'dropouts' occur.
- Altering values in the 'Cvt' used to control group features such as uppercase stems and rounds. Here you can control the size at which a stem breaks from one pixel to two, etc. It is common to force round and straight features to be equal until a desired size.
- Setting the 'Cvt' cut-in limit. This is a threshold (or thresholds) which are used to determine if a 'Cvt' value will be used or the actual distance will be used. I use three threshold settings: one for small ppem sizes set so the 'Cvt' will most always be used; one for medium ppem sizes where a more reasonable threshold is set; and a high ppem threshold set to always use the actual distance and not the 'Cvt' value. You'll see below how some instructions are set to look at this 'Cvt' cut-in limit.
- Setting minimum distance. Sometimes it is necessary to maintain a minimum of one pixel between one outline point and another (in the case of hinting across the stem of a glyph, for example). I always set the minimum distance to be one pixel. If I then hint across a stem and the actual distance is less than a half a pixel, the stem width is always forced to be one pixel.
Font Program ('fpgm')
This table stores functions that can be called from the 'prep' or from the glyph's instructions. Functions are used to eliminate repetitive code from being used in multiple glyphs. A common example is to control the placement of a diacritic over a base glyph. TrueType supports composite glyphs (glyphs made up of other glyphs). In composite glyphs the bitmaps of these already hinted glyphs may not be placed in the same way as the original unhinted outline position in the horizontal and vertical direction. A function is often used to insure the diacritic centers over a base glyph and the diacritic does not touch the top of the base glyph.
II. Glossary of Terms
- Advance Width - A glyph's horizontal distance including the white space on either side.
- Bitmap - An image made of pixels. In this document a bitmap refers to the displayed characters after the glyph's hints are processed. This is not to be confused with a 'bitmap font file'.
- Code Page - a predefined set of characters. Hardware manufacturers, software manufacturers and standards organizations have defined sets of characters for specific uses and devices. Also called a 'character set'. The US English version of Windows 95 uses the 1252 Windows Latin 1 (ANSI) code page. For a list of code pages used by Microsoft Windows see the book "Developing International Software" by Nadine Kano, published by Microsoft Press, ISBN 1-55615-840-8.
- Composite glyph - a glyph made up of one or more other glyphs and use all the data from these original glyphs. Composite glyphs in TrueType contain pointers to the original glyphs with some additional positioning information. This method of glyph construction saves file space and maintains quality by using the same images for all glyphs with the same parts. Examples of composite glyphs are Latin 1 characters such as the 'Aacute' and 'Eacute'.
- Character - in computer terms refers to a position in a code page or keyboard layout. The lowercase a is a character in the ASCII code page. See "glyph".
- Diacritic - A mark normally used in conjunction with another glyph. In Latin fonts these are sometimes called 'accents'. In Hebrew and Arabic these are marks that denote vowels.
- Features - These can be heights of the letter groups, stems or rounds of a group, and serifs.
- Font - A member of a typeface. Traditionally a specific point size of a specific style. The modern interpretation for a specific outline font file. Times New Roman Italic is a font or font file in the Times New Roman typeface family.
- Function - A general term in computer programming for a particular kind of subroutine.
- Glyph - An image in a font file. For comparison a lowercase 'a' is a character. In the latest font file technologies (OpenType and TrueType GX) there can be several glyphs that are a lowercase 'a' in a font file.
- Glyph Index - Glyphs are given numbers starting at zero. Tables and instructions to access the glyphs use these numbers.
- High Level Language - the farther a language is from the binary computer language and is more human readable. Visual TrueType links are a high level hinting language. TrueType is a lower level hinting language.
- Hinting - a simple set of font instructions used for scalable fonts that helps computers display bitmaps more consistently. Often the term is a general term used for all font technologies. TrueType font information is more correctly called instructions since they strongly control the bitmap image.
- Interpolate - Moving points between two moved key points and keeping the relation the same as the original positions of all points.
- Latin - Languages based on the Latin alphabet. Examples are English, French, German, Spanish and Italian.
- Low Level Language - the closer a language is to the binary computer language. TrueType is considered a low level hinting language. Computer Assembly Language is a lower level language and Pascal is a higher level language.
- Mapping - matching a glyph with a character. In TrueType fonts the 'character mapping table' matches glyphs with character codes for the Macintosh operating system and Unicode numbers for Microsoft Windows.
- Outline - A series of curves and straight lines that are filled with pixels to make an image.
- Overshoot - The difference between the round and flat glyph heights and baselines in a group. Round characters need to project higher and lower to give the appearance of equal height.
- PPEM - An acronym for pixel per em. Pixels per em are a non resolution dependent unit of measure. PPEM are calculated by the equation: PPEM = pt size * resolution/72.
- Rasterizer - software that takes information from scalable fonts and displays bitmaps at specific size and resolution. Microsoft Windows and the Macintosh operating system contain a TrueType rasterizer for displaying TrueType fonts on the screen as well as the printer. PostScript fonts are displayed by a PostScript rasterizer as part of Adobe Type Manager and/or PostScript printers.
- Rounded - Distances and values when converted to pixels are usually in fractions of pixels. These fractions of pixels are converted into whole, half or specified fractions of pixels. Example: a distance is 1.4 pixels. When this distance is rounded to grid, it would equal 1 pixel.
- Scalable fonts - font files that do not necessarily contain predefined images specific to a resolution and size. These font files use one source to display all possible point sizes and resolutions.
- Sidebearing - The distance from the leftmost portion of a glyph and its origin or the rightmost portion and the end of the glyph's advance width, which is the total space occupied by the glyph itself and its two sidebearings.
- Tables - TrueType font files are separated into sections of similar data called tables.
- Typeface - A collection of fonts within a family. Times New Roman is a typeface, Times New Roman Italic is a font.
- Units - TrueType fonts use a 2048 Unit Per EM measurement system. In comparison PostScript uses a 1000 unit system.
III. Further Information on TrueType and Font Design
- Fontographer: Type by Design, Stephen Moye, MIS Press (1995) ISBN: 1558284478
- Developing International Software (Microsoft Windows code pages), Nadine Kano, Microsoft Press, ISBN: 1556158408
Top of page