Now that we have covered the new features this post will cover some basic setup in VTT 6.10, to ensure you have the correct settings to begin hinting and proofing fonts for the Web
VTT allows you to easily customize your viewing settings. When you begin Hinting, most of the work, will be previewing and proofing the hinted font glyphs, in the Main View Window. Hinting can be targeted for specific rendering environments. The illustration below, shows a typical setup, of the Main Viewing Window in VTT, for viewing, hinting, and proofing fonts for the Web. VTT 6.10 has a built in Rasterizer, that can match how fonts render in the Browser. As with any other typeface design task, a great proofing environment, is critical to ensure quality results. VTT allows you to confidently add Hints, and Proof your fonts, as you progress through the Hinting process, before installing and proofing live from within the browser.
Some Notes on Lighter Hinting
With the advent of newer rendering technologies, and better screens, Hinting has become much easier. The details in the post below will help you to set up VTT in the best way to add and proof your fonts for the Web.
In the past, for older rendering such as Black and White, complex hinting instructions, particularly x-direction hints, and additional Delta hints, were needed to strictly control the character shape onscreen. Because of the limits of a rigid pixel grid at small type sizes, the most difficult characters to render well were those with curves and diagonal strokes – especially italics, and much of this was controlled by adding hinting in the x-direction. Characters such as the lowercase ‘m’, in a typical Latin font, also needed to be controlled for symmetry, by using special hinting in the x-direction.
With the advent of newer rendering technologies, such as ClearType, the set of hinting instructions needed in a typical font, have become much simpler. Because of the increased resolution in the x-direction and accurate subpixel positioning, (when rendering in DirectWrite), stroke weight consistency between vertical strokes is rendered well onscreen, and is forgiving of slight variations in actual stem widths in ways that black and white full pixel rendering was not. The need for hinting in the x-direction to maintain issues of symmetry and stem consistency, are no longer necessary. The lowercase ‘m’, for example, will be rendered in ClearType, without the need for any x-direction hints. The three vertical stems will be render with consistent weight and even spacing. Italic fonts also benefit greatly from this increased resolution, in the x-direction, greatly reducing the amount of hinting instructions needed.
The recommendation for hinting Web fonts, is to use a more Lightweight hinting strategy, using Y-Direction Hinting commands only
This simpler set of instructions, focuses on grid-fitting common heights, such as x-height, Cap Height, Ascender & Descender, using CVT (Control Value Table) Height measurements, as reference, and linking across common stems and rounds, such as Cap H horizontal crossbar, E, F, horizontals, O, Q, C, G, Rounds, lowercase ‘e’ rounds and horizontal bar, and lowercase ‘n’, ‘o’ rounds etc. This strategy, takes advantage of Windows symmetric DirectWrite rendering modes. The key heights are anchored to the Grid, thereby maintaining consistency in grid-fitted Heights of common characters across a font family. This method of grid-fitting also helps to reduce blur, and minimizes distortion to the outline when grid-fitted. I will cover this in more detail in a future post.
Setting up VTT
Click to view full size image.
Before beginning hinting, to match the setup shown above in the Main Window, in your own version of VTT, follow these steps to customise the View in the VTT Main Window.
1. After opening a font in VTT, choose View > Main Window (Ctrl+1) from the VTT Menu.
2. Choose Display > Options (Ctrl+D)
Display Options, will affect how the glyph outline and visual hinting is displayed in the Main Window. The following setup, shows the settings needed for Hinting and proofing a font, for DirectWrite in VTT. 6.10. Direct Write is the most common rendering used in most modern Web Browsers on Windows, including IE 11, Edge, Chrome and Firefox. The example here shows how I usually have the main Window setup for hinting. You can customise these to how best suits your own working style, or preference.
Display options is broken up into a number of categories, under the Glyph Visuals tab. (There are also settings for Color fonts, under the ‘Color’ Tab option. This is ouside the scope of this blog post, and is not relevent for most hinting tasks)
(Bottom left panel)
Hide: Stroke Angle. Shows the stroke angle in Italic font. This was useful for older hinting methods, but is not normally needed.
VTT Attributes and VTT Commands in these directions.
Show: Y-direction only. (See notes above): To work with Y-direction Hinting tools. This setting will show or hide the hinting tools needed for Hinting, in the Toolbar in the main Window.
Set the VTT 6.10 built in Rasterizer, to a combination of ClearType + CT (Frac. AW) + CT (anti-aliased). This will allow for proofing inside of VTT 6.10, using DirectWrite rendering, matching how fonts render in the Browser.
(Top Right Panel)
Hide: sbit : Set this option to show embedded bitmaps.
Hide: Gray scale: Set this option to rasterize with the GDI grey scale technique used by Windows 95 through Windows XP.
*Hide: ClearType Grey: Set this option to rasterize with the ClearType Gray technique introduced in Windows 8. *Note: To cover all methods of rendering in DirectWrite environments, make sure to proof using this setting.
Show: ClearType: Set this option to rasterize with the color ClearType technique introduced in Windows XP.
Hide: CT (comp. AW): Set this option to show ClearType text with compatible widths.
Hide: CT (BGR order): Set this option to show color ClearType text with BGR subpixel order.
Show: CT (fract. AW): Set this option to show ClearType text with subpixel widths (sometimes called subpixel positioning). Works with both ClearType and ClearType Gray.
Show: CT (anti-aliased): Set this option to rasterize in ClearType with vertical antialiasing as introduced with DirectWrite. Works with both ClearType and ClearType Gray.
(Upper left panel)
The most useful to show in this is panel are as follows.
Show: Outlines: Shows the glyph outline in the Main Window
Show: Points and Point numbers: Points and point number, are needed to be shown to add hints to a glyphs, as well as to keep track of hinting commands that references point numbers.
Show: Fewer points: This setting makes the display of the Glyph outline in the main Window clearer, for hinting purposes, showing only the main points on the outline, that need to be referenced when hinting, and hiding off curve points.
Show: Heights: Shows common heights, such as baseline, Cap Height, X-Heights, descender, etc., as a blue line.
Show: Metrics: Displays the left and right sidebearings as a blue vertical line.
Hide: Outline Errors. Advanced setting, hidden by default.
Hide: Equiv. on-curve Advanced setting, disabled by default, and not needed for Hinting. Shows any off curve points as if they were on curve. Designates this by changing the color of the points.
(Upper middle panel)
Show: Grid fit, Pixels, Grid Lines and Pixel centers are the most useful settings, to view and proof hinted font results. TIP: When working in the Main view, you can use keyboard commands to quickly toggle between some of these settings. The ‘Grid Fit’ setting for instance, will show the glyph in the Main Window, with Hinting turned on. Toggling between the hinted and un-hinted view of the glyph you are working on in the main window is a critical part of the hinting process, to ensure, that the hinting is working as expected, and that there are no unexpected distortions introduced. You can easily toggle between the hinted and un-hinted view of the glyph in the Main Window, to compare the original outline to the hinted outline.
Tip: Toggle between the hinted and un-hinted outline = ctrl g
Tip: Toggle between the showing and hiding pixels = ctrl b
Hide: VDMX heights. For typical hinting this setting can be hidden. For much more detailed information on the VDMX, see this link.
Hide: Instructed metrics. This setting was typically used when hinting fonts for older rendering environments, such as black and white, when side-bearings were hinted to control spacing within the font. This setting is not needed when hinting a font for DirectWrite rendering, where hinting is not typically used in the x-direction to control sidebearings
These following settings make it easy to view and proofing the hinted glyph in the main Window. The Text string will display above the main Glyph in the Main Window. The ‘Size Run’ will display at the bottom of the main window.
Show: Text string. The text strings can be customised to show short samples of text such as ‘the quick brown fox jumps over the lazy dog’. The text string shown at the top of the Main Window can be customized in the Tools> Options panel.Show: Size Run . Shows the rasterized glyph at a range of sizes. The size range shown at the bottom of the Main Window can be customized in the Tools> Options panel. This is a very useful for proofing the Hinted glyphs at a range of common sizes.
Note: The sample ‘text string’ along with the ‘text run’ is the best place within the Main Window to proof the hinting of the font as you progress. The ‘text string’ and ‘text run’ will display to match the settings in the Display Options dialog. For example, under the Rasterizer Options, top right panel in the Display Options dialog, When ClearType + CT (frac. AW) + CT (anti-aliasied) are set, the text string will render as ClearType, Subpixel positioned Spacing, plus ClearType y-direction smoothing.
VTT Attributes and VTT Commands
Visual TrueType allows you to add hinting instruction to a font via a graphical user interface. VTT shows relationships between points, connected by arrows. At a glance, you’ll know characteristics of those relationships by studying.
- The color of the arrows (green for Y direction links, red for X direction links, grey for flexible interpolations, black for shifts and strokes, and blue for strokes).
- Orientation of the arrowheads (X, Y, or any direction).
- Shape of the arrowheads (identifying the most frequent control value categories of straight stem, round stem, and any distance).
- Control points and their rounding methods (none, to grid, to half-grid, to double-grid, down-to-grid, and up-to-grid).
- Other symbols represent the presence or absence of an anchored point, a control value table (‘cvt’), or an override for a minimum distance.
You use your mouse to drag and drop arrows until the on-screen character looks its best at different sizes. For example, you can drag arrows, arrowheads, and arrow tails to change the relationships between points. By displaying pop-up menus, you can change or remove attributes such as ‘cvt’ category, ‘cvt’ number, rounding methods, and freedom vectors. Alternatively, you can add or adjust any of these relationships by typing the relevant commands in the VTT Talk window.
Recommended: Set all of the following options.
(Bottom middle panel & Bottom Right Panel)
Note: Disabling X-Direction Commands in the VTT General Tab, will disable these commands in the Graphical User Interface. When Hinting to target Direct Write, only Y-Direction hints are needed. If Hinting is targeted at other rendering environments, such as ClearType GDI, or Black and White, x-Direction Hinting may be needed, and can be enabled.
Show: Anchors: Shows an indicator when points are anchored via a YAnchor or XAnchor command.
Show: Rounding method: Adds an indicator to points to show the rounding method used on those points.
Show: CVTs: Shows a highway shield on any visual hints associated with a CVT.
Show: CVT numbers: Shows the assigned CVT number in the highway shield icon on a visual hint.
Show: Minimum distance: Shows an icon on visual hints when a minimum distance has been set.
Show: Ppem limits: Shows an icon on Align commands when ppem limits are set.
Show: Links and dists: Set this option to show Link and Dist commands.
Show: Shifts: Set this option to show Shift commands.
Show: Interpolates: Set this option to show Interpolate commands.
Show: Aligns: Set this option to show Align commands.
Show: Strokes: Set this option to show Stroke commands.
Show: Moves: Set this option to show Move commands
Show: Deltas: Set this option to show Delta commands.
Now you have VTT setup, the Hinting can begin!
The next post in the series will cover Recommendations and best practices, to achieve great results, using a Lighter Hinting approach, and a reduced set of Hinting Instructions.