Programming fonts with ligatures

For long, there have been fonts that are specifically designed for programming. Usually the main characteristics of these fonts are clear and easy to read characters (especially i, I, 1, o, O and 0), easily distinguishable brackets, quotes and parentheses and emphasized punctuations. This design is done with the font’s typeface. Now there are also fonts that, in addition, introduce special ligatures specifically for coding.

Ligatures are characters that visually combine multiple letters to one

Code consists of many different symbols that are often written with multiple characters even though they represent one logical entity or operator. For instance different kinds of arrows (->, =>), equality and comparison operators (==, !=, >=) and arithmetic symbols to name a few. Ligatures are special visual symbols for these multi-character operators which makes code easier and faster to read. Importantly they are only a rendering feature in the editor, and the files still use normal ASCII symbols when saved.

So how will the code look in practice? Below are some examples with Fira Code font both with and without ligatures.

The first example shows a small snippet written in Rust programming language:

ligatures_rust

Especially the first match arm “if i <= 10 => clearly shows the benefit of programming ligatures. Symbols <= and => are quite similar but in this context they have completely different meaning. The first one is comparison operator and the second one separates match arm pattern and body. In the ligature example this distinction is clearly visible.

Second example with XML shows more subtle differences.

ligatures_xml

The main differences are visible in the comment section and in the closing tags. Even though these differences are not major, the one with ligatures is clearer on my opinion. More examples can be found from the Fira Code README.

The installation is pretty straight-forward so it is easy to give these fonts a try. Basically the fonts can be installed from .ttf files found in the Github repository (usually just double/right-click and install) and they are even available in package managers for some systems. Secondly, in some editors the ligatures need to be enabled from configuration. For instance, in VS Code “editor.fontLigatures”: true configuration is needed. The Fira Code wiki has installation instructions for most systems and editors.

I discovered Fira Code earlier this year and have been using it for several months now (there are also other programming oriented fonts that support ligatures, e.g. DejaVu Sans Code). It has become my main font of choice for all programming and also for other general purpose editing (e.g. Markdown, configuration files, XML). At first, being so used to the ASCII symbols, reading code felt a bit odd with the new symbols. However, I have quickly learned to love them and I would not change back to normal fonts. Give it a try!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s