Hinting: typography on a pixel grid

You know it already: on a computer, a picture is made out of pixels, little squares that laid out together form an image.

It’s very easy to draw a vertical or an horizontal line this way: one just has to follow the natural alignment of pixels. But it’s more complicated for a tilted line or a curve. The drawing cannot match the natural pixel grid and a stair-like pattern will appear: that’s what’s called aliasing.

What’s anti-aliasing?

To counter that unattractive pattern, one can use a smoothing process called anti-aliasing. This method uses greyscale gradients to ease the color transition. That way, a black line on a white background will be drawn using different shades of gray: the more the line covers a pixel, the darker it is drawn.

This process produces a slight amount of blur but gives a much smoother drawing.

posts/font-hinting-before.jpg

Aliased and anti-aliased rendering of the letter N

Anti-aliasing and text rendering

Text legibility on a calculator is obviously a major concern. After a comprehensive benchmark, we settled on the Source Code Pro font:

  • It is a fixed width font, especially adapted for programming and scientific environments
  • It has a strong dimorphism: impossible to mix up a capital O the 0 digit.

The shape of a letter — that’s called a glyph — can be made out of curves and lines, but those have no reason to match the pixel grid. Which gives us two options: either a jaggy display, or a blurry one.

Hinting, the smart compromise

Anti-aliasing is very useful, but in our case we can do better. Let’s take the example of a letter with straight edges such as an N. If we draw the original Source Code Pro glyph at size 8, edges of the letter will most likely fall inbetween pixel rows, hence producing a blurry image. But what if we slightly tweaked the glyph shape to make it perfectly fit the pixel grid?

posts/font-hinting-after.jpg

Before and after hinting the font

That’s what hinting is all about: changing the glyph shape to make it perfectly match the pixel grid. As you can see, hinting adds an subtle amount of blur when needed (curves, tilted lines) and keeps the contrast in control. That’s why we’ve manually reworked every single glyph used in our calculator this way. The result is an optimal text rendering: highly contrasted yet easy on the eye.