10 Fonts for Code

These days, monospaced typefaces are synonymous with code, but it wasn’t always so. Western monospaced typefaces were initially designed to be used on typewriters where the technical limitations dictated that each character needed to be the same physical width to align correctly. Consequently, no additional work was required to space the letters, creating a writing environment that was simple and effective.

Early computers with limited graphics capabilities relied on monospaced type because it took much less power to render them on screen—making them the de facto choice when working with computer code. These limitations have long since passed, however monospaced typefaces have stuck around. This is due in large part to their legibility. They prevent distractions, speed up a developer’s work, and make it easier to spot mistakes. After all, key the wrong character and things break.

When displaying code snippets on your website, things are slightly different, as people won’t be looking at it for as long. On the flipside, we share code to educate and inform, and it’s detail-oriented information. So when choosing monospaced fonts, it’s still good to make sure they’re as clear as possible.

Punctuation such as commas, colons, semi-colons, and brackets need to be more prominent so they can’t be mistaken for one another. Other key characters to look out for are the capital ‘O’ and zero, which when designed to fit in at the same width would look nearly exactly the same. Most typefaces designed for coding typically either use a slashed or a dotted zero. And just like any good UI typeface, the ‘1’, capital ‘i’, lowercase “L’ and ‘|’ (known as the pipe mark or vertical bar) should be easily distinguishable.

Let’s dig into some options for best displaying code on a website and who knows, maybe you’ll want to update your code editor too!

Play around with Eco Coding right now for free

Eco Coding is designed and optimized for coding environments. It has neutral letterforms and yet doesn’t lack personality. It’s hard to see anything that I’d change about this typeface. The characters have a nice width and strike a nice balance: condensed enough to see a good amount of characters per line and wide enough to be easily readable.

Work with Fira Mono right now

I’ve been using Fira Mono since it was released and it has always felt just right to me. Friendly, yet assertive, it’s the monospace counterpart to Fira Sans, which was designed by Erik Spiekermann et al for the Firefox OS. It’s a very well balanced typeface for coding, and since the family was specifically designed to work well across devices with varying screen qualities, you can count on it to render well.

Play around with Anonymous Pro right now for free

Anonymous Pro by Mark Simonson is designed especially for coding, and its slashed zero is one of the best you will find. I also like the squared dots he’s used in the semi-colon to clearly differentiate it from the comma. It’s based on an earlier typeface of his—Anonymous—and has four variants, a large character set, and like many monospaced fonts it is distributed under the Open Font License (the font equivalent of Open Source). Overall it has a nice amount of personality too, without being in any way distracting.

Play around with Source Code Pro right now for free

Source Code Pro was designed by Paul D. Hunt as a part of the now ever-growing Source family. It’s become a favorite to many over the last couple of years. Adapted from Source Sans, its design retains the same vertical proportions but adds an ample width to increase the readability. It has an extensive number of weights, too, so you can choose exactly which suits you best.

Play around with Autocode right now for free

Autocode is a really great choice for displaying code on a website, as it adds a bit more visual interest. Designer Nicholas Garner based it on his typeface Autobahn, and it manages to keep a good deal of Autobahn’s personality. This really come across in the lowercase ‘a’ and ‘g’. However, that same interest and personality that works so well in an editorial environment might become tiresome if used for an everyday coding typeface.

Sign in to Typecast to try M+ 1M, or start a free trial

M+ 1M is a monospaced typeface by Japanese designer Coji Morishita. The M+ stand for ‘above minimum’ and this typeface most definitely goes above and beyond with its large character set. It’s one of the most condensed monospaced typefaces I have come across, but it still remains legible. It is ideal if you want to pack as many characters in per line as possible, or even for displaying code on mobile devices with smaller viewports.

Play around with Droid Sans Mono right now for free

Droid Sans Mono is the monospaced counterpart to the Droid Sans typeface that was designed for the Android operating system. The Droid family has since been replaced with Roboto on that OS, but Droid Sans Mono isn’t one we should forget about. Like Source Code Pro and Fira Mono, it has a neutral feel, but if you prefer a slashed zero, Droid Sans might just have an edge.

Play around with Pragmata Pro right now for free

When looking for a condensed monospaced font for coding, consider Pragmata Pro. It has well-defined punctuation with oversized dots in the colons and full stop to ensure sure you’ll notice them. It also has a number of squared features and an interesting solution for the zero, which gives it an overall futuristic feel.

Play around with Inconsolata right now for free

Inconsolata draws inspiration from the well-known monospaced typeface Consolas and also (interestingly) from Avenir and Franklin Gothic. Raph Levien was inspired to create a monospaced typeface that ‘didn’t suck’ and has definitely achieved it. There are a number of really nice letterforms, which proves that the limitation of a fixed width doesn’t have to be a bad thing. As you can see, it’s quite a bit smaller than some other monospaced typefaces, though, so you may need to set it a little larger.

Play around with CamingoCode right now for free

CamingoCode is one of the only typefaces that I have come across that has been adapted from another monospaced typeface—CamingoMono—specifically for code. It shares similar proportions to Inconsolata, but has taller characters so it appears more compact. The extra height allows the letters to have more open counters, helping with its legibility.

For more web font recommendations, check out our Type on Screen collection. We’d also like to extend a big thanks to our guest author Jake Giltsoff for writing today’s post. Guest authors are paid for their contribution, and all opinions are their own.