How does TrueType Hinting work?

TrueType hinting use a program inside the TrueType file to modify the outlines for fonts. This allows it to do clever things like optimise for small font sizes.

TrueType hinting takes the points stored in a glyph’s outline and moves them around by running a program stored along with the points. Originally this was used for Grid Fitting – making text readable at small sizes – but it found a secondary use in that some fonts store a set of brushstrokes, then combine them to form a glyph. The hinting program is then used to change the brushstrokes to be the right shape and size.

All of this happens within a complex TrueType Virtual Machine, which has to know how to execute all 122 instructions and their many variations. Some of the documentation is a little vague, so often things don’t work quite right first time, and the only way to fix it is to jump right into the code and see what’s going on! That’s why we built a fully featured debugger – we can step through the glyph’s program seeing the whole state of the TrueType VM on a big screens.

Obviously when rendering our text normally the hinting for every character happens faster than you can blink, but we’ve recorded a video of our Debugger going through a single glyph and added some comments so you can see what goes on.