Make your code more beautiful with the Fira Code typeface

Jun 29, 2018 | 1 min read | NDC Oslo, Visual Studio Code, Design

Beautiful code: typography and visual programming by Peter Hilton was one of the best talks at NDC Oslo this summer.

Peter talked about how layout and typography can make code beautiful and improve code readability. After all, as Knuth pointed out:

Programs are meant to be read by humans, and only incidentally for computers to execute.

So how can one improve a monospaced programmer focused typeface?

By utilising ligatures of course!

Fira Code

Fira Code is a better Fira Mono specially designed for programmers. As programmers we often use multi-character symbols with one meaning, for instance: ++, == or even ===.

Fira Code uses ligatures for common programming multi-character combinations. This is just a font rendering feature: underlying code remains ASCII-compatible. This helps to read and understand code faster.

Consider the following JavaScript code in Visual Studio Code:

Look at how beautiful it can be for you too:

Enabling Fira Code in Visual Studio Code

You can find the releases of Fira Code on GitHub. Just download the latest release and install it in your OS as you would any other font.

Then, to enable Fira Code in Visual Studio Code, open User Settings and add both the font family and support for ligatures:

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

Marvellous!