5 good programming fonts

Written July 11, 2009. 76 comments.

code

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, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.

76 Responses to 5 good programming fonts

  1. Jeff Chapman says:
    July 11, 2009 at 3:43 pm 
    	
		Droid Sans Mono seems like a winner to me as well :-)
  2. Stanze says:
    July 11, 2009 at 5:45 pm 
    	
		Never really considered changing font until just now. Reckon I’ll give em a go. Thanks web guy.
  3. CSS Babe says:
    July 11, 2009 at 5:50 pm 
    	
		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:
    July 11, 2009 at 5:54 pm 
    	
		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:
    July 11, 2009 at 7:52 pm 
    	
		Your php code is incorrect, it should be if($row["Bateman"] == 1)
  6. That Web Guy says:
    July 11, 2009 at 8:19 pm 
    	
		Nice spotting. It’s a good thing it’s not production code :-)
  7. Greg Molyneux says:
    July 11, 2009 at 10:33 pm 
    	
		Going to make the switch to Droid Sans Mono today. So long Courier New, it seems we hardly knew you…
  8. Bill Hawkins says:
    July 12, 2009 at 3:19 am 
    	
		Good one Mike will give it a try now I have repaired my computer…
  9. xcv says:
    July 16, 2009 at 9:08 pm 
    	
		scfvgxcvxc
  10. Brent Blaskievich says:
    August 4, 2009 at 10:41 pm 
    	
		ProFont link is same as lucida console’s. Great post btw. +fan
  11. Felix says:
    October 5, 2009 at 3:06 pm 
    	
		Thanks for this!
  12. Sidnei says:
    February 25, 2010 at 2:01 am 
    	
		ProFont link  = error!
  13. joe says:
    March 31, 2010 at 12:47 am 
    	
		
    try ‘liberation mono’.  it will be your go-to font.
  14. That Web Guy says:
    March 31, 2010 at 6:43 am 
    	
		Thanks – I’ll give that a try.
  15. Michel says:
    April 5, 2010 at 8:50 am 
    	
		Yo prefiero Deja Vu Mono

    http://dejavu-fonts.org/wiki/index.php?title=Main_Page
  16. That Web Guy says:
    April 5, 2010 at 8:15 pm 
    	
		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.
  17. WhiteDog says:
    May 8, 2010 at 9:51 pm 
    	
		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.
  18. That Web Guy says:
    May 9, 2010 at 7:08 am 
    	
		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
  19. Rich T says:
    May 30, 2010 at 3:58 am 
    	
		Try Dina:  http://www.donationcoder.com/Software/Jibz/Dina/
  20. livefaq says:
    July 14, 2010 at 11:58 pm 
    	
		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
  21. JohnQSmith says:
    September 28, 2010 at 11:47 pm 
    	
		Glad you found it. Consolas is AWESOME!
  22. Andrew S says:
    December 31, 2010 at 1:24 am 
    	
		I assume you don’t mean “kerning”, since all the characters in all these fonts are evenly spaced. Perhaps you mean “hinting”?
  23. That Web Guy says:
    January 1, 2011 at 1:02 pm 
    	
		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.
  24. Daniel says:
    January 19, 2011 at 10:03 am 
    	
		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
  25. Elena says:
    June 24, 2011 at 5:02 am 
    	
		Consolas size 10 rocks my world.  No other font comes close.  You can have it by installing free Powerpoint Viewer.
  26. Steve says:
    June 29, 2011 at 5:50 am 
    	
		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!
  27. Anonymous says:
    July 3, 2011 at 10:14 pm 
    	
		Not if “1″ is a string and not an int.
  28. Avangelist says:
    July 19, 2011 at 4:36 pm 
    	
		wanted to point out more relevant issues that this is missing the colour scheme for asp.
  29. Michel says:
    July 30, 2011 at 1:27 am 
    	
		Consolas is my font.
  30. Tony Cheetham says:
    July 30, 2011 at 8:03 pm 
    	
		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.
  31. Serkan Yerşen says:
    July 30, 2011 at 9:43 pm 
    	
		What!!? No Monaco? It’s the best programing font ever.!!

    http://www.gringod.com/wp-upload/MONACO.TTF
  32. That Web Guy says:
    July 31, 2011 at 8:37 am 
    	
		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.
  33. Nouf says:
    August 7, 2011 at 7:07 am 
    	
		what’s your editor?

    loving the colors
  34. Nouf says:
    August 7, 2011 at 7:09 am 
    	
		My apologies! just noticed it’s dreamweaver. xD
  35. John says:
    September 29, 2011 at 11:37 am 
    	
		Anonymous Pro here is my favorite! http://www.ms-studio.com/FontSales/anonymouspro.html
  36. Brandon R. says:
    September 29, 2011 at 12:53 pm 
    	
		What about Inconsolata?

    

    http://www.levien.com/type/myfonts/inconsolata.html
  37. Arnolds says:
    September 29, 2011 at 3:14 pm 
    	
		Monaco imho is the best font for a programming.
  38. bungle says:
    September 29, 2011 at 3:39 pm 
    	
		This looks promising:

    http://design.canonical.com/2011/09/ubuntu-monospace-beta/
  39. Anirban says:
    September 29, 2011 at 4:09 pm 
    	
		Tried Consolas? I sure love it. :)
  40. joan says:
    September 29, 2011 at 4:18 pm 
    	
		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.
  41. Yuriy Babenko says:
    September 29, 2011 at 4:20 pm 
    	
		So… you know you have a bug in the code, right? :)

    

    Line 10 – assignment instead of comparison.
  42. jlennon says:
    September 29, 2011 at 6:17 pm 
    	
		Inconsolata is awesome. That’s what I use when developing on Linux.

    

    Nothing beats Consolas on windows though :)
  43. Muckl says:
    September 29, 2011 at 7:22 pm 
    	
		Gotta try all these suggestions some time. Until then Terminus is my favourite monospaced font
  44. Kevin Renfrow says:
    September 29, 2011 at 7:33 pm 
    	
		Tamsyn is also a nice programming font that I quite like. http://www.fial.com/~scott/tamsyn-font/
  45. John Haugeland says:
    September 29, 2011 at 7:41 pm 
    	
		Try Inconsolata, or Consolas.  Both free.
  46. That Web Guy says:
    September 29, 2011 at 7:52 pm 
    	
		Thanks everyone for the great additional suggestions. I’m going to try them all!
  47. Thomas says:
    September 29, 2011 at 8:46 pm 
    	
		You should probably show the zero character in font samples, especially for programmers. Some of us feel strongly about dotted/slashed zeroes.
  48. Michel Albert says:
    September 29, 2011 at 9:13 pm 
    	
		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!
  49. Rigoberto Manchu says:
    September 29, 2011 at 10:17 pm 
    	
		Droid Sans Mono no good for programming since 0 and O look exactly the same. Fail.
  50. Anon says:
    September 29, 2011 at 10:18 pm 
    	
		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.
  51. Michael says:
    September 29, 2011 at 10:24 pm 
    	
		http://www.ascenderfonts.com/font/consolas-regular.aspx
  52. Caley says:
    September 30, 2011 at 12:12 am 
    	
		Anonymous Pro is a clear winnner.
  53. Jason Buberel says:
    September 30, 2011 at 12:24 am 
    	
		Pragmata, a commercial coding font:

    

    http://www.fsd.it/fonts/pragmatapro.htm
  54. Oli says:
    September 30, 2011 at 1:05 am 
    	
		I still prefer Consolas to all of these ;)
  55. Andrew says:
    September 30, 2011 at 1:50 am 
    	
		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.
  56. Robert Kern says:
    September 30, 2011 at 2:48 am 
    	
		For those who like Droid Sans Mono, there are dotted-0 and slashed-0 variants available here: http://www.cosmix.org/software/
  57. ololo says:
    September 30, 2011 at 2:57 am 
    	
		fuck it all! terminus FTW!
  58. Sigh says:
    September 30, 2011 at 3:05 am 
    	
		Huey Lewis…
  59. Frank Stallone says:
    September 30, 2011 at 3:19 am 
    	
		No love for Anonymous Pro?  

    

    http://www.ms-studio.com/FontSales/anonymouspro.html
  60. AngryDude says:
    September 30, 2011 at 4:10 am 
    	
		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
  61. Christopher Elwell says:
    September 30, 2011 at 5:57 am 
    	
		Been using Sheldon for a while now. It free. It’s somewhere on the web.
  62. Robert says:
    September 30, 2011 at 7:49 am 
    	
		Consider Consolas. One of the better MS Freebie’s. Nice clean fixed width font I use a lot.
  63. asdf says:
    September 30, 2011 at 4:56 pm 
    	
		Courier 10 Pitch !
  64. acostoss says:
    September 30, 2011 at 7:15 pm 
    	
		Always been a fan of DejaVu Sans Mono
  65. cot says:
    September 30, 2011 at 9:18 pm 
    	
		I have tried many different fonts but I always fallback to Proggy.
  66. Ognjen says:
    October 1, 2011 at 1:02 am 
    	
		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).”
  67. looopy says:
    October 3, 2011 at 12:37 pm 
    	
		I actually like Mensch a lot. Crystal clear!
  68. Nirav says:
    March 10, 2012 at 7:46 pm 
    	
		DroidSansMono
Really good font.
I just come to know about this article and found it helpful. Thanx buddy ;)
  69. A dark code view theme for Dreamweaver | 世界是平的 says:
    August 31, 2012 at 9:38 pm 
    	
		[...] done. Open a file and switch to code view to see the new colour scheme. Combine this with a good programming font and things get even [...]
  70. 5 good programming fonts - Dreamlikes Blog says:
    September 10, 2012 at 2:00 pm 
    	
		[...] 转载至：http://www.thatwebguyblog.com/post/5_good_programming_fonts/ [...]
  71. Matthew Hipkin says:
    September 14, 2012 at 8:33 pm 
    	
		Consolas for me every time.
  72. 五个最佳编程字体 - 博客 - 伯乐在线 says:
    October 11, 2012 at 10:06 am 
    	
		[...] 英文原文: 5_good_programming_fonts，编译：伯乐在线 - 唐小娟 [...]
  73. mghark says:
    November 9, 2012 at 5:50 pm 
    	
		you have an error on your php code example 
On the if clause is not = but ==

comun mistake do.
  74. That Web Guy says:
    November 11, 2012 at 3:04 pm 
    	
		@mghark 

It’s a good thing it’s not production code.
  75. gho$t says:
    January 2, 2013 at 8:40 am 
    	
		indeed!
  76. That Web Guy - A dark code view theme for Dreamweaver says:
    May 11, 2013 at 8:50 pm 
    	
		[...] 5 good programming fonts (75) [...]

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>

three + 3 =

BTT