TrueType hinting is the holy grail of screen optimisation. It gives you more control over the screen-rendered shape of your glyphs than CFF/PostScript could. While it is also more complex, it is also file-size efficient, and can be done quite quickly once you get the hang of it.
To hint or not
Before we go into hinting, or ‘instructioning’, as TrueType (TT) hinting is often referred to, let me repeat my hinting mantra: hinting is a technology that distorts your outlines so they better fit on the pixel grid. Let that sink in. Hints are not there to preserve your shapes. On the contrary, hints will stretch, squish and squeeze them onto the pixels of any given low resolution font size. The point is to maintain legibility with a sharper, crisper pixel image—at the expense of shape fidelity. In other words, only hint your font if it makes sense to keep it legible at very low pixel sizes.
If, for the font in question, preservation of letter shapes is more important than legibility, do not hint. Display fonts, script fonts, complex outlines, icon fonts have no need for hinting. Unhinted fonts will make more use of antialiasing, which better preserves shapes, but is too fuzzy to read at very low resolutions.
Let’s assume for a moment that our font’s crispness and legibility might profit from distorting its outlines. Why would we want to do that with TT hints? In short: if the font is intended for use on Windows.
TT hinting may also make a difference on Android devices. However, Android does some on-the-fly optimisation even when the font is unhinted. So if you are catering to Android devices, you may get away with shipping an unhinted font. On Apple devices, TT hinting is not used at all. So if your font is only ever used on Macs or iPhones, do not bother to do hinting.
So, does your font qualify? Yes? Well, then read on.
Automatic versus manual TT hinting
Remember, when you do PostScript (PS) hinting, you would usually let the autohinting algorithm take care of the whole font, and only intervene manually if there is a glyph that does not play out that well. In other words, in PS, you can have both manually and automatically hinted glyphs.
Not so in TT hinting. TT hints are technically more complex and require the setup of additional font-wide information in special tables called CVT, prep and fpgm. In short, autohinting and manual TT hinting create very different versions of these tables. That means that, within the realm of TrueType, autohinting and manual hinting are incompatible, and there is no way to combine both in the same font export.
Don’t get me wrong: you can have both auto and manual hinting information in the
.glyphs file. But when you export, you need to choose which one you want in your TTF. You have the Autohint option on, you get TTF Autohint, and nothing else. It’s off, you get your manual hints, and nothing else.
File size concerns
Needless to say, hinting information takes up space in a TTF file. A quick comparison with a simple sans-serif font delivered these results:
- Unhinted: 15 KB
- Manually hinted, only horizontal hints: 18 KB (+20%)
- TTF Autohint: 24 KB (+60%)
For different fonts, you will get different results, of course. But you will see the same pattern again and again: Firstly, no hinting at all yields the smallest file size. Well, duh, you might say, and you are right, it is no surprise. But it is smaller by a significant margin. So if you are creating the fonts for an environment where hinting does not matter, do consider a set of unhinted font files, and your web admin will love you. Secondly, manual hints take up significantly less space than autohinting, and a big factor is that you can choose to only have your horizontal stems considered in manual hinting, whereas it is more difficult to reduce the size of autohinting.
So smaller file size and better control of what goes into the file is an advantage of manual hints. However, it comes at the price of more work. And having to read through this lengthy tutorial. Sorry about that. But there are two things that make our life a little easier, too. Read on.
This is true for both PS and TT hints: in a multiple master setup, you only need to hint one master. By default, that is your first master, i.e. whatever is listed at the top in File > Font Info > Masters.
In some situations, that may not be the best choice. Imagine the first master is an ultrathin and ultracondensed design. Making the necessary point selections for hinting may become difficult, so you want to pick a medium weight master for your hints. In that case, add a
Get Hints From Master custom parameter in File > Font Info > Font, and pick a master you find easy to hint:
Your first master, or whichever master you pick with the custom parameter, will be your ‘main master.’ It will make a difference, you will see below.
And, you can add the TT hints to the PostScript outlines in Edit view. You do not need to convert to quadratic curves. Actually it is better to keep the PS outlines and let Glyphs do the conversion. The paths will be converted to quadratic curves on export and each font will get the best possible TT curves. And you save yourself the hassle of fiddling around with TT curves and keeping them compatible.
So, to summarize: pick the master you want to hint, and leave your PS outlines as they are.
Font-level hints: zones and stems
Similar to PS hinting, you start by defining stems and zones for each master. The stems and zones you define must have the same number and order in all masters, so values can be interpolated. That should not pose a problem because if you add a stem or zone in one master, it really is added on a font level, effectively for all masters at once. The zone and stem definitions in the main master are the most important ones, as some of the settings can only be taken there.
Glyph-level hints: the Instructor UI
Let’s have a look at the user interface. Back in Edit view, type and open a letter, switch to the TrueType Instructor (tool shortcut I), and pick a style in the preview area at the bottom. Remember to stay in the main master, because that is the only place where it will make sense to add hints.
This is what a glyph will approximately look like during hinting:
Inserting glyph-level hints
OK, so let’s get our hands dirty. Remember, the aim of a hint is to deform the outline so that it better fits onto the pixel grid.
The hints will be applied, in their chronological order, onto the points they are linked to. Order is important because the hints build on top of each other. When a hint is attached to a point on the outline, the point executes the movement implied by the hint, and therefore becomes a ‘touched’ point. After all hints have been applied, the positions of all remaining ‘untouched’ points are interpolated between the touched points nearest in the point index order. This is sometimes referred to as IUP, or the Interpolate Untouched Points instruction.
You can always see what you are doing if you open the Preview area by clicking on the eye symbol at the bottom. When the TrueType Instructor tool (I) is active, the preview will turn vertical, snap to the right edge of the Edit view, and display a waterfall of PPM sizes for the current text in Edit view, using the currently selected style and currently selected rendering intent. You can resize the preview by pulling on the separator line, and toggle it between three pixel zoom levels via the context menu. And you can drag it up and down to bring different PPM sizes within view:
Generally put, to add an instruction, select some nodes and choose a hint type from the context menu or press the respective shortcut key.
These tricks have proven useful in TrueType hinting:
- Keep your cubic PostScript curves. Simply attach your hints to the PS Bézier points. You do not need to convert to quadratic curves or flip path orientations or prepare your outlines in any special way. It would even be counterproductive if you did because in static font exports, PS-to-TT conversion can custom-build the ideal TT path for each interpolation.
- Use the keyboard shortcuts (A, S, D, F, G, E, X) for adding hints and switching orientations. They are all within easy reach of your left hand. In case you have a keyboard that does not share the same layout, i.e., where the middle letter row does not start with ASDFG, it is still the first five keys on the middle letter row. E.g., on a French AZERTY keyboard, the keys are QSDFGEX instead of ASDFGEX. If you use your left hand for the mouse, consider leaving your right hand on the left end of the keyboard.
- Start in the zones, best with Stem (S) or Snap (A) hints.
- Then work your way inwards with Shift (F) or Interpolate (G) hints.
- Avoid Delta (E) hints as much as possible.
- Never add Diagonal (D) hints unless you know what you are doing.
- Use as few hints as possible. Do not overcomplicate the hinting in a glyph.
- In combining accents, start with a Snap (A) on the point that is closest to the connecting
_bottomanchor, and relate the hint to the zone in which the connecting anchor sits. E.g., in
caroncomb, you would snap the lowest point, and choose the x-height from the zone pop-up in the hint’s options.
- In Font View (Cmd-Opt-1), use a Smart Filter to display only glyphs that have outlines, because those are the ones relevant for hinting. Then back in Edit view, navigate within the glyphs selected in Font View with Shift-PageUp and Shift-PageDown. On the compact MacBook keyboards, press Fn-Shift-Left/Right Arrow.
- When testing, forget GDI ClearType. Focus on Grayscale and DirectWrite.
More custom parameters
Once you get deeper into TT hinting, it can become pretty… well, special. So here are some extra parameters for your TT geekery:
TTFOvershootSuppressionBelowPPM: with it, you can set a pixel size up to which overshoots are reliably flattened out. In combination with properly set TTF Zones, you have pretty good control over your TTF’s appearance.
TTZoneRoundingThresholdin Font Info > Font or Font Info > Styles (the latter takes precedence in static fonts, of course): controls the likelihood of a positive zone being pushed up a pixel. It takes a small decimal number as value, typically something around 0.1 or 0.2. The value is added to any positive zone position before rounding, and added twice to the x-height zone (the one named xHeight in the TrueType zones). If you do not set it, a default of 0.09375 is assumed.
Example: At a certain font size, the smallcap zone ends up at 6.45 pixels, and the x-height at 5.25 pixels. Without any change, the smallcap zone would round and snap to a height of 6 pixels, while the x-height would end up with 5 pixels. But you set a TTZoneRoundingThreshold of 0.2, so the smallcap height ends up at (6.45+0.2=6.65≈) 7 pixels, and the x-height at (5.25+2×0.2=5.65≈) 6 pixels.
TTMinimumDistancein Font Info > Styles: the default is 0.25, which means that any hinted stem will be drawn with a minimum length of a quarter pixel, no matter which PPM size, if it has a stem hint applied to it. If you are not happy with the default of 0.25 pixels, you can set your own minimum distance (in pixels) with this parameter. This value kicks in at small pixel sizes, where small parts are in danger of disappearing.
Prep Table Assembly,
Fpgm Table Assembly,
CVT Table: Glyphs automatically creates these parameters when you import hinted TTFs. They contain the existing hinting as assembler code or a mere value list, respectively. This is only useful if you want to fix a few things in a TTF but not tamper with the existing TT hinting. Technically, this is the third kind of TT hinting Glyphs supports.
gasp Tablesets the ‘grid-fitting and scan-conversion procedure’ for TrueType fonts. It controls the two PPM thresholds at which the recommended on-screen rendering behaviour changes. The
gasptable contains rendering recommendations for both a traditional grayscale and a ClearType subpixel renderer. However, keep in mind that a renderer may ignore the data stored herein. The default threshold sizes are 8 and 20 PPM. Because there are two thresholds, three ranges can be differentiated:
- no hinting & symmetric: Until the first threshold size, no gridfitting is applied, and text is rendered with antialiasing wherever possible. ‘At very small sizes, the best appearance on grayscale devices can usually be achieved by rendering the glyphs in grayscale without using hints.’
- hinting & asymmetric: Between the two threshold sizes, the renderer is recommended to apply gridfitting and suppress grayscale. ‘At intermediate sizes, hinting and monochrome rendering will usually produce the best appearance.’ In ClearType, the matter is handled asymmetrically, i.e., vertical gridfitting is applied, while horizontally, subpixel rendering is used.
- hinting & symmetric: Beyond the thresholds, the rasterizer is instructed to apply gridfitting and render the shapes in grayscale. ‘At large sizes, the combination of hinting and grayscale rendering will typically produce the best appearance.’ The ClearType rasterizer is instructed to apply symmetric smoothing, i.e., to use anti-aliasing in y direction in addition to horizontal subpixel rendering. ‘At display sizes on screen, […] this new improvement of the Windows font renderer produces smoother and cleaner-looking type’ (source: Now Read this: The Microsoft Cleartype Font Collection, Microsoft 2004, p. 14).
Keep Overlapping Componentsand
Keep Transformed Components: technically, TrueType supports overlapping and distorted (scaled, slanted, mirrored and rotated) components. Not necessarily directly related to hinting, but more to TrueType in general, it allows you to keep your file size small, so it may make sense for webfonts. Warning: not every environment can handle transformed components, so use these parameters wisely and test extensively.
Useful settings, scripts and Plug-ins
Right-click your mouse anywhere on the canvas to open the context menu.
If the TrueType Instructor tool (I) is active and some points are selected, you will see options for adding hints appropriate for your current selection. No matter what your selection is, you will see some extra TT-related options:
Autohint: will attempt to guess Stem (S) and Snap (A) hints for the current glyph. Cannot handle Shift (F), Diagonal (D) or Interpolate (G) hints. Intended as a starting point, but no more. Result is not always a valid hinting and you may receive an error that says, There was a problem compiling TrueType instructions. It can be a good start though, and you can batch-process many glyphs at once.
Remove hints: will clear all TT hints in the current glyph. For more refined hint removal, see the script below.
Show Preview Address: will start a web server and display its URL with the current IP address:
Paste it in web browser, preferably in your Windows virtualisation, to see a PPM waterfall of the current Edit view text, with the currently selected style, refreshed every other second:
Show Point Indexes: will display on-curve point index numbers of the resulting outline. There is a hidden setting called
TTPreviewAlsoShowOffCurveIndexesthat displays all point index numbers, including off-curves:
You can either run
Glyphs.defaults["TTPreviewAlsoShowOffCurveIndexes"]=Truein Window > Macro Panel. Or, use the mekkablue script App > Set Hidden App Preferences:
Scale Preview options: Don’t Scale Preview, Scale Preview 2×, Scale Preview 4×. Sets the pixel zoom for the preview in Edit view.
In order to remove hints more specifically, use the mekkablue script Hinting > Remove TT Hints. It allows you to remove hints of a certain type and orientation:
The mekkablue scripts Hinting > Set TT Stem Hints to Auto and Set TT Stem Hints to No Stem switch all Stem (S) hints in selected glyphs to the respective stem option. No Stem makes for a better appearance of variable fonts in Adobe apps, whereas Auto gives you sharper rendering, which usually looks better in Windows Office apps.
Also in the mekkablue scripts, there is the script Test > Webfont Test HTML after you exported your font as webfonts. The script will write an HTML for all enabled styles in the current font into the most recent webfont export folder, and open that folder for you in Finder. Makes it easy to test the font in a Windows browser.
Update 2020-09-16: added the words ‘are meant’ in the Position & size section and corrected a few typos. Added the missing words ‘number in between’ in the TrueType BlueFuzz section. Other minor corrections and rewrites.
Update 2020-11-03: corrected minor typos and minor rephrasing (thanks Nathalie and Ben!).
Update 2022-07-29: updated title, minor formatting.