Use font ligatures to improve code readability

This blog post will introduce font ligatures and how developers can benefit from them.

But first of all what is a font ligature?

From Wikipedia

In writing and typography, a ligature occurs where two or more graphemes or letters are joined as a single glyph. An example is the character æ as used in English, in which the letters a and e are joined. The common ampersand (&) developed from a ligature in which the handwritten Latin letters e and t (spelling et, from the Latin for "and") were combined

The main benefit of using font ligatures is that some commonly used character combinations (eg. greater than, not equal, etc.) are presented in a more distinctive and clear way:

The first line shows normal characters that we use every day while coding.

The second one adopts a font ligature and the same characters are displayed differently. They look like if we would draw them by free hand on a paper.
Typically the characters ≥ and ≠ tend to be more readily understood than >= and != (also because they are displayed this way on Math books 📗 and we are already used the them).

There are different code fonts with monospaced ligatures (below just some of them):

• Hasklig  
• Fira Code  
• Monoid  
• Iosevka

In this article we will focus on how can we install and use Fira Code in Visual Code. However the list of editors supported by Fira Code is very wide. You can install it in your favourite editor:

The screenshot above shows only part of the list...
 

Donwload Fira Code

First of all we have to download and install the fonts (.ttf files) from the Fira Code repository.

We can also use chocolatey or brew/cask respectively on a Windows or Mac machine.

Install the font ligatures in Visual Code

To use Fira Code in Visual Code let's open the settings.json file via:

File menu > Preferences > Settings

or using the shortcut ctrl (command on Mac) + "," (comma), paste the following lines and save the changes:

{
    "editor.fontLigatures": true,
    "editor.fontFamily": "Fira Code"
}

The first time I installed Fira Code it did not look right since the beginning:

However I simply had to reboot Visual Code to let it apply the changes:

Now everything is setup and we can start using font ligatures while coding.

I was at the beginning a bit skeptical about this font as I was not used to it and it looked a bit odd to me. However after getting more familiar and using it daily, I started liking it as I think it makes it easier to read the code.

Bonus

In case you are curious to know which theme I am using in Visual Code in the screenshots above: