I only switched from the default font when I switched from Sublime Text to Visual Studio a few years ago. That’s when I wrote the original blog post about 5 monospaced fonts with coding ligatures. I was customising Visual Studio’s theme and wanted something different. I wanted to make the setup more “mine.”
We’re in the golden age of fonts, especially open-source ones. Many more monospaced fonts with coding ligatures have sprung up since that blog post so it’s time to revisit and examine five more.
I’ll compare them to Fira Code, a popular choice among programmers which makes it a perfect baseline for such comparison. This way we’ll see how the fonts I picked compare in legibility, x-height, ligatures, and what they look like in action.
What are ligatures? They’re specially designed characters in a font that usually combine two characters into one, to prevent collisions (Fig 1).
Fira Code is based on Fira Mono from Mozilla. It has a regular x-height, many coding ligatures, and scores well on legibility. That’s what makes it an even better baseline for comparison. This is what it looks like in action (Fig 2).
Larger x-height is generally considered to have a positive impact on legibility for small font sizes. This certainly applies to fonts for coding so x-height will be one of the major factors in my analysis.
Fira Code’s x-height is what I would call “regular” (Fig 3). Not small, not large, somewhere in between. This is another property that makes it a good baseline to compare other fonts to.
The legibility of a font can be quickly evaluated by taking a close look at characters 1lI O0. The designs of these characters need to be distinct, which in the case of Fira Code, they are (Fig 4).
When it comes to coding ligatures, Fira Code probably has the widest range. Here are some of the most prominent ones (Fig 5).
Ok, we have the baseline established, now let’s take a look at new monospaced fonts with coding ligatures.
Commit Mono is described by its authors as _an anonymous and neutral coding font focused on creating a better reading experience. _It’s a variable font, highly customisable through its many Open Type features.
It even comes with “Smart kerning.” Kerning is crucial for readability but it has been impossible to combine with monospaced fonts so far. “Smart kerning” slides letters into a better position while preserving the monospacing. This makes the Commit Mono a highly readable monospaced font (Fig 6).
Here’s what Commit Mono looks like in action (Fig 7).
Commit Mono doesn’t have a huge range of coding ligatures but it has the basic ones. They look nice, but those in Fira Code look nicer. Have a look for yourself (Fig 8).
Commit Mono’s x-height is just slightly larger than that of Fira Code (Fig 9). As I take a closer look, I notice how well-spaced the Commit Mono’s characters are. Is that the “Smart kerning” in action?
Even as I closely inspect the characters 1lI O0 I noticed a lot of similarities between Commit Mono and Fira Code. Take a look at the lowercase “l” and uppercase “I.” They look almost identical (Fig 10).
Anyway, Commit Mono’s legibility is ok, it’s easy to tell the key characters apart.
Cascadia is Microsoft’s new default monospaced font. It comes bundled with Windows Terminal and is the new default option in Visual Studio. So if you use the latest version of VS and haven’t changed your default font, perhaps you’re using this one but aren’t aware of it?
The italic version also has an alternative, cursive style available which looks great for comments in code. This is what it looks like in action (Fig 11).
Cascadia Code supports many coding ligatures and even arrows. They’re somewhat similar to those in Fira Code, although I think those still look a bit better (Fig 12).
Cascadia’s x-height is almost exactly the same as that of Fira Code, just slightly smaller. I wonder if the author took Fira Code as the basis when they started working on Cascadia. But if you take a closer look at the characters you’ll see they’re quite different. Cascadia has a lot more character but still looks great (Fig 13).
When it comes to legibility Cascadia scores similarly to Fira Code. The character designs are distinct enough to separate them easily in text-heavy situations like code generally is. The “O” and “0” characters are quite similar but the latter has a dot inside it to make it clear that it’s a number and not a letter (Fig 14).
Cascadia generally looks heavier and has less contrast than Fira Code. This is a design feature that I really liked in JetBrains Mono in the original article.
As mentioned earlier, Cascadia supports a cursive variant of the italic style (Fig 15). This is often used for comments in code to help visually separate them from the actual code.
Its authors describe it as an open-source monospaced font with optional semi-connected cursive italics and programming symbol ligatures. It’s slender, crisp and narrow, with a large x-height and clear punctuation, making it legible and ideal for code. It comes in seven weights and Roman, Italic and Oblique styles.
Unlike Cascadia, the cursive style isn’t optional with Victor Mono. It’s how the Italic style is designed. Here’s what it looks like in action (Fig 16).
Victor Mono also has a good range of coding ligatures, their designs remind me of those in Fira Code. But Victor Mono has a larger x-height and is generally thinner so the ligatures reflect that (Fig 17).
Based on the author’s description, I expected Victor Mono to have a really large x-height, compared to Fira Code (Fig 18). It is larger, but there are monospaced fonts out there that have even larger ones. Monoid from the original article comes to mind.
The characters 1lI O0 look nice and distinct. Having a closer look now it’s clear how much lighter Victor Mono is (Fig 19). This is something that looks nice on high-resolution displays but I wouldn’t use it on my external monitor. I have to say that the font is very easy on the eye as I test it in my code editor (on my MacBook’s Retina screen).
This is macOS’ default monospaced font but “ligaturised.” This means that Apple’s SF Mono was taken and the ligatures from Fira Code were added with the Ligaturizer. It’s a tool to do exactly that. So if you already picked your favourite font and it doesn’t have ligatures you can still add them with this tool. This is what SF Mono looks like in action (Fig 20).
The ligatures are the same as those in Fira Code but scale-corrected (fig 21). This means that they fit nicely with the font they were added into. I take a closer look and notice that the designs are exactly the same but the size isn’t. Those in Fira Code seem slightly larger.
The x-height of SF Mono is almost the same as that of Fira Code (Fig 22). I can barely see a difference — SF Mono’s is maybe just a tiny bit smaller. That explains why the ligatures are just slightly smaller too.
SF Mono’s legibility is ok (Fig 23). Something that stands out to me is the number 1 being quite similar to the lowercase “l.” I think these two could be confused. Other than that, everything looks fine.
Recursive is the last font on my list to examine but it may be the most impressive one. It’s a font with five variable properties: weight, slant, mono, casual, and cursive. This means it’s highly customisable.
The mono, causal, and cursive variable properties are the more interesting ones. Mono changes the font from a completely monospaced to a proportional (normal) font (bottom example in Fig 24). The Casual one makes the font look almost like the script style (third example in Fig 24). It’s the opposite of the Linear setting. The last one is cursive which changes some of the characters to the cursive variant (second example in Fig 24).
Here’s what Recursive looks like in action (Fig 25).
Recursive has a good range of coding ligatures but some look a bit off (Fig 26). The arrows, for example, don’t look that good.
Recursive’s x-height also looks just a tiny bit smaller than that of Fira Code (Fig 27). That’s ok because Fira Code’s x-height is well-balanced for long-form reading.
Recursive also has a potential legibility problem, as SF mono does (Fig 28). The number “1” looks similar to the lowercase “l.” They could be confused with each other. Other than that, Recursive’s legibility score is ok.
Recap & comparison
Here’s a quick recap of all the fonts and their features:
|Fira Code||Widest range||Regular||High||/|
|Commit Mono||Basic range||Regular||High||Smart kerning|
|Cascadia||Wide range||Regular||High||Cursive style|
|Victor Mono||Wide range||Slightly larger||Ok||/|
|SF Mono||Widest range||Slightly smaller||Some concerns||/|
|Recursive||Basic range||Regular||Some concerns||Variable cursive style|
And here’s a gallery of all of them for easier comparison:
- Fira Code
- Commit Mono
- Victor Mono
- SF Mono
Should you even use coding ligatures?
Matthew Butterick from Practical Typography wrote an article sharing his strong-held opinion against coding ligatures. He even argues that using them isn’t a matter of taste because they can cause confusion. Butterick brings up two main reasons against using coding ligatures: They contradict Unicode, and they’re guaranteed to be wrong sometimes.
Ligatures in programming fonts are a terrible idea.
— Matthew Butterick (Source)
Should you use coding ligatures? I think this is a personal choice after all. I use them, and I love them. But I’m not a hardcore programmer and I work on my code by myself. Make sure you read Butterick’s article to make an informed decision, especially if you collaborate on code with others.
To get back to the question from the beginning of this article — which font do you use for coding? My favourite remains JetBrains Mono. What do you think about the ones in my examination? Did you find your new favourite one? Did I miss any? Let me know in the comments below! 👇