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.
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.
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.
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.
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.
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).
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.
I would like to thank Ana for her valuable contribution in reviewing the article and for her suggestions to improve it.