If You're Learning to Code, Use a Good Font

Fonts are a funny thing for developers, since from a programmer perspective a good font is something that you should never actually notice; in other words it should be designed in such a way that it never interferes with your job.

There are a few well known cases where the font used for programming can make all the difference, but those new to development may be unaware of such things, or have simply never given it any thought. I'll quickly cover what I think are the three most fundamental requirements.

Fixed Width

The font should be fixed width, i.e. every character has the same width, from 'W' to '.'. This makes it far easier to read code as the structure is readily apparent, and when you have similar lines of code a typo can be far easier to spot. For example, in the following code the first and third lines almost line up despite a missing character in the third.

something.i = inside.a & 5;
something.j = inside.b & 3;
something.k = insde.c & 3;

Sure this will be an easy bug to fix, but chances are you'd never even write it in the first place when using a fixed-width font as it stands out like a sore thumb:

something.i = inside.a & 5;
something.j = inside.b & 3;
something.k = insde.c & 3;

O and 0h Wait

A zero should be easily distinguishable from both a lower case 'o' and an an uppercase 'O'. In the font used for this site the differences between 0, o, and O are not that great. In languages such as JavaScript that are untyped, confusing these characters could easily result in bugs. A font that slashes or dots the zero is very much a desirable thing.

All Those Lines

There should be no confusion between 1, 'L', 'I', 'l', 'i' and '|'. I strongly suspect that your read that third character as a lower case 'L', but it's actually a capital 'i'; I'm mixing the cases here to make this easier to parse. A good font for programming should remove all confusing between these characters. Those same characters in the same order:

1, L, I, l, i, |

The fixed width font I used on this blog does a reasonable job of differentiating those characters, at least the only simple line is the pipe.

My Choice

I've used various fonts for coding over the years. For a long time I used proggy_fonts, and I have also utilised Monaco quite heavily which comes with Macs. My inspiration for this post however came about because I recently discovered mononoki by Matthias Tellen, and it's quickly become my favourite font to use for development. I've been using it for a few months and there is nothing about it that I don't like.

I'm using it on my Mac, on Windows, in Sublime and in Terminals. It does a great job of differentiating characters and looks great too. There is something supremely satisfying about the asterisk on a crisp, retina-style display. I highly encourage you to give it a try!