Making web pages means a great deal of typing, making it vital that the font you choose to display your code be both legible and easy on the eyes. Most of the simple coding issues that people make are due to typos: if you can’t read what you type, you’re going to miss errors.

Historically, I have used Arial Narrow to display code samples in class, since it had the advantage of being available on almost every platform and capable of fitting many characters per line, together with fairly high legibility. Recently I’ve transitioned to using other fonts: typefaces in the list that follows are all free, monospaced (which makes tab-indented lines easier) and cross-platform (important when moving and maintaining your code).

Consolas

Currently my go-to when I'm developing on Windows. Designed by Lucas de Groot, Consolas is freely available on every copy of  Windows since Vista. The font is optimized for ClearType (and thus for LCD screens) and very easy on the eyes. With a little work, it is possible to install the Open XML File Converter to have Consolas working on Mac OS X, along with all the other fonts introduced in Vista (all of which, oddly, start with C).

Monaco

The native Mac OS X equivalent to Consolas, which can be downloaded for all platforms. Like all the other fonts in this list, it uses a “slashed” or “dotted” zero, which distinguishes the numeral 0 from an uppercase O letter.

Inconsolata

Inconsolata is a free font closely related to Consolas. Designed by Raph Levien, an engineer on Google’s Web Fonts team, it is part of a number of other fonts he has developed. Inconsola is used to set code samples in this blog.

Anonymous Pro

One of my past favorites, Anonymous Pro is my current preference for coding. Mark Simonson’s page also has excellent guidance for using the font on different operating systems and applications.

Proggy

Proggy is a free bitmapped monospaced font. As such, I wouldn’t personally use it for coding per se, but it could be very useful in a shell, or when you want to make text look like code for the purposes of screenshots or mockups.

Input

A relatively recent entry in the field, Input is a free font designed by Jonathan David Ross with a huge range of weights and variants: seven weights, from Black to Thin, and four widths, including Compressed, Condensed, and Narrow. Unusually, the typeface is available in sans, serif and monospaced variants, making a grand total of 168 different styles. This means that an appropriate editor could use the same font family for different aspects of code: italics for tags, say, and normal text for content.

I’m excited by the possibilities of Input, and will be experimenting with it this summer. The typeface is also available as a webfont for embedding code samples in pages.

Source Code Pro

A fork of Adobe’s Source Sans, an open-source type family. Six different weights, regularly updated, highly customizable; another fork, Source Code Pro L, uses ligatures for operators. Available on Github, Google Web Fonts, and from other providers.

hack

A very well-supported typeface with roots in the Bitstream Vera and DejaVu projects, hack has an excellent character range (over 1500 glyphs), and many different weights and styles. It's even supported as a web font, with its own Content Distribution Network for use on site code samples. Download Hack.

mononoki

Another Github-hosted project, with support for over 500 symbols.

sudo

Created by Jens Kutilek, sudo. It displays numbers one line width smaller than uppercase letters, rather than using dotted or slashed zeroes, and uses “coder’s quotes”.

Droid Sans Mono

Finally, there is Droid Sans Mono, a monospaced version of the Droid font used on Android devices.

There’s no need to use the defaults (like Courier) that DreamWeaver gives you!

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.