This article is part 3 of a series I’m writing about Monoid. I recommend you start by reading part 1 + part 2 if you haven’t already. I’m @larsenwork on Medium, Twitter and GitHub.

The Problem

Monospaced fonts consists of letters that aren’t “naturally” equal width — e.g. w and i.

This results in unequal spacing between letters which decreases the readability.

Top to bottom: Monoid, Pragmata Pro, Fira Mono and Source Code Pro

The Conventional Solution

What monospaced fonts do is to either ignore it (uncommon) or to make narrow letters wider and wide letters narrower to even out the difference.

The wide letters get squeezed and the narrow letters get slab serifs. The problem with adding slab is it reduces distinguishability discussed in part 2.

Notice how — in the example above — the l and I in Pragmata Pro looks fairly similar. The same can be said for 1 and I in Fira Mono and Source Code Pro.

There is also a limit as to how much you can squeeze letters such as w and m.

Class Based Contextual Positioning

What I’m trying to do is slightly different but not entirely new.

Class based adjustment in fonts is standard in “normal” fonts where kerning is almost always added based on letter classes — i.e. consider the class @A containing e.g. À, Á, Â, Ã, Ä and Å. Then you’d almost allways want this to happen: When @A comes before V then reduce letter spacing by x points.

The show-stopping problem for this approach in Monospaced fonts is that kerning also removes the monospace. In the example above every letter after V will be shifted to the left.

What I’m doing instead is changing the positioning of the letters leaving the total width and thus the positioning of every following letter unchanged.

This may sound a bit tricky but it really isn’t. Consider “Miami”. If you write that with a monospaced font it will look a bit like Mi ami instead of Miami. You can describe the letters like this:

Miami = wide+narrow+medium+wide+narrow

To fix Miami you want to move the first narrow letter to the right and the medium letter to the left. You’ll hopefully agree with me that the spacing in the second screenshot is better and it’s easier to read.