Almost all editors are coming with a monospace font as a default. But most modern typefaces are designed with a focus on developers and coding. And for better look and reading also contain ligatures.

🇨🇿 V češtině si lze článek přečíst na kutac.cz

There are many reasons and opinions why editors use monospace fonts and not proportional ones. But the most common one is pointing to better readability of signs and some letters. Just compare the readability of ()[]{} ;,:. O0iIl with ()[]{} ;,:. O0iIl. Another reason is vertical alignment, which would be really hard with different character width.

Why special font? And what is ligature?

Every developer is spending most of the time reading or writing code. And it is better if all characters are clear. And thus many different typefaces were designed especially for developers. But the designers did one more step further and implemented ligatures.

A ligature is single glyph consist of multiple characters. In the typography, ligatures are used for better look and space-saving. But in monospace fonts, they have the still same width. Ligatures consist of a smaller amount of details which is better for eyes, according to JetBrains.

List of fonts with the ligature support

I personally use the JetBrains Mono, which is used by default in all JetBrains IDEs, like IntelliJ, WebStorm, PHP Storm, etc. Even I use that font in VS Code. However, there are many different choices. The most popular is probably the Fira Code with a huge amount of ligatures. Other popular ones are Iosevka, Monoid, Inconsolata, or Victor Mono.

Turning ligatures on in VS Code and Sublime Text

After the chosen font is downloaded and installed, you have to change the setting of your editor. Set your favorite font and turn on the ligatures.

In VS Code it is possible to do with CTRL+Shift+P shortcut to open Command Pallete, type Open Settings (JSON), and merge this code with the setting content.

{
    "editor.fontFamily": "'JetBrains Mono', monospace",
    "editor.fontLigatures": true,
}

In Sublime Text the steps are very similar. Press CTRL+Shift+P to open Command Pallete, type Preferences: Settings, and merge the code below with the code in the right editor panel. The ligatures are on by default, however, this can be changed with font_options property. See more in the documentation.

{
    "font_face": "JetBrains Mono",
}