Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Sign in to follow this  
Rss Bot

The best monospace fonts for coding

Recommended Posts

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. 

If you want to make your coding life even easier, check out our posts on the best code editors and the best laptops for programming.

01. Fira Code

The best monospace fonts for coding

A font designed for Mozilla with coding ligatures

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

The best monospace fonts for coding

Read the creator's coding font philosophy in the Info section

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

The best monospace fonts for coding

Dank will add panache to any code editor

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. 

04. Gintronic

The best monospace fonts for coding

Jovial font Gintronic is easy to stare at

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. 

05. Monoid

The best monospace fonts for coding

A compact, highly legible font that works with Font Awesome

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. 

06. Hack

The best monospace fonts for coding

Over 1500 glyphs that you can customise

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. 

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London


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!

Read more:

View the full article

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×