Sam Howard

Sam is a developer at IDRsolutions who mostly specialises in font support and conversion. He’s also enjoyed working with Java 3D, Java FX and Swing. His other interests include music and game design.

What is font hinting? The basics explained.

2 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.

If you’re a first-time reader, or simply want to be notified when we post new articles and updates, you can keep up to date by social media (TwitterFacebook and Google+) or the  Blog RSS.

Sam Howard

Sam is a developer at IDRsolutions who mostly specialises in font support and conversion. He’s also enjoyed working with Java 3D, Java FX and Swing. His other interests include music and game design.

Java 10’s Experimental JIT Compiler explained in 5 minutes

This month’s theme is Java 10 to tie in with the release of the new Java version. Despite being only 6 months since Java...
Georgia Ingham
1 min read

Java 10 – An Introduction

  Java 10 is out now, just a few months after the major Java 9 release brought us modularity, jshell and the G1 garbage...
Bethan Palmer
1 min read

How to improve your code using SonarQube

Code quality is arguably one of the most important parts of Software Development – badly written code can cost time and money as you’ll...
Rob
3 min read

Leave a Reply

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