The best fonts for programming

Programming fonts

Those of us who work in front of a text editor programming for many hours a day need to select a good typeface.

This is a topic in which I am a total beginner and for any question related to typography, the ideal candidate to solve all kinds of doubts is the greatest reference in Spanish-speaking design, typography and WordPress: Ana Cirujano.

Fonts for programming

When you start programming, you don’t even notice the default typography included in your editor. But as time goes by, you demand a little more, that you can distinguish the letter ele from the one and the capital I, the zero from the O, that it is pleasing to the eye and perhaps you will discover the ligatures and that you can activate or deactivate them as you wish in the editor.

Readability
Legibility monospace

Ligatures make two or more fonts look together as one font, for example comparisons of two equal signs, three equal signs, the greater than and equal sign, among many other combinations.

Not all fonts that support ligatures have all possible ligatures.

Jetbrains Ligatures
Jetbrains Ligatures

Monospaced

Monospaced fonts are preferable for programming, since each character occupies the same width. This helps maintain the alignment and readability of the code, so I will focus on these fonts.

My favorites

Ever since I discovered ligature fonts, these have been my favorite. Some programmers prefer not to use them. It is a matter of habit and personal taste.

One of the typefaces that I fell in love with years ago and became part of my editor, even before Visual Studio Code (VSC), is Fira Code with SIL Open Font License 1.1.

Fira Code

I have been using this typeface for quite a few years now, until I started looking for alternatives and came across JetBrains Mono, which is also developed under the SIL Open Font License 1.1.

This typeface has 142 ligatures and is available in 8 different weights and italic variants.

And these have been my main typefaces lately, alternating between them for editor and console.

Until last week, looking for new options, I decided to buy the Dank Mono typeface.

Dank Monkey

Although I initially found it appealing, it has not survived in the editor for even a couple of hours. It comes with 26 ligatures, making some very common ones such as => or <= unavailable. It is a font that I like for code captures, but not for intensive work in front of the screen.

For me, it would be more of a posture typeface than a working typeface (I’m sure this sentence will not please more than one, my apologies).

Monaspace: the ultimate?

And it wasn’t even 24 hours after I bought Dank Mono that I found a message from Github Next announcing Monaspace on Twitter (we’ll leave X for another time).

Monaspace

Here I have already put the horns definitely to my always faithful Fira Code, I have fallen in love with this typeface and its future possibilities.

Monaspace is a superfamily with 5 sources (Neon, Argon, Xenon, Radon and Krypton) and three variable axes.

We could mix fonts in the same sentence, which would be ideal to use as regular body Neo and Radon for text strings, or as they suggest on their page to show Copilot suggestions with Krypton instead of ghost text (dimmed).

Differentiate parts of the code not only by color or thickness, but also by the use of different combinable fonts. In addition, they talk about the problem of monospaced typefaces in which basically every typeface occupies the same space whether it is a w or an i and how they have solved/compensated it with a texture healing technique.

Let’s not get excited, at the moment VSC doesn’t allow us to mix fonts, but being VSC, Copilot, Github, Monaspace all Microsoft products… How long do you think it will take to get the possibility? We can see the following note in Github:

Note: Variable fonts are not yet well-supported in VS Code, and it is not yet possible to mix multiple fonts. Stay tuned, we’re talking with the VS Code team about it!

https://github.com/githubnext/monaspace

This typeface has 140 ligatures divided into 10 sets and we can activate/deactivate them on the basis of these sets.

If we want to activate all of them, we will use the following line in our configuration file (the line editor.fontFamily is to activate one of the fonts, the first one will be the one used):

"editor.fontFamily": "Monaspace Neon, Monaspace Argon, Monaspace Xenon, Monaspace Radon, Monaspace Krypton",
"editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08', 'calt', 'dlig'",

While VSC does not allow multiple fonts in the same text, it at least allows us to select different fonts for editor, contextual help or console. In the following example I have used Monaspace Neon for the code and Monaspace Radon for the console, but the future possibilities are very interesting.

Monaspace Fonts

I would like to thank Ana for her valuable contribution in reviewing the article and for her suggestions to improve it.

Join my superlist ;)

I won't share your details with anyone or bombard you with emails, only when I publish a new post or when I have something interesting to share with you.

Leave a Comment