Why monospace fonts for code


misc

This post discusses why monospace fonts (where each character/letter is of the same width) are widely preferred for programming. If you have noticed, monospace fonts are favoured for code, be it IDEs, Github or code snippets on different blogs. As a developer, I’ve always wondered why it matters so much, and what I would miss if I switch to a proportional font (where each character occupies only as much width it needs)

Monospace vs Proportional fonts

Let’s look at a few code snippets which are in a proportional font, and compare them with monospace font. I’ve used Open Sans as an example for a proportional font, and Inconsolata as the monospace font.

1. Alignment

The below two lines have the same number of characters, but their alignment is different. The = operator in both statements are not aligned vertically, and the first line ends at a different cursor position to the second line.

bill = bill.trim()

adam = adam.trim()

It is possible to add some space/tabs and try to align them, but the alignment is not going to be perfect/precise , and it’s a tedious job doing this across many lines of code.

The following is how the same code looks in a monospaced font:

// Notice how the = sign is perfectly lined up and 2 statements end at the same point
bill = bill.trim()
adam = adam.trim()

2. Parantheses, Punctuation and negation(!)

In addition to regular alphanumeric characters, Parantheses, punctuations(like comma, dot, colon, semi-colon) are common occurrences throughout code . These characters are very thin/narrow in proportional fonts, and are easy to miss (Sometimes, I had to squint my eyes to recognize these characters while reading code)

if(!isHigh())   vs   if(!isHigh())

{i(j[k]l)m}   vs   {i(j[k]l)m}

for(int i = 1; i < 10; i++)   vs   for(int i = 1; i < 10; i++)

3. Similar alphabets and numbers

There are some characters that can be easily mistaken for others. For example, capital I and small l, capital O and the number 0. Monospace fonts help distinguish them better (Some of them have dotted zeroes and some have a slashed zero)

O0O0O0   vs   O0O0O0

IlIlIl   vs   IlIlIl

4. Regular expressions

., ,, | are some of the commonly used meta-characters in regular expressions. The following is a simple regular expression for validating a name. As you can see, the second instance(in monospace) looks much more legible compared to the first.

/^[a-z ,.‘-]+$/i

vs

/^[a-z ,.'-]+$/i

5. Ligatures

Different programming languages use combinations of symbols/characters for specific operators. For example, != (not equals) operator in most programming languages, === (strict comparison) in JS. Monospace fonts like Fira Code have ligatures that render these common multi-character combinations as a single character. (For example, ≠ for not equals, ≢ for strict comparison)

Personally, I’m not a big fan of ligatures since I feel it adversely impacts readability. But there are others who feel the exact opposite - It’s a matter of personal taste, in my opinion.

Overall, all of the above reasons make reading/understanding code much more difficult with proportional fonts. In short, code appears so congested, that it’s hard to skim/read without putting some strain on your eyes. Now you know why your beautiful code suddenly looks messy, when you copy from your IDE to a text editor like Notepad (or MS Word) - Default fonts of most text editors are proportional, and not monospace.

Wait - Why aren’t monospace fonts everywhere?

If monospace fonts are so great, why not use it for everything? Why aren’t they preferred for use in books, newspapers, etc. I feel the following are the main reasons:

  1. In monospace font, some characters occupies more space that it needs (characters like i, l and punctuations ). A blob of text in monospace takes up more space than the same text in a proportional font - Print media is usually optimized for efficient use of space and using proportional fonts is a step toward that goal.

  2. Also, regular text content doesn’t have a lot of occurrences of characters like parantheses, negation, etc that need to be distinguished (I’d even argue that punctuations like ., ;, : and , aren’t as frequent in texts as in code - Please feel free to correct me if this is wrong, though).

  3. Vertical alignment is not essential while reading regular text. We interpret regular text as a sequence of words adjacent to each other (horizontally), and it doesn’t matter if words across different lines aren’t aligned with each other.

Conclusion

I am yet to meet a programmer who doesn’t use monospace fonts for code. Not sure if there is any scientific research/proof that definitively says which font is more readable, but this is mostly anecdotal from my experience (and that of my programmer friends). Please do comment your thoughts and preferences on fonts below 😄

See Also