Monospace fonts allocate an equal amount of space to each character, so a letter 'i' will take up the same horizontal space as an 'o'. This creates unnatural spacing which makes a paragraph of flowing text harder to read, so for most applications, proportional fonts – which allow characters to take up the space they need – are usually preferable.
But it’s a different story when you’re choosing a font for coding. Proportional spacing is great for word recognition but it’s much easier to read numbers and punctuation marks when they are evenly spaced. Indentation and vertical alignment is also important for code legibility and the monospace grid is good for achieving this.
What follows is a list of monospace fonts designed specifically for coding. Some are paid for, and others are free fonts. In these monospace fonts, special care has been taken to make similar-looking glyphs more distinguishable, punctuation is larger than usual, and the fonts are designed to be easy to look at all day on a screen. Some are even customisable. Each one has its own personality and priorities, so your choice will come down to your individual preferences.
01. Fira Code
Fira Code is an extension of Fira Mono, a monospaced font designed for Mozilla to fit in with the character of Firefox OS. The code variant of Fira includes programming ligatures – these are special renderings of certain character combinations that are designed to make code easier to read and understand. So, for example, the == and != combinations are rendered as proper equality glyphs, which are supposedly easier for the brain to process than two separate characters that have their own individual meanings.
How you feel about this of course depends on personal taste – if you’ve been reading normal code for years you might not want to make the change. But if this does appeal, Fira Code is a widely supported, popular programming font that makes code easy to read. It's also free and open source. The GitHub page has coding samples from a range of languages so you can see how things look.
02. Input Mono
Input is a system of fonts designed specifically for coding by David Jonathan Ross that comes in both proportional and monospaced variants. As it has been designed with coding in mind, the proportional spacing is tailored to that application so it may be that you will consider it over the monospaced version.
There’s a range of widths, weights and styles, each with serif, sans and monospaced variants, resulting in a total of 168 different styles. So you really can get exactly what you want with this font set. It is described as having generous spacing, large punctuation, and easily distinguishable characters, and the size and positioning of symbols frequently used in coding has been given great consideration. You can also customise the forms of certain key characters including the letters 'i', 'l', 'a' and 'g'.
Input is free to use for private, unpublished usage in your personal coding app. If you want to publish text using something from the Input font family, you can see the prices here – prices start from $5.
03. Dank Mono
Dank Mono by Phil Plückthun, bills itself as being "designed for aesthetes with code and Retina displays in mind". Like Fira Code, it has the programming ligatures, and there’s also a cursive italic variant that’s useful for distinguishing different types of text within your code. Overall this font has been created for coders who have an eye for design, and the unusual lowercase 'f' is known for being particularly beloved among Dank fans.
Dank supports the Western, Eastern, Central and Southern European Latin character sets, and you can use it within CodePen.
To get Dank, you'll need to pay – a personal licence is £40 and a commercial one is £100. But if you’re a type connoisseur and you’re smitten with that jaunty 'f' it might be worth treating yourself to some Dankness.
Creator Mark Frömberg describes Gintronic as "jovial" and "gentle", an antidote to what he sees as the overly technical and mechanical style of many programming fonts. Gintronic overall appears relaxed and easy to look at, with a few particular characters adding a special personality – check out the curly brackets, the question mark, the lower case ‘k’ and the numerals. Extra effort has been made to design glyphs that can be hard to tell apart – such as 'B' and '8', 'i'’ and 'l' and so on – in a way that makes them easy to distinguish at a glance.
In total there are 1174 glyphs, so Gintronic has a massive character set that includes Latin, Cyrillic and Greek characters as well as a full range of mathematical and technical symbols.
Gintronic is €50 for the single font, €100 for the Roman or Italic bundle and €150 for the complete family.
Andreas Larsen set out a list of priorities when he designed Monoid – he wanted it to be legible, compact (the more code you can fit on one screen, the better), and "pretty". To achieve these ends he compared three other programming fonts – Fira Mono, Source Code Pro and Pragmata Pro – and took note of features that he likes and doesn’t like from each to inform the design of Monoid.
Like many programming fonts, Monoid has extra-large punctuation marks and operators; apertures are large to help make characters more distinguishable; and ascenders and descenders are kept short. Smart design decisions have been taken to make Monoid both compact and highly legible. It has programming ligatures, and there is also a special feature called Monoisome which enables you to see Font Awesome icons in your code.
Monoid is free and open source, so you can even tweak it to your tastes if you like.
Among the fonts we’ve covered so far, there are some with huge character sets and several variants, so it’s likely you’ll find something that’s just right. But if you have very specific desires, Hack could be the one for you, as there’s a whole library of alternative glyphs made by users that you can add to if you like. Hack is therefore highly customisable – you can get right down into the detail of each glyph and edit it yourself if no one else has done it exactly as you want.
Hack is free and open source. Head over to alt-hack, the alternative glyph library, to find out how to create your own custom version.
If you're looking to learn the latest creative and practical skills to take your client work, career or agency to the next level, then join us at Generate CSS – our CSS-focused conference for web designers and developers. Find out more here. Use special offer code WEBDESIGNER2 for a 10% discount on tickets!