Fira Code – Font with Programming Ligatures

It was during the summer of ’18 that I established the syntax-highlighted colorful code blocks on this site with Prism. I truly loved creating this (even while on vacation) and wanted to put the icing on the cake by using a special developer font called Fira Code. Its specialty lies in combining multi-character programming symbols into one. It’s all about how characters connect. Ultimately, comprehending code gets easier on the eyes simply because of this wonderful font. You’ll see that it is not for everyone as it requires some level of adaptability. However, don’t be afraid of change!

While we decided to step back from the idea of publicly utilizing Fira Code, nothing is stopping me from spreading the word about it. I use it in AWS Cloud9 for WordPress plugin development, and I haven’t looked back since setting it up. Perhaps you’ll appreciate the tip and start using Fira Code in your everyday workflow too.

What are ligatures?

You might wonder what does it mean when I write programming ligatures. First, you need to understand some basic font mechanisms. Because character combinations are no longer prevalent in standard fonts, it’s not easy to find common examples. Though you might notice that the & (and) stands for the letters e and t, that come from the Latin et word. Alternatively, the ash consists of a and e: Æ / æ. Experiencing ligatures firsthand would include writing two or three letters in order, only to see them instantly combined to look nicer.

Script typefaces that mimic handwriting may use ligatures as well. As a high school kid, I often wondered how would I go about faking my writing so I could print my essays after preparing them on the computer. Little did I know that creating my custom handwriting font would have been an academic undertaking not just at that time but probably today as well. The reason is it’s not that simple as scanning your letters and filling up the alphabet with them. To make it look real, I would need alternate glyphs with contextual substitution and connect them as ligatures. Ouch!

How does Fira Code affect programming?

In code, we use a massive list of character combinations that consist of two or three letters. The gateway drug would be seeing Comparison Operators with ligatures. You’ll either love or hate these. For example:

• Two or three equals signs appear without gaps.
• Not equal/identical operators become a crossed equals sign instead of an exclamation mark followed by an equals sign.
• Greater/Less than or equal to becomes a single character, like writing it by hand.
• Multi-letter arrows become larger units.
• Arithmetics are enlarged.
• Operators have fine-tuned spacing.

It’s probably better to visually compare a piece of code. Perhaps there is not much difference to the unaided eye. Indeed it’s subtle, but play “spot the difference” and see it for yourself. Don’t mind the silly code.

Without Fira Code

/**
 * You can use ~> ~~> decent arrows --> to illustrate your point...
 */
$out = array('<div>');
$pieces = array(
    '<!-- HTML -->', 'https://www.example.com/#!', 'red', '##', 0x0, '</div>'
);
for ($i = 0; $i <= 5; $i++) {
    if ($i == '2' || $pieces[$i] === 'red') {
        $hex__red = 0xca0000;
        $out[] = $hex__red >> 15; // 404
    } elseif ($i !== 3 && $pieces[$i] != false) {
        $out[] = $pieces[$i];
    }
}
echo implode('', $out);

With Fira Code

/**
 * You can use ~> ~~> decent arrows --> to illustrate your point...
 */
$out = array('<div>');
$pieces = array(
    '<!-- HTML -->', 'https://www.example.com/#!', 'red', '##', 0x0, '</div>'
);
for ($i = 0; $i <= 5; $i++) {
    if ($i == '2' || $pieces[$i] === 'red') {
        $hex__red = 0xca0000;
        $out[] = $hex__red >> 15; // 404
    } elseif ($i !== 3 && $pieces[$i] != false) {
        $out[] = $pieces[$i];
    }
}
echo implode('', $out);

If you are interested in Fira Code…

Then good news, it’s free! Its developer has instructions on how to install the font on many different IDEs. Although I perfectly understand if you discard the idea as it’s too much of a change, my experience was quite the contrary. Every code I looked at immediately became more clear than before. Fira Code created a more defined personal style, and now I feel that my programming environment better aligns with me. As a side effect, merely looking at code became less tedious and more like experiencing an artistic display.