5 good programming fonts
Written July 11, 2009. 67 comments.
A little while ago I changed the code colouring in Dreamweaver after becoming too tired of the default offering, and last week I thought I might delve into the possibility of using an alternative font to compliment the new theme.
There are several advantages to coding with an alternative font, the most notable, depending on your selection, is being able to see more code along the horizontal axis before having to scroll. Unless you use word wrap in which case point becomes less irrelevant.
The following selection of 5 I have narrowed down from a list of 15 I tried over several days.
Bye bye Courier New. It’s been fun, but now I’m leaving you.
Droid Sans Mono: This is actually pretty nice, and my preferred programming font now. Droid Sans Mono belongs to Google’s Droid font family, which was naturally developed for their Android platform. At size 10 it has very nice kerning, and if you’re using it on a screen with a lower res (as I am on my laptop right now at 1280×800) it’s still very usable at 9 point allowing more code on screen.
Ideal size: 9 or 10pt (shown above).
Proggy Font: With a name like that there’s no mistaking what Proggy Font is intended for. This font comes in a stack of different flavours, but for me Proggy Font Crisp and Proggy Font Clean are the most suitable among them.
Ideal size: 12pt (shown above).
Lucida Console: This looks particularly nice in lower-case, and is also the same font I use in my command window (probably not a coincidence given its name). If you’re on a Windows machine the chances are you will already have this font, but if not you can grab it from here.
Ideal size: 9pt (shown above) or 10pt.
ProFont: When you just have to make the most of every available pixel of screen real-estate, ProFont might be for you. It’s tiny, but it’s still legible, except the difference in space after the opening < and before the closing > is quite drastic, particularly on the UL. Seriously – how tiny is that?
Ideal size: 9pt (shown above).
Envy Code R: This offering was suggested by a work colleague. As well as having a cool name, Envy Code R has been Jason’s coding font of choice for a while. It’s a sans serif font with a generous amount of space between each character, though in my opinion there’s a little too much line height.
Ideal size: 10pt (shown above).
Just in case…
If you’re interesting in giving any of these a go, make note of what your current font is in your application. Chances are it’s Courier New (most certainly if it’s Dreamweaver on a PC) , but if you don’t like any of these you’ll probably want to go back to what you had.
For me, it looks like Droid Sans is a winner.
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
Too easy.
try ‘liberation mono’. it will be your go-to font.
http://dejavu-fonts.org/wiki/index.php?title=Main_Page
Nice find.
I’m afraid I must diverge from the apparent consensus here which seems to favor fixed width fonts for coding. I find fixed width fonts particularly difficult to read and avoid them whenever possible . Prosaic as it may seem, I generally prefer Verdana in most on-screen situations (when I’m not designing for print) – even in Terminal (the Mac equivalent of the Console). A serif font like the one you use on this blog is fine for printed text. And it’s not bad for a screen font, either, much to my surprise – italic fonts don’t usually read very easily. I assume it’s Droid Serif Italic, though how you got it to display before I even installed it on my system is a bit of a puzzle. CSS 3 perhaps? I’m reading this blog in Safari 4 on a Mac with OS X 10.6.3, which, of course, is a Webkit browser that has some support for HTML 5 and CSS 3.
FYI: I use FontXChange to convert TrueType fonts to OpenType so that I may, if I choose, use them in a print project. It converts most Windows ttf fonts just fine.
Anyway, that’s my 2 cents.
No CSS3 trickery here :-) The font on this blog is plain old Georgia, a Windows system font that has been around for ever. If you don’t have it (I’m not sure if it’s on the Mac or not) then it will go back to Times New Roman.
Interesting choice about the non-fixed-width programming font, but it doesn’t matter as long as you’re comfortable reading it.
A good friend of mind led me to a new one a few weeks ago called ‘Consolas’. It’s my preferred font even over Droid Sans Mono now: http://www.microsoft.com/downloads/details.aspx?familyid=22e69ae4-7e40-4807-8a86-b3d36fab68d3&displaylang=en
I’m amazed that people put this much thought into their font. I just use whatever’s installed and get on with it!
http://www.gringod.com/wp-upload/MONACO.TTF
@Tony Cheetham: Got a link to ‘anonymous’? I’d like to give it a go.
To the few who complained of no ASP colour scheme – sorry about that. I have no plans to edit it for ASP though you can easily do so yourself in the Dreamweaver colour scheme editor: Edit -> Preferences -> Code Colouring …and chose the language you want to edit.
loving the colors
http://www.levien.com/type/myfonts/inconsolata.html
http://design.canonical.com/2011/09/ubuntu-monospace-beta/
Line 10 – assignment instead of comparison.
Nothing beats Consolas on windows though :)
The advantages of Anonymous Pro:
* The 0 (zero) is well differentiated from the uppercase O (Oh)
* The 1 (one) is well differentiated from the lowercase l (ell)
* Some characters are centered on the line (The asterisk for example)
* It supports box-drawing glyphs. This makes it very usable as a console font too.
* It supports a wide range of unicode glyphs. One I could not live without is the “OPEN BOX” (U+2423) glyph (see http://www.fileformat.info/info/unicode/char/2423/index.htm). It’s great to visualize trailing spaces without being too intrusive.
Take the following pages for a quick comparison of these bullet points:
http://code.google.com/webfonts/specimen/Droid+Sans+Mono
http://www.google.com/webfonts/specimen/Anonymous+Pro
While the font may not be as visually appealing as Droid Sans Mono, it’s really well designed!
http://www.fsd.it/fonts/pragmatapro.htm
http://www.ms-studio.com/FontSales/anonymouspro.html
Cut the crap on the fonts and just program your shit
“Meslo LG is a customized version of Apple’s Menlo-Regular font
(which is a customized Bitstream Vera Sans Mono).”