Choose Your Font for Coding

We developers often spend a great deal of attention choosing our tools: computer, editors… Yet, we often fail to see the gain of choosing an appropriate font.

Here is some food for thoughts on this topic, and some of my favorite coding fonts.

Why a Good Font Matters When Coding #

Rather than long debates, let me give you one example where the wrong font may hinder you from finding the cause of a bug (example is in Java):

1System.out.println(2147483647 + 101); // Prints "-2147483548"
2System.out.println(2147483647 + 10l); // Prints "2147483657"

Those two lines don’t output the same number. The first line actually outputs a negative number.

Now, if you paste this in your IDE and can’t spot the difference right away, the font you’re using may not be the best for your job.

I’ll give here the explanation of this brain teaser. If you spotted it immediately or are just uninterested, just skip to the next part.

So, what’s 2,147,483,647?

It’s 231 − 1, the largest number that can be stored in a Java int (Java’s int uses 32 bits, but the first one is for sign).

In both cases, we add a number to this int, but in the first case, it becomes negative (−2,147,483,548), while in the second, it becomes a higher number (2,147,483,657). The difference is, of course, the number we add.

On the first line, we add 101 (ending with the digit 1), causing a numeric overflow: the sum is higher than what the int can contain. The leftmost bit is changed, but that’s the sign bit. As a consequence, the JVM incorrectly interprets the result as a negative number when printed.

On the second line, we add 10, followed by a minus L1 to change this number’s type to long. Java then deduces that the sum of the two numbers is a long too, thus benefitting of more bits to store its value and avoiding the numeric overflow error.

And that’s a criterion for choosing a good font for coding: all characters should be easily recognizable.

What You Should Look for in a Font When Coding #

As you’ve seen, some debugging problems come from reading difficulties. We use several symbols that may look like each other, and we need to distinguish them easily. This is especially important when coding since, unlike with literary language, our brain can’t always deduce easy corrections from context.

In my opinion, you should at least ensure these criteria when looking for a coding font:

  • It should be monospaced, which means all glyphs should have the same width. That sounds obvious since almost anything code-based (editors, terminals…) uses such a font. Yet, remembering the basics is always useful. A monospaced font will help you when you’re looking for an error in long pieces of code. Plus, can you imagine indentation in a variable-width font? If tabs and spaces are mixed, you’re on the highway to hell![^indentation-mix]

  • It should obviously avoid ambiguous symbols. Some characters are known to be easily confused for other. When it comes to reading, our brain is quite powerful at filtering and deducing. For code, however, that’s a whole other story and those biases can become an obstacle rather than help (“Many digits, so that’s a number. I won’t see the letters that hide among them."). It’s why your font should help you disambiguate similar-looking characters, such as:

    • the digit 1, the minus L and the capital i (1, l, I);
    • the digit 0 and the capital o (0, O);
    • rarer but possible, the digit 5, the capital s and the dollar sign (5, S, $).
  • Avoid serifs2. I once read that fonts with serifs are great for paper, but sans serif fonts are better for screens3. As always, don’t trust everything you see on the Internet, as this criterion is more of a personal preference. I personally like clean, not overloaded fonts (or design more generally, for that matter). So, goodbye Courier New!

  • You should like it. No, really, that’s an objective criterion. If you’re a professional or passionate coder, you’ll spend hours confronted with this font. You’d better make sure it doesn’t get under your skin or your job/passion will just become a bit more hellish.

My Selection #

OK, I’ve given fonts a bit of thought and I’ve made my selection. I’ll give my favorites below, by order of decreasing preference.

As a matter of fact, this is the font stack I chose for displaying code excerpts on this website. This means that, if one of these fonts is installed on your computer, your browser will use it to display code.

Fira Code #

Fira Code matches all the supplied criteria above. It also tries to answer a problem coders don’t know they have. From their documentation:

Programmers use a lot of symbols, often encoded with several characters. For the human brain, sequences like ->, <= or := are single logical tokens, even if they take two or three characters on the screen. Your eye spends a non-zero amount of energy to scan, parse and join multiple characters into a single logical one. Ideally, all programming languages should be designed with full-fledged Unicode symbols for operators, but that’s not the case yet.

So, as a solution, the author took Fira Mono, developed by Mozilla, and included a set of ligatures for the most common programming combination. In editors supporting ligatures, those sequences are thus replaced with single characters.

Example of code using Fira Code

That looks nice. I don’t know if that’s easier to parse than characters sequences when you’re used to the usual way of writing and reading it. If you don’t like it, you can still deactivate the ligatures and yet use the font.

Another nice feature of this font is that it provides some stylistic variants. For instance, you can customize the way you display the dollar sign, the ampersand, the “at” sign, whether the 0 is barred or dotted… All these variants are represented below.

Visual preview of available stylistic sets
Website
https://github.com/tonsky/FiraCode
Repo
https://github.com/tonsky/FiraCode
License
SIL Open Font License v1.1
Documentation
Installation instructions and stylistic sets enabling instructions

Monoid #

Monoid is another coding font with ligatures that I discovered some years ago. It’s a bit different from Fira Code because it’s semi-condensed and that’s… Well, let’s the example speak for itself.

Example of code using Monoid

Like with Fira Code, stylistic alternates are available, offering even more choice, though the documentation is scarcer.

I discovered this font in 2015. Around that time, I’d also discovered iconic fonts such as Font Awesome. The author had the idea of creating ligatures for each Font Awesome icon. Thus was born Monoisome. I don’t know which version of Font Awesome was used, though, since this variant of Monoid has not been updated since 2018.

Website
https://larsenwork.com/monoid/
Repo
https://github.com/larsenwork/monoid
License
MIT License and SIL Open Font License v1.1
Documentation
README

Ubuntu Mono #

This will be the last font I’ll propose you. I love at least one thing about working on a fresh install of Ubuntu: each time you expect a monospaced font, Ubuntu Mono is the one.

It does not come with elaborate ligatures or other features, but it’s clean and it matches all my selection criteria, as you can see in the example below.

Example of code using Ubuntu Mono

Ubuntu Mono’s a great go-to solution if you’re looking for something simple and efficient!

Website
https://design.ubuntu.com/font/
License
Ubuntu font license v1.0
Documentation
Wiki documentation

  1. Yes, conventions often recommend using a capital L to avoid this issue. ↩︎

  2. If you don’t know what serifs are, this article is great and gives advice I didn’t follow when designing this website’s font stack. ↩︎

  3. This article confirms this, not as a general truth, but as a trend with its exceptions. ↩︎