5 good programming fonts

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.

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.

droid.gif 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.

proggy.gif 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.

lucida.gif 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?

profont.gif 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.

envy.gif 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.

Who is That Web Guy?

Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, occasional judge for the Australian Web Awards (2011, 2012, 2013) and creator of Task Rocket.

73 Responses to 5 good programming fonts

  1. Jeff Chapman says:

    Droid Sans Mono seems like a winner to me as well :-)

  2. Stanze says:

    Never really considered changing font until just now. Reckon I’ll give em a go. Thanks web guy.

  3. CSS Babe says:

    I always look forward to seeing what you’ll do next and you never disappoint. Droid Sans Mono looks fab! How do I use it in Dreamweaver?

  4. That Web Guy says:

    Cheers! If you haven’t already, put the font into c:\windows\fonts. Now open Dreamweaver and go to Edit -> Preferences and click ‘Fonts’ in the left pane. You’ll see a few font selectors available – just change the one next to ‘code view’ to the one you want.

    Too easy.

  5. notice says:

    Your php code is incorrect, it should be if($row["Bateman"] == 1)

  6. That Web Guy says:

    Nice spotting. It’s a good thing it’s not production code :-)

  7. Greg Molyneux says:

    Going to make the switch to Droid Sans Mono today. So long Courier New, it seems we hardly knew you…

  8. Bill Hawkins says:

    Good one Mike will give it a try now I have repaired my computer…

  9. xcv says:

    scfvgxcvxc

  10. Brent Blaskievich says:

    ProFont link is same as lucida console’s. Great post btw. +fan

  11. Felix says:

    Thanks for this!

  12. Sidnei says:

    ProFont link = error!

  13. joe says:

    try ‘liberation mono’. it will be your go-to font.

  14. That Web Guy says:

    Thanks – I’ll give that a try.

  15. That Web Guy says:

    Digging Sans and Sans Mono at 8 point. The difference between 8 and 9 point is drastic (looks more like a 2 or 3 point difference). I wish there was something in between, but it’s still a very good programming font.

    Nice find.

  16. WhiteDog says:

    Hi Michael -

    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.

  17. That Web Guy says:

    Thanks WhiteDog.

    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

  18. livefaq says:

    Ornamental aluminum fence Our Christian Louboutin Eshop is dedicated to providing the best and newest Christianlouboutin shoes, Jimmy Choo Handbags ,Manolo Blahnik High Heels, Marc Jacobs shoes and Yves Saint Laurent Shoes at a fraction of the cost. Aluminum fence

  19. JohnQSmith says:

    Glad you found it. Consolas is AWESOME!

  20. Andrew S says:

    I assume you don’t mean “kerning”, since all the characters in all these fonts are evenly spaced. Perhaps you mean “hinting”?

  21. That Web Guy says:

    No I meant kerning. At size 10 with Droid Sand Mono the kerning was still good (below the default 12), whereas on the other fonts I didn’t think it was as nice. Especially Envy Code R which I think has very odd character spacing at all sizes, unless it’s just my eyes.

  22. Daniel says:

    I have used lucida console in many of my programing apps, but you’ve got a nice batch of fonts here, I just might switch it up a little bit

  23. Elena says:

    Consolas size 10 rocks my world. No other font comes close. You can have it by installing free Powerpoint Viewer.

  24. Steve says:

    But if you don’t use a fixed width font then your code doesn’t line up nicely!

    I’m amazed that people put this much thought into their font. I just use whatever’s installed and get on with it!

  25. Anonymous says:

    Not if “1″ is a string and not an int.

  26. Avangelist says:

    wanted to point out more relevant issues that this is missing the colour scheme for asp.

  27. Michel says:

    Consolas is my font.

  28. Tony Cheetham says:

    I remember reading an article a while ago that went into a lot more depth than this(Sorry, this is still a good post!). Looking at differences in 0,o,O and i,I,1, and all the other little similair characters that can cause problems. In the end Anonymous came out as the winner, but then there are no many fonts that there are no doubt 100 different ones that are perfect for coding. I would still recommend anonymous though, it’s been my font of choice for years now.

  29. Serkan Yerşen says:

    What!!? No Monaco? It’s the best programing font ever.!!

    http://www.gringod.com/wp-upload/MONACO.TTF

  30. That Web Guy says:

    Thanks for that. Just tried Monaco – it’s a bit too tall and too much line height for my liking. Having to scroll down way more often than I should. At 8pt it’s a bit better though.

    @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.

  31. Nouf says:

    what’s your editor?

    loving the colors

  32. Nouf says:

    My apologies! just noticed it’s dreamweaver. xD

  33. Arnolds says:

    Monaco imho is the best font for a programming.

  34. Anirban says:

    Tried Consolas? I sure love it. :)

  35. joan says:

    I’ve been using consolas for years now. But great post, I’ll try some of these. I need it to support special French characters though, like œ, é, à, ç, etc.

  36. Yuriy Babenko says:

    So… you know you have a bug in the code, right? :)

    Line 10 – assignment instead of comparison.

  37. jlennon says:

    Inconsolata is awesome. That’s what I use when developing on Linux.

    Nothing beats Consolas on windows though :)

  38. Muckl says:

    Gotta try all these suggestions some time. Until then Terminus is my favourite monospaced font

  39. Kevin Renfrow says:

    Tamsyn is also a nice programming font that I quite like. http://www.fial.com/~scott/tamsyn-font/

  40. John Haugeland says:

    Try Inconsolata, or Consolas. Both free.

  41. That Web Guy says:

    Thanks everyone for the great additional suggestions. I’m going to try them all!

  42. Thomas says:

    You should probably show the zero character in font samples, especially for programmers. Some of us feel strongly about dotted/slashed zeroes.

  43. Michel Albert says:

    I agree that Droid Sans Mono is a very nice monospaced font. However, for programming I still prefer Anonymous pro.

    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!

  44. Rigoberto Manchu says:

    Droid Sans Mono no good for programming since 0 and O look exactly the same. Fail.

  45. Anon says:

    Try “inconsolata-g”. It’s just inconsolata, but modified slightly to be more programmer-friendly. For instance, all quotes are made straight, punctuation is a bit more thick, the zero isn’t slashed by rather contains a dot, brackets become more uniform in height, and so on.

  46. Caley says:

    Anonymous Pro is a clear winnner.

  47. Jason Buberel says:

    Pragmata, a commercial coding font:

    http://www.fsd.it/fonts/pragmatapro.htm

  48. Oli says:

    I still prefer Consolas to all of these ;)

  49. Andrew says:

    Lucida Sans Typewriter is a very close relative to Lucida Console, and there’s a good chance that you have it if you have Java installed on your system, even if you’re not running Windows.

  50. Robert Kern says:

    For those who like Droid Sans Mono, there are dotted-0 and slashed-0 variants available here: http://www.cosmix.org/software/

  51. ololo says:

    fuck it all! terminus FTW!

  52. Sigh says:

    Huey Lewis…

  53. AngryDude says:

    So what motherfucker! How self-absorbed can a person be. You’re not even a programmer, you’re a shitty markup css copy paster!

    Cut the crap on the fonts and just program your shit

  54. Christopher Elwell says:

    Been using Sheldon for a while now. It free. It’s somewhere on the web.

  55. Robert says:

    Consider Consolas. One of the better MS Freebie’s. Nice clean fixed width font I use a lot.

  56. asdf says:

    Courier 10 Pitch !

  57. acostoss says:

    Always been a fan of DejaVu Sans Mono

  58. cot says:

    I have tried many different fonts but I always fallback to Proggy.

  59. Ognjen says:

    Meslo lg font is, imo, the perfect monospaced font for coding. It has all characteristics of excellent programming font: clear differentiation of 0 (slashed zero) and capital O, i, l, 1… For me it is better that consolas (which is secod best font :), because it is based on free font Bitstream Vera Sans Mono.

    “Meslo LG is a customized version of Apple’s Menlo-Regular font

    (which is a customized Bitstream Vera Sans Mono).”

  60. looopy says:

    I actually like Mensch a lot. Crystal clear!

  61. Nirav says:

    DroidSansMono
    Really good font.
    I just come to know about this article and found it helpful. Thanx buddy ;)

  62. Consolas for me every time.

  63. mghark says:

    you have an error on your php code example
    On the if clause is not = but ==

    comun mistake do.

  64. That Web Guy says:

    @mghark

    It’s a good thing it’s not production code.

  65. Santz says:

    Inconsolata is at the top for me.

    However, from your selection, Droid Sans is the winner also.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


5 − five =

BTT