Hinting Font Variation fonts in VTT 6.2


The latest version of VTT, (6.20) allows for the easy addition of hinting to Variable Fonts. There are two main new additions to the UI, to facilitate this. Download VisualTrueType 6.20.

Variation Window. The Variation window shows you the current selected glyph outline and hints, (just like in the Main window) for the selected variable font instance. With both the Main and Variation windows open, you can easily edit hints in the Main window and see the impact update live, on variations glyphs in the Variation window. Because hints in a variable font are associated with the default instance and merely follow interpolated CVTs for other instances, you can only edit hints in the Main window. The Variation window also allows for proofing the hinting results for variation instances within a font.

Variation CVT Window. When you select a master instance, you can adjust the CVTs for that instance; just type a change and hit Ctrl-R to recompile. The Variation CVT window will show you which CVTs vary across the font and how they differ from the default instance. If you select an intermediate instance, you can *inspect the interpolated CVTs for that instance. This is discussed in further detail below, in The Variation CVT Window section. *Note: VTT does not yet support editing intermediate instance CVTs.

The Variation CVT Window can also be used to select which variable font instance you would like to proof in the Waterfall, Text Sample, and Variation Windows.

Note: VTT currently only supports varying CVTs for masters at the minimum, maximum, and default coordinates of variable font axes.

Setting up for Hinting and Proofing in VTT. 6.20.

vtt

 

  1. Main View
  2. Variation View (Choose the View Menu > Variation)
  3. The Variation view Window displays the currently selected Variation Instance.
  4. Variation CVT Window.

The short video below, shows the basics of set-up, running the Light Latin Autohinter, and editing the hints, in a Variation Font. There are a few ways to begin Hinting on a font, including editing the CVT Table manually and adding the hinting via the Visual UI, running the Autohinter, or preparing the font for Hinting, via Control Program only. Please see this previous post for more information on setup and Autohinting.

  1. Open the Font Variation font you wish to add hinting to.
  2. From the VTT Menu, choose Tools > Autohint > LightLatin Autohint
  3. File > Save
  4. Edit the hinting. Hinting is done in the Main Window on the default instance of the font, (in the same way as was done before for static fonts). With both the Main and Variation windows showing side by side, you can edit hints in the Main window and see the hints update live in the Variation window. Because hints in a variable font are associated with the default instance and merely follow interpolated CVT’s for other instances, you can only edit hints in the Main window. In this example, when using the Light Latin Autohinter, the only CVT’s that are used in the hinting, are for Height control. As the Heights, (such as x-height and Cap Height, for example) are consistent across the Variations in this font, there is no need to make any further edits to the Variation CVT table. The Light Latin Autohinter in VTT, uses the ‘ResYdist’ command, to control stem weights. This generally works very well across the variations, when rendered in environments such as DirectWrite, that have support for vertical anti-aliasing. If CVT’s are used for stem hints or for Height anchor CVT’s that need to change along a variation axis, then you need to adjust those CVTs for each variation master in your font. This is discussed in further detail below, in the Editing Variation CVT’s section.
  5. Proofing. Proofing the hints, can be done by looking at the visual size run in the main Window, as well as in the Variation Window. There are two ways to change the variation instance to preview and proof in the Variation window. (A) Choose from the Display Menu > Variation Instance > Choose Variation, Light, Bold, Semilight etc. (B) CTRL + Shift + up arrow / down arrow, on the keyboard, is a quick way to toggle through all of the variations in the font. CTRL 8, displays the Waterfall window, which allows for a quick preview waterfall of the glyphs that are in the text sample. (To change the text sample see, Tools > Options > Extra Text. Glyphs added here will display in the text sample at the top, in the Main and Variation Windows, as well as in the Waterfall sample). Proofing can also be done on the entire glyph set, by choosing View > Character / glyph set. CTRL + Shift + up arrow / down arrow, on the keyboard, can be used in both the Waterfall view as well as the Glyph set view to toggle between all of the available font variations. Note: One set of hints covers all masters in the font. If there are problems with the hints, or you change you mind on the hinting strategy, select the Default master and edit the hints again in VTT’s main window. Remember, though, that any changes here effect all masters, so you’ll need to proof everything across all instances for the re-hinted glyphs again.

The Variation CVT Window.

If you used CVTs for stem hints or anchor CVTs that need to change along a variation axis, then you need to adjust those CVTs for each variation master in your font. The short video, illustrations and text below, show an example of how to do this.

1) Hint the default instance as you normally would, creating CVTs and placing visual hints (or high-level instructions). Proof it as you normally would. If you want, you can use the Light Latin Autohinter, or just the Control Program generator to get a start on your CVTs for heights in the font.

measure2

a. Open up the Variation window (Menu > View Variation) and the Variation CVT window. (Menu > View Variation CVT)
• The Variation CVT window lets you select a particular variation master (or any named instance), and shows you the CVT values for that master (and, in parentheses, the difference between that value and the default instance, if there is one). The Variation window displays the currently selected glyph using the Master you selected in the Variation CVT window, or from the Menu > Display > Variation Instance.
• In the Variation CVT window, select one of your non-default masters from the drop down menu. In this example I have chosen the Bold Master, in the Selawik Font Variations font. Note: The Variation, Waterfall, and Text Sample windows will all switch to that instance.
b. In this example, I have already measured the outline for the Uppercase Round stems in the default font. The outline measurement (from point 6 to point 18 on the Cap O) in the default font = 81 font units, as shown in the Green highlighted box. This feature will now reference CVT 68, (Uppercase Y Stroke) in the standard CVT Table. See the illustration above, by the Red arrows, showing the VTT Talk Window, ResYlink(6,18, 68). CVT 68 stores a value of 81 font units, in the CVT Table. Now use the measure tool in the Variation window to measure the new CVT values for the other masters in the font. Here I have measured the round stem for the Capital O for the Bold Master, which results in a measurement of 136 font units. CVT 68 now needs to be updated in the Bold Master, CVT Variation Window, to reflect the correct weight of the Bold Master.

You can see in the following illustration, if I do not update the Bold Master, CVT Variation Window, to reflect the correct weight, the Bold Capital O, is incorrectly rendered too light from 9-16ppem, as the CVT 68, used in the Hinting, is still referencing the default font weight value of 81 font units, as stored in CVT 68 in the standard CVT Table, instead of the correct measured weight for the Bold Master for this feature of 136 font units.

incorrectweight

To correct this:

c. In the Variation CVT window, for the Bold Master, find the corresponding CVTs , in this example, CVT 68, and update the values to reflect the actual measurement of the Uppercase Bold Stem. Ctrl-R to compile. The CVT for that instance will be updated, and rendering will be updated accordingly. Note: There are two ways to change this CVT value in the CVT Variation window. 1. Scroll to find the appropriate CVT, in this case CVT 68, and change the value to the actual measured value for the Bold Master, which is 136 font units. When the CVT has been updated, and the window is compiled, CVT 68, will be automatically deleted from the unvaried CVT list, and moved into the Varied CVT list. 2. Type the updated CVT 68, directly into the Varied CVT list, in this format, 68: 136 (with the new value reflecting the actual measured value for the bold master), and compile (ctrl R). This will automatically update the Varied CVT list, and remove CVT 68, from the Unvaried CVT list.
Here is the example, see illustration below.

Variation CVT (Green highlight below)

68: 136 (55) (Red highlight below) Note: when you enter a varied CVT value, it can either be an absolute value, e.g. 136, or a relative value (55)
In the above, CVT 68 now has the correct value of 136 font units for the Bold Master instance, which is a difference of 55 (shown in brackets) from the value for CVT 68 in the default instance (thus, the default instance of CVT 68 is 81).

With the new CVT value now added to the Varied CVT list, and compiled, in the CVT Variations table for the Bold Master, the correct weight is now rendered for this feature, in the Bold Master. See illustration below.

varied

d. Proof the rest of this instance to make sure you have all of the appropriate CVTs updated in the CVT Variations table as you’d like them, and reflecting the actual measurements in the Bold font.
e. Remember again, that you have only one set of hints for all masters in the font. If you want to edit them, select the Default master and edit them in VTT’s main window. Remember, though, that any changes here effect all masters, so you’ll need to proof everything again.
f. Repeat steps a-e for each Master in your font.

  • See the short video below, showing the steps to take in VTT, for editing the CVT for the Capital Bold Stems.


3) Now that you’ve hinted all the masters, your font should be ready to go, but it’s useful to proof any named instance you have defined in the fvar table, that is purely interpolated (i.e. that doesn’t have a master associated with it – e.g. semibold).

To do that:
a. In the Variation CVT window, select a non-master instance. Notice that the CVT area will be greyed out. That’s because this instance is not a master, so there are no explicit CVTs associated with this instance. Operating systems will interpolate this instance’s CVTs from nearby applicable masters (thus CVTs are implicit, not explicit), and thus you cannot edit them.
b. Proof the instance in the Variation, Waterfall, Sample Text, etc windows.
c. If there are problems with this instance, then you will need to make a change. However, since this instance is not a master, you cannot directly change it. You have the following options:
i. You can change the base hints in the default master. To do this, make your changes in the main window, hit Ctrl-R, and you can instantly see the results in the Variation window. Note that changing the base hints will impact all your instances so you will need to proof those again.
ii. You can edit the CVTs of nearby masters so that they interpolate the way you want them to for this instance. To do this, select each master in the Variation CVT window and make changes accordingly. Note that this will impact each of those masters as well as everything in between.

4) Your font should now be fully hinted and ready to go now.
We recommend a light hinting style using ResYDist() instead of Links, with CVTs, and using CVTs only for height anchors. For more information on the RES Instructions, see this post. This is the same style that the Autohinter uses. This approach makes the hinting process much simpler, and saves time (only a few CVTs vary) and generally results in very good quality, for rendering environments such as Direct Write, which has support for y-direction smoothing

Mike

 

 


Comments (4)

  1. Louis.choi says:

    Good posting.
    There is one question.

    It may be the default window, but when you open the main window and the transform window, windows of different weights are opened
    What file type should this file be in by default to open the main and similar files?

    Can I publish a font sample? It is for testing purposes only.

    1. fbcontrb says:

      hi Louis

      I am not sure what you are asking. VTT now supports the addition of hinting to Font Variation fonts. The details of the format are here.

      OpenType Font Variations Overview
      https://www.microsoft.com/typography/otspec/otvaroverview.htm

      Introducing OpenType Variable Fonts
      https://medium.com/@tiro/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369

      Mike

      1. Louis.choi says:

        thx, Mike
        This feature requires an OpenType variable font. Right? 🙂

        1. fbcontrb says:

          yes, correct 🙂

Skip to main content