Sam Howard Sam is a developer at IDRsolutions who specialises in font rendering and conversion. He's also enjoyed working with SVG, Java 3D, Java FX and Swing.

What is font hinting? The basics explained.

1 min read

In the early days of fonts, each glyph was stored as a bitmap at a range of sizes. Drawing it was a simple case of picking the right sized image of the glyph and putting it on the screen. This let designers add and remove details at various sizes to make the text readable.

A very simple bitmap font
A very simple bitmap font – note the disappearance of the serif (the ‘feet’ on the bottom of the stems) in smaller versions.

Most fonts are now stored as outlines which can be easily scaled. This means fonts can be rendered at any size, but without additional features it also would mean that the font’s designer has very little control over how the font appears at different sizes. You’d be presented with a choice: add details which look great when displayed at larger sizes, of lose out on the details so that they don’t confuse the glyph at lower sizes. Even with simple outlines it can be hard for font renderers to know which pixels should be ‘on’ and which should be ‘off’. The standard way of choosing should be on is whether the centre is inside the glyph outline, but this can cause some pretty big problems:

An outline of an 'M' without hinting showing which pixels would be turned on and off - the results are not good.
This in no way resembles an ‘M’!

Luckily, that’s where hinting – otherwise (and perhaps more helpfully) known as grid fitting – comes in. There are three methods font technologies use for this, but both would end up with something like this:

An outline of an 'M' after hinting, which means that the pixel version is readable.
Much better.

Of course, it’s all a little more complex than this these days, since most font renderers now use anti-aliasing and sub-pixel rendering. (I won’t go into that here, but it’s pretty cool.) So, the three methods:

Automated Hinting

Some font renderers are now so good at guessing how a glyph should look at certain sizes that they ignore any hinting data provided entirely. This is particularly noticeable on OSX.

Descriptive Hinting

PostScript fonts use values to describe typical features of the font, and then add operators into the glyph description which tells the renderer where stems are. The renderer then uses this information to render the glyphs as well as it can, keeping stems solid and separate, making sure the bottoms and tops of glyphs line up, and making curves appear rounded if possible and flat if not.

Instructed Hinting

TrueType hints come in the form of little programs which move the points around based on the point size and resolution. This allows the designer complete control over how the outlines react to different sizes. This system has also been used by some fonts to construct new glyphs by combining other glyphs which are just brush strokes and then shifting and reshaping them. We’ve even got a video of that all happening in our very own TrueType hinting debugger.

We’ve been working hard to make sure that all of our converted fonts have good hinting data so that they’ll look great in browsers. Why not try it out and see what it can do?

This post is part of our “Fonts Articles Index” in these articles we explore Fonts.

IDRsolutions develop a Java PDF Viewer and SDK, an Adobe forms to HTML5 forms converter, a PDF to HTML5 converter and a Java ImageIO replacement. On the blog our team post anything interesting they learn about.

Sam Howard Sam is a developer at IDRsolutions who specialises in font rendering and conversion. He's also enjoyed working with SVG, Java 3D, Java FX and Swing.

2 Replies to “What is font hinting? The basics explained.”

  1. At last! NOW I know what Font Hinting is! Great, interesting and easy to read article. Thank you very much!

Leave a Reply

Your email address will not be published. Required fields are marked *

IDRsolutions Ltd 2019. All rights reserved.