demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Top Eight Free Fonts For Coding

tools / typography

Estimated reading time: 2 minutes, 13 seconds

Whether you are making web pages or writing scripts, you will be typing a great deal. It is 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, which had the advantage of being available on almost every platform, capable of fitting many characters per line, and high legibility. Recently I’ve transitioned to using other fonts: typefaces in the list that follows are all free, monospaced (which makes lining up statements much easier) and cross-platform (important when moving your code between Windows, OS X, and Unix).

Consolas

Consolas font sampleCurrently my go-to monospaced font in 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 font sampleInconsolata 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

If I have the ability to install fonts on the machine I’m using 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. (I also use Anonymous Pro as the font for displaying code samples on this blog).

Proggy

Droid Sans Mono font sampleProggy 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.

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.

monoOne

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

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!

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.