The Typography of Code

As a self proclaimed programmer/designer I enjoy not only the logical and practical things in life, but also the beautiful and well designed. And I find the greatest pleasure when these things converge to produce something extraordinary.

One such thing is Typography. Typography is the art of language, the visualization of the spoken word. A medium by which non-verbal communication is made possible. And though I profess no expertise in this art, I have come to deeply appreciate it’s power and ability to convey the same message in so many different ways. Each with a unique feeling and style.

The Messenger

In 1956 Howard Kettler designed the typeface Courier. It was made for IBM’s new (and revolutionary) line of electric typewriters. Originally called “Messenger”, Courier is one of the earliest fixed-pitch (also known as Monospace) fonts, meaning each character takes up the same amount of space on a line; allowing for easy tabular alignment and legibility.

fixed_prop.png

Courier was a hit, and as many made the transition from typewriter to computer, this classic typeface wasn’t far behind. It was included in all early Apple computers, and while creating the core fonts for Windows 3.1, Microsoft hired Monotype Typography to give Courier a makeover. And so Courier New was born, as a thinner and cleaner version of it’s former self.

Future Type

Fast forward to the present day, and Courier New is now the de-facto standard for almost all programming IDEs on Windows. It was the default font for Notepad, Visual Studio, and many other text editors and compilers, paving the way for many more typefaces to come.

courier_prev.png

Courier New is a great monospace font. It’s thin, clean, and quite readable.

For the longest time, I used Courier New. It never really occurred to me that there were other options (aside from proportional width fonts; but who programs in Times New Roman?). I just used it, and it worked well enough.

Change

Now when you’re working on a program, website, or any other body of code, there’s only one thing you’re really looking at. Text. And lots of it. So naturally it’s important for the text to be easy to read and comprehend.

In most cases your editor of choice will use syntax highlighting, changing the colors of various pieces of code, making it easier, for example, to visaully separate your strings from your function definitions. You saw an example of this in the image of Courier New above.

Syntax highlighting is great. But no matter how well your code is marked, it can never make up for a well thought out typeface. One that is properly spaced, has distinct and readable characters, and is flexible at various sizes.

Five Typefaces for Programmers

I’ve compiled below five of my favorite fonts for programming, along with an image, and brief history. I hope you find this list useful. And I encourage you to try them out for yourself (I will provide a download link where possible). Maybe you’ll be surprised with what you find.

  • Consolas

    Just as in the days of Windows 3.1, Microsoft has again invested in the creation of new fonts for their latest operating system, Windows Vista. Consolas is just one of the many that were made.

    Designed by Lucas de Groot of Fontfabrik, Consolas is easily my favorite font for programming. The characters are compact, yet distinct. For example, it’s easy to tell the difference between the letter O and 0 (Zero), and having been designed to take advantage of ClearType Hinting technology, Consolas is almost guaranteed to look great, even at small sizes.

    Download Consolas » (Comes with Microsoft PowerPoint Viewer 2007)

  • Andale Mono
    typoofcode_andale_mono.png
    From Microsoft:

    Andale Mono is a highly legible monospaced font. Looks like Monotype.com? Yes, this font was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. We’ve decided to revert to the font’s original name, Andale.

    Created by Steven R. Matteson, Andale Mono was the second monospace font I used after leaving Courier New. It is, as Microsoft says, very legible. Though I find it more rigid than fonts like Consolas, or Courier. It too distinguishes well between the zero, and the O. And it certainly had me satisfied for quite some time. So why not give it a try yourself?

    Download Andale Mono » (Available as one of Microsoft’s core fonts)

  • Courier New
    typoofcode_courier.png
    We already spoke a bit on the history of Courier, and it’s New counterpart. And though I may not use it much myself anymore, there’s no doubt that this classic font will forever remain in my memory. It set an example for other typefaces, and it’s got the history to prove it. Love it or hate it, it’s here to stay.

    Redesigned from the original Courier by Adrian Frutiger, Courier New was a staple of modern printing and typewriting. Nowadays it’s still popular on the PC platform, though it doesn’t distinguish too well between zero and O, Courier New is very clean and thin font that just might fit your fancy (and perhaps it already does).

    Download Courier New »

  • Lucid Console
    typoofcode_lucida_console.png
    The monospaced member of the Lucida family. Lucida Console is another font that I used for quite a while.

    Designed by Bigelow & Holmes, Lucida Console is a pleasant and vertically compact typeface. Though it unfortunately lacks much distinction between zero and O, Lucida Console is great for those who wish to fit lots of text on their screen, and works great at small sizes. And as the name suggests could be used for a console or terminal display.

    No download of Lucida Console is available, though I believe it is a standard font on Windows XP/Vista

  • Bitstream Vera Sans Mono
    typoofcode_bitstream_vera_sans_mono.png
    To be honest, the best way to describe this font is as a better Lucida Console, it has a slightly larger line-height and it does a better job of distinguishing the zero and O (if you haven’t already noticed, that’s an important criteria), if you like Lucida Console, then you’ll feel right at home with Bitstream Vera Sans Mono.

    Download Bitstream Vera Sans Mono »

That’s all folks

So there you have it. I hope you found something new or enjoyable in this article (if you did, please subscribe for RSS updates!). Let me know what you think, and what font you use for your own programming work.

For more information

83 Comments

  1. Posted February 4, 2008 at 10:50 am | Permalink

    Note: the download for the Consolas font is only for users in Microsoft Windows. For Linux or Mac OS users the font can be downloaded (for a fee) from http://www.ascendercorp.com/ctfonts.html

  2. Posted February 4, 2008 at 12:59 pm | Permalink

    I’m loving the andale mono. Think I might switch to that full time.

  3. Mikael
    Posted February 4, 2008 at 2:04 pm | Permalink

    I like Inconsolata. I don’t know how it performs w/r/t distinguishability between your O’s and 0’s or l’s and 1’s, because I usually know from context, but it’s seriously beautiful. It’s the only reason I even enjoy programming. http://www.levien.com/type/myfonts/inconsolata.html

  4. Posted February 4, 2008 at 2:40 pm | Permalink

    I would like to say that Terminus is really the font for programming: l is different from 1, 0 from O, and so on and so forth.

  5. Posted February 4, 2008 at 2:41 pm | Permalink

    Bill Davis
    Thanks for the link. That’s a good point, as this article is mainly PC-centric.

    Chris
    Yeah, Andale Mono is great, I’m glad you like it.

    Mikael
    Nice find. I’ll definitely check it out. :)

  6. Eelis
    Posted February 4, 2008 at 2:50 pm | Permalink

    I’m surprised and disappointed that this post presumes the “source code requires a fixed width font” myth without question. As a “self proclaimed programmer/designer” with an interest in the aesthetics of source code, you of all people should be in the business of scrutinizing such conventional “wisdom”.

    The truth is, there is a small minority of programmers who happily write all their code in a variable width font. When staunch fixed-width adherents hear about this, they generally express their belief that the use of a fixed-width font is an absolute prerequisite for any kind of proper code layout. In reality, the amount of vertical-alignment tricks that you can only do with fixed-width fonts is rather small, and variable-width font users find that they can quite easily do without them.

    If you are genuinely interested in aesthetically pleasing source code display, give variable width fonts another try.

  7. Steve
    Posted February 4, 2008 at 3:03 pm | Permalink

    My personal choice (for several years now) is ProFont. http://www.tobias-jung.de/seekingprofont/

  8. Posted February 4, 2008 at 3:15 pm | Permalink

    Thanks for the comment Eelis.

    First off, I’m very sorry to have disappointed you so! I admit, I have very little experience using proportional width fonts for programming, and so naturally I’m biased towards monospace. Born and raised as such, you could say :)

    Of course, please keep in mind that some of this article is opinion, not fact. Especially when I list my preferred fonts. I never said that fixed width was absolutely superior to proportional. (The mention of “Who programs in Times New Roman?” was merely said in jest, as it is a font that I generally dislike)

    In the end it’s en entirely subjective thing, but your comment has got me thinking, and I promise to look more into the use of proportional type for coding. I am genuinely interested, and I see it not only as a possibility, but something that I could really enjoy.

    On that note, what fonts do you like to use for programming? (This could be a great topic for a follow-up article)

    Anyway, thanks again for opening my eyes a little wider.

  9. Posted February 4, 2008 at 3:17 pm | Permalink

    Victor & Steve
    Thanks for sharing. :)

  10. Jed
    Posted February 4, 2008 at 3:34 pm | Permalink

    DejaVu Sans Mono is excellent. Pretty much Bitstream Vera Sans Mono with lots more characters.

  11. Eelis
    Posted February 4, 2008 at 3:38 pm | Permalink

    Hamish:

    I’m glad to hear you’ll give it a try. :)

    I use Adobe Helvetica myself (as shown here: http://www.eelis.net/code.png ). Most people would probably consider Helvetica a particularly poor choice because lowercase L and uppercase I are virtually indistinguishable, but strangely enough that doesn’t bother me personally at all.

    I didn’t spend much time looking around though. I’m sure there are far nicer variable-width fonts for source code, so I’m looking forward to your next post about those. ;)

  12. Posted February 4, 2008 at 4:11 pm | Permalink

    I like Dina, myself. I do my programming in a terminal, and use it as my terminal font. Monaco under OS X is also a great monospace font for programming.

  13. pipedings
    Posted February 4, 2008 at 4:30 pm | Permalink

    My favourite is Terminus (12pt, green on black ;)

  14. Imran Fanaswala
    Posted February 4, 2008 at 4:43 pm | Permalink

    I prefer Dina.

    Some of the fonts mentioned here have some drawbacks. For starters, the letter ‘l’ and the number ‘1’ could use some more defining in Consolas and Andale.

    Secondly, these fonts appear good at 12pt. Now the more code you can visually fit in 1 page the better it is. This is quite a good advantage, thats why I prefer Dina because it is designed for being used at 8pt.

  15. Posted February 4, 2008 at 5:01 pm | Permalink

    Thanks for the suggestions everyone.

    Eelis
    Yeah, I’ll be experimenting with this for sure, and I’ll definitely do a writeup on my findings.

    Imran
    I’d say most all of these fonts look great at sizes like 8pt too. I simply chose a larger size so that more details could be seen.

  16. Posted February 4, 2008 at 5:23 pm | Permalink

    I prefer “Panic Sans” over everything else, it’s superb. Unfortunately you’ll have to code in Coda to enjoy it. But then again that’s not a bad thing. :)

  17. Posted February 4, 2008 at 5:36 pm | Permalink

    Kyle
    Ah, it’s programs like Coda that make me wish I owned a Mac, *sigh*

    Thanks for sharing!

  18. Galo
    Posted February 4, 2008 at 5:37 pm | Permalink

    I don’t like Courier. For some unexplainable reason I find it very, very ugly. I absolutly love Bitstream Vera Sans Mono. Btw, the font you use to distinguish Pixed-pitch form Proportional on the first image, which is it? Looks a lot like Bitstream Vera Sans, but the ‘p’, ‘c’ and ‘d’ are kinda different (at least from my renderer). The ‘d’ looks like Monaco’s, but the rest doesn’t.

  19. Galo
    Posted February 4, 2008 at 5:37 pm | Permalink

    I meant ‘Fixed-pitch’ :D

  20. Posted February 4, 2008 at 5:42 pm | Permalink

    Galo
    The fonts used for the comparison are Consolas and Myriad Pro, respectively.

  21. Posted February 4, 2008 at 5:54 pm | Permalink

    Absolutely loved this article.

    I’ve been programming in Courier New for years without thinking terribly hard about it. I may just have to try out some of these alternatives!

  22. Pixlmixr
    Posted February 4, 2008 at 5:55 pm | Permalink

    I’m a big fan of the Inconsolata font mentioned by Mikael in post 3, especially since the zero is slashed.

    I have to say that the mind of a person who codes in Helvetica works a lot different than mine! I find it annoying to even see samples of code in proportional fonts.

  23. Posted February 4, 2008 at 6:23 pm | Permalink

    I’m a fan of DejaVu Sans Mono, which can truthfully be described as “Bitstream Vera Sans Mono with more characters”. Specifically, if you’ve ever wanted a fixed-width font with the unicode line drawing code points, this is the one for you. (Courier New has ‘em, Consolas doesn’t. Haven’t tested the others here.)

  24. Posted February 4, 2008 at 6:50 pm | Permalink

    Interesting that you limit yourself to vector fonts. I find Terminus (which is bitmapped) to be the crispest and most readable for situations where it doesn’t need to scale up.

  25. wozza
    Posted February 4, 2008 at 6:52 pm | Permalink

    I user verdana. It is absolutely the best for screen legibility. So what if if it is proportional. I find that in practice, it never makes any difference.

  26. Posted February 4, 2008 at 7:18 pm | Permalink

    Phil
    I think it’s likely that I’ll be writing another article to follow up on this one, and along with proportional fonts, I’m sure I’ll look into the many bitmap fonts as well.

    Thanks for your suggestions, everyone, I really appreciate it.

  27. Posted February 4, 2008 at 7:40 pm | Permalink

    love it ! … i’ll try a new font now ! ! !

  28. Posted February 4, 2008 at 7:43 pm | Permalink

    I’m rather partial to Droid Sans Mono, myself: http://damieng.com/blog/2007/11/14/droid-sans-mono-great-coding-font

  29. Posted February 4, 2008 at 8:02 pm | Permalink

    I agree with #28, droid is my favorite

  30. Posted February 4, 2008 at 8:29 pm | Permalink

    Awesome post. I never would have thought font nerdery and programming nerdery would ever collide.

    As a print guy turned amateur web dev, I tend to hold onto my old obsessions about fonts. My personal favorite (although that ProFont looks outstanding) is Rockwell. It was standard on Macs for a while, but I don’t know what has happened to it since.

    I love it because it’s a slab serif with great counters (whitespace within letters) and distinction between commonly confused letters. It looks a little funky at first, but I grew to love it. Maybe I just write sloppy code because I’m self-trained, but I think it stays pretty readable when you’ve got ungainly blocks of text.

  31. Posted February 4, 2008 at 9:35 pm | Permalink

    Very nice post (and love the way the fonts are displayed; looks beautiful!). I’m another fan of “code aesthetics” and certainly the font (and having a good editor theme) helps a lot.

    I was a fan of Andale Mono and Lucida Console for a long time, then later switch to Console myself.

    Lately I’ve been using more Inconsolata, which others have mentioned and Damien Guard’s Envy Code R (http://damieng.com/blog/2007/11/27/envy-code-r-coding-font-v07-preview).

    Again, great post!

  32. Matt
    Posted February 4, 2008 at 10:16 pm | Permalink

    I like the sexy color scheme you used in your examples. Any chance of sharing the definition file? I would like to port it to Emacs.

    Also, what is with the vertical lines in your editor? They don’t appear to have any function. (Unless you are using a transparent window and that is your desktop.)

  33. Posted February 4, 2008 at 10:58 pm | Permalink

    @Matt (32): I believe the vertical lines are a feature of BBEdit for Mac, showing the tab stops.

  34. jonathan
    Posted February 5, 2008 at 4:52 am | Permalink

    how about Akkurat? http://www.lineto.com/The+Fonts/Font+Categories/Text+Fonts/Akkurat+Mono/

  35. neeks
    Posted February 5, 2008 at 5:33 am | Permalink

    I was actually really surprised that you didn’t showcase Inconsolata. In my opinion, only Consolas comes even close to it.

  36. Ajay
    Posted February 5, 2008 at 6:56 am | Permalink

    Is there any font that has a slashed zero?
    (http://en.wikipedia.org/wiki/Slashed_zero) and something similar for the 1/l problem.

    O/0 is a BIG problem as they are next to each other on a qwerty and its easy to make typos. 0bject looks like Object :)

  37. Posted February 5, 2008 at 7:18 am | Permalink

    @Ajay: Both Consolas and the current Inconsolata version have a slashed zero.

  38. Posted February 5, 2008 at 7:57 am | Permalink

    I’ve used Proggy Clean (11px) for a couple of years now and love it (http://www.proggyfonts.com/index.php?menu=download)

    Though some of the fonts listed above might tempt me to switch (maybe its the color definitions rather than the font tho?)

  39. yo
    Posted February 5, 2008 at 8:13 am | Permalink

    What’s the color scheme in use in these screen shots?

  40. Posted February 5, 2008 at 9:02 am | Permalink

    Thanks for all the great comments and suggestions guys.

    The color scheme used in the screen shots is a slightly modified Monokai, which is a preset in the text editor I use, called e.

    e is based on TextMate for Mac, so they use the same theme definition files. Here’s the XML for anyone who wants it:

    http://hamstu.com/uploads/Monokai.tmTheme

    Everything else was added in Photoshop, including the faint vertical lines (I think I was going to add some horizontal markers as well, but I eventfully just left it as is)

  41. Galo
    Posted February 5, 2008 at 1:37 pm | Permalink

    Did anyone ever notice that LaTeX’s verbatim font (aka “code font”) looks a LOT like Courier 10 pitch? There are some differences, mainly in height, but it’s mostly the same (probably due to their typewriting past). Is there a font EXACTLY like LaTeX’s verbatim out there?

  42. Posted February 5, 2008 at 5:35 pm | Permalink

    Consolas Font Pack for Microsoft Visual Studio 2005 http://www.microsoft.com/downloads/details.aspx?familyid=22e69ae4-7e40-4807-8a86-b3d36fab68d3&displaylang=en

  43. miha
    Posted February 6, 2008 at 5:16 am | Permalink

    Very nice article!:)

  44. Posted February 6, 2008 at 12:57 pm | Permalink

    Most of the new Microsoft fonts (Consolas) for example aren’t Vista-specific. For the most part, these fonts are included in Office 2007.

    When I installed Office 2007 on my XP machine one of the first “side-effects” I noticed was the excellent selection of new fonts. It never occurred to me to get Consolas a try in my “IDE” (Notepad++).

    I’ll be making some changes in my styling preferences tonight - Consolas should definitely be better on the eyes.

  45. Posted February 6, 2008 at 1:16 pm | Permalink

    Try Droid Sans Mono (link above)! Apart from the lack of slashed-0, it’s the best I’ve found so far.

  46. Posted February 6, 2008 at 3:00 pm | Permalink

    Peter & Adam
    Wow, Droid Sans is great. Thanks.

    I think I’ll be making another post just listing all these fonts that have been mentioned (and examples of them too). There’s a lot I’ve never even seen before.

  47. M-MZ
    Posted February 6, 2008 at 3:22 pm | Permalink

    Interesting article.

    I’ve been programming with fixed width fonts for a long time. Mostly grown out of tradition. I tried quite some fonts, and used lucida console for a long long time. Currently I use Proggy clean 11pt (bitmap font). Great programming font.

    But… After reading a book about GUI design written from a psychological standpoint I’m scratching my head. It shows that proportional text can be read a whopping 14% faster than fixed width text. The reason for this is that you simply will have more letters visible in your field of vision.

    Thought provoking stuff. The question now is. Will I be able to program, find bugs, change code more quickly by simply switching fonts? Should I break with tradition? Of course! 14% seems like lot to be gained. So currently I’m experimenting with a proportional font for programming. Helvetica Neue on the Mac, and Arial on the PC to be exact.

  48. Posted February 6, 2008 at 8:48 pm | Permalink

    Thanks for the leads- I’m currently hunting for my “just right” font:D

    A request if you do a follow-up, though- I would like to see how the fonts handle the ambiguity of similar characters, side-by-side. For instance, capital o (O) vs a zero (0), or one vs lowercase el vs uppercase i vs a pipe, s vs the number 5, m vs an r and n together (m, rn), apostrophe vs that thing on the same key as the tilde, etc.

  49. Posted February 7, 2008 at 1:44 am | Permalink

    M-MZ
    Sounds good, let me know how it works out for you!

    Alex
    Those are excellent suggestions. I’ll keep them in mind.

  50. Posted February 8, 2008 at 1:39 pm | Permalink

    I really like the Bitstream Vera Sans Mono. It took me a while to get it working with emacs on linux, so check out my post if you’re interested in doing that. The relevant part is near the end. http://lojic.com/blog/2008/02/07/nice-fonts-for-gnu-emacs-on-ubuntu-linux/

  51. Paul Walker
    Posted February 10, 2008 at 5:22 am | Permalink

    I, like Kyle, also use Panic Sans… It’s actually re-hinted version of Deja Vu mono (http://dejavu.sourceforge.net/wiki/index.php/Main_Page), which itself is an update of Bitstream Vera Mono, which was first designed as a replacement for Lucida Console on Linux systems (as paying for Lucida Console obviously wasn’t an option). Ah, history.

    Anyway, Panic seems to work better than the others at tiny sizes with OS Xs anti-aliasing. (i use it at 6 pt, so…) on XP, without cleartype enabled, it looks absolutely horrific though — I’d suggest Deja Vu mono instead in that case.

    Recently though, I’ve started slowly switching to proportional fonts (Helvetica) for coding. Unfortunately, my favourite text editor (TextMate) is thwarting my attempts, as it seems to automatically monospace-ise whichever font I use. So for the moment I limited to Helvetica only in Coda & CSSEdit

  52. Posted February 11, 2008 at 12:13 am | Permalink

    Paul Walker
    Haha. What an interesting history indeed… I never knew.

    My text editor is like TextMate for Windows (e), but as far as font selection goes, it’s worse, since proportional fonts aren’t allowed (Monospace only). It doesn’t bother me much now, but it’s no good for testing.

  53. Posted February 11, 2008 at 7:16 pm | Permalink

    Good article! The reason I always preferred Lucida is that it has less dominance on the horizontal lines, which at a smaller font size makes a big difference. Courier or Consolas become very hard to read for me (wearing contacts). Lucida is very distinct to read, except for the O and 0 as you pointed it out. Will definitely give the Bitstream Vera Sans a try, looks like a nice alternative. Thanks for the tip!

  54. Posted February 12, 2008 at 3:08 am | Permalink

    I personally have been using Osaka-Mono 13pt for quite a long time now. The “l” is a similar to Andale Mono, and the “i” is actually about the same as the “l,” although it’s shorted and is dotted. I did look into fixed-pitch fonts a bit, but settled on Osaka-Mono. Not sure if anyone else uses it, but it’s a fresher fixed-pitch font, in my opinion.

  55. Posted February 16, 2008 at 10:23 am | Permalink

    Very nice article, Consolas looks very nice. However, what is that font you used when writing the “By ” text in each image’s top-right corner ? Thank you in advance and keep up the good work !

  56. Posted February 16, 2008 at 10:37 am | Permalink

    Zamo
    Thanks. The font is Helvetica Neue 45 Light, 16pt.

  57. Posted February 18, 2008 at 8:37 am | Permalink

    hey thats great can you tell me how can idle be like above? i want it!

  58. Eli
    Posted February 21, 2008 at 2:45 am | Permalink

    Hey, I really like this post, and I like your color scheme for the preview.
    two questions:
    a. What editor are you using?
    b. Can you link to the color schemes?

    Thanks ;)

  59. Posted February 22, 2008 at 6:15 am | Permalink

    I really detest Courier New. I think it’s just too wide - too few characters per inch, making you scan further across the screen to reach understanding. There’s a reason paperback book pages are only a few inches from left to right margins - there’s an optimal line length for reading. A more dense font, horizontally, makes more efficient use of the space available.

    Forget lines of code which are longer than a screen width, so you have to scroll. Lines of code that are longer than six inches on-screen, from left indent to end-of-line, are uncomfortable to read.

    Anyway, I use Consolas, and if you have Visual Studio 2005, Microsoft have a download of Consolas for you at http://www.microsoft.com/downloads/details.aspx?familyid=22e69ae4-7e40-4807-8a86-b3d36fab68d3&displaylang=en. If you have Windows Vista or Office 2007, you already have it.

    I’m using Consolas right now to type into this edit box. You can change your default fonts in IE, through Tools/Internet Options, then click Fonts on the General tab and select the fonts you want to use. I use Calibri as my default web page font (which appears whenever the page author hasn’t specified a font), and Consolas as the “plain text” font.

  60. Posted February 28, 2008 at 3:30 am | Permalink

    Isnt Courier the mostly used font?

  61. Posted March 3, 2008 at 3:29 pm | Permalink

    who said that programming is not an art - just looks at this post ;-)

    I myself prefer using Monaco for my code.

  62. Posted May 30, 2008 at 8:57 am | Permalink

    Hi — I wound up here via Smashing Magazine.

    Red Hat recently released a set of fonts called Liberation, downloadable at:
    https://www.redhat.com/promo/fonts/

    Like Consolas, the fonts are from Ascender Corp. (Liberation Mono is based on Ascender Uni Duo and Ascender Sans), but they’re completely free, and Windows versions are available.

  63. Michael
    Posted June 4, 2008 at 11:47 pm | Permalink

    So far in this article and the comments, it’s all opinion.
    Have any scientific tests been performed?

    When I was developed computerized typesetting systems decades ago, I remember reading that despite the fact that most people say they prefer sans serif type, the tests show that comprehension goes up with serif fonts.

    The fact that proportional type is more readable has been known for a long time. That’s why publishers used the very difficult method of hot lead typesetting in the days prior to computerized typesetting.

    My other questions:
    1. What is the set of maximally distinct colors for syntax coloring?
    2. Are there any compilers out there (or add-ons to compilers) that can compile proportional type and/or rich text?
    3. What do others think of commenting code in complete grammatical English (or German) sentences?

  64. Posted October 28, 2008 at 6:37 am | Permalink

    People should read this.

  65. Baz
    Posted February 17, 2009 at 7:30 am | Permalink

    A comment about proportional vs monospaced: vertical alignment isn’t the only issue. In javascript, html and xsl, for example, quotes beside apostrophes are very common and in proportional fonts, this looks like a triple quote - you can’t tell what kind of quote mark was used to open the string. It only works in the Helvetica example shown because it is coloured as well, I’d hate to see that in B/W.

    Also, (M-MZ) the 14% faster reading figure: not sure where you get that. Multiple studies have shown that proportional was only 5% faster for medium-to-large sizes, but fixed width was faster for smaller fonts (eg http://www.ncbi.nlm.nih.gov/pubmed/2231111 http://www.iovs.org/cgi/content/abstract/37/8/1492). However, this was for reading prose text - the extra precision required in reading code would more than likely lead to different numbers (this article: http://portal.acm.org/citation.cfm?id=962111.962113 advocates proportional width fonts for code but the only paper cited in evidence is about very large fonts used with prose, in closed captions)

  66. Timothy Gray
    Posted February 18, 2009 at 12:49 pm | Permalink

    I like to see a lot of code at once. I have a 30” monitor and still use Monaco 9pt. It’s by far the most readable font at smaller sizes. I can see 125 lines of code at a glance without sacrificing readability or straining my eyes.

  67. Posted February 18, 2009 at 1:07 pm | Permalink

    What about Monaco? If it comes to me, that’s pretty much the best font for coding ever made.

  68. Posted February 19, 2009 at 6:07 pm | Permalink

    I used to really like Panic Sans, actually, I still do. But Espresso, the new beta text editor for Mac actually has a slightly better typeface called Espresso Sans. I was going back and forth between the two, the R’s, 0, and a couple other letters are actually slightly more readable. I am picking at straws because most people would not be able to tell the difference unless they blipped back and forth.

    http://dl.getdropbox.com/u/18782/espressoSans.png

    I too am very picky about my code editor, fonts and style. I use Monokai for my color scheme as well. It should be noted that BOTH Panic Sans and Espresso Sans fonts can be extracted from their respective .app folders. No idea how these puppies would look on windows though. Cheers

  69. Posted February 20, 2009 at 6:33 am | Permalink

    I never really stuck with Courier new, especially when I got my mac. I almost immediately chose another font, in my case Monaco. It must be one of the best and most readable of the fixed width fonts available on the mac.

  70. Posted February 20, 2009 at 6:57 am | Permalink

    Nice collection!
    You forgot about Monaco font on osx ;)

  71. Michael
    Posted February 22, 2009 at 5:08 pm | Permalink

    A few issues:

    1. These studies seem to show that monospace is better for point sizes near the limits of readability, which is probably not a good size to use in the first place.

    2. Proportional space fonts fit more text on a line and greatly decrease the number of times you have to use the very unsightly and less readable practice of line breaking within a statement, esp. a control statement (if, while, for).

    3. The biggest problem with proportional fonts is that they affect where the lines break, thus the reader must use the same font as the author. This cannot always be readily assumed. It’s like the same problem with indenting and line breaking in an email message.

    4. One of the really big problems of the Web: Different fonts look different on different systems. Most body text on the Web is in sans serif, because most people use Windows, whose character rendering (anti-aliasing) algorithm is far inferior to the one used on a Mac. I often change the font to Georgia, a serif font, because I use a Mac. This also affects the readability of font sizes.

    5. Finally, as all these studies seem to point out, readability is different for different people. Vision varies a great deal from person to person.

    PS: I am over 40, moderately nearsighted, and wear glasses for distance (driving, walking, etc.) but not for reading (and walking around the house). This has been the case since I was about 12.

  72. Nicolas
    Posted February 23, 2009 at 3:55 am | Permalink

    Link for Monaco font for Windows: http://www.webdevkungfu.com/textmate-envy-aka-monaco-font-for-windows/

  73. Posted March 24, 2009 at 8:09 pm | Permalink

    Это хорошо что вы начали вести блог,ведь у вас это отлично получается и надеюсь будет еще лучше. Главное писать о том,в чем вы разбираетесь. Удачи. :)

  74. Posted March 29, 2009 at 2:53 pm | Permalink

    Хорошая статья, как и все предыдущие были. Буду теперь и далее следить .

  75. Posted April 12, 2009 at 8:22 am | Permalink

    Занятно написано. А это все на основе Вашего личного опыта?Позвольте полюбопытствовать :)

  76. Josef Go-Oco
    Posted June 7, 2009 at 5:56 pm | Permalink

    You can try to search for Inconsolata, it’s quite nice. I’d like to recommend Lucida [Sans] Typewriter Std as well.

    Frankly, I just use Karmina or Dolly.

  77. Posted June 7, 2009 at 11:41 pm | Permalink

    Interested post, tnx

  78. Eric
    Posted June 18, 2009 at 1:30 pm | Permalink

    the link you gave to your color scheme is not working anymore. Any chance of uploading it again? please! :D

  79. Posted July 1, 2009 at 3:44 pm | Permalink

    Imi place foarte mult acest post despre tipografie

  80. Posted July 7, 2009 at 8:23 am | Permalink

    Автор, а скажите а куда написать по поводу обмена ссылок (на какое мыло)?

  81. Posted July 23, 2009 at 6:50 pm | Permalink

    списки кандидатов, выдвигаемые партиями политическими и избирательными объединениями (блоками) для выборах в представительные органы, проводимые сообразно пропорциональной избирательной системе.

  82. Posted July 28, 2009 at 9:26 am | Permalink

    Познавательно. Подпишусь-ка я на RSS пожалуй. :)

  83. Posted October 5, 2009 at 2:25 pm | Permalink

    ykoirvqqioba

64 Trackbacks

  1. By TypeSites at livingtech on February 4, 2008 at 5:41 pm

    […] a bit of a syntax fascist, enforcing strict whitespace rules whenever I can.) Which leads me to an article on the typography of code, which another co-worker sent around the office today. I liked the article, but think it spent all […]

  2. By Full Valence » Blog Archive » Programming Fonts on February 4, 2008 at 7:36 pm

    […] I’ve long been dissatisfied with Courier New as a programming font; I’ve found the characters to be bulky and the serifs distracting.  For the past year or so I’ve settled on the beautiful Lucida Console as my favorite font to code in.  Lucida Console is bundled with Windows XP and Windows Vista, and unfortunately it doesn’t seem to be available for free redistribution.  However, you can find some other aesthetically pleasing fixed-width programming fonts, some of which are available for free download, at Hamstu’s Typography of Code. […]

  3. By Mark’s Link Blog » links for 2008-02-05 on February 5, 2008 at 1:21 am

    […] the hamstu » The Typography of Code (tags: fonts typography programming monospace code) […]

  4. By Sunt un iubitor de tipografie | Blogul lui Viorel on February 5, 2008 at 9:37 am

    […] şi să vă personalizaţi spaţiul de lucru. Aşa că puteţi să folosiţi câteva din fonturile monospaţiate pe care le studiază lumea în […]

  5. By Sp3w on February 7, 2008 at 9:10 am

    […] Typography of Code Syntax highlighting is great. But no matter how well your code is marked, it can never make up for a well thought out typeface. One that is properly spaced, has distinct and readable characters, and is flexible at various sizes. […]

  6. […] has an article that will be of special interest to just about anyone who writes code. In The Typography of Code, he considers five typefaces for programmers. Bitstream Vera Sans Mono (free and Open Source) is […]

  7. […] von euch programmieren mit Courier New als Editor-Schriftart. Wie wäre es mal mit einem Wechsel? Ein Überblick über 5 verschiedene Monospace-Fonts offenbart einiges an […]

  8. By The Typography Of Code at memoirs on a rainy day on February 10, 2008 at 7:49 pm

    […] The typography of code by Hamstu. These icons link to social bookmarking sites where readers can share and discover new web pages. […]

  9. […] the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. You might want to check out 22 more Monospaced/Fixed Width Programmer’s Fonts as […]

  10. By Visual Studio Colors and Fonts (My) | .:: ju ::. on February 15, 2008 at 11:41 am

    […] The Typography of Code Download Andale Mono Font Smashing Magazine - Free Fonts Of The Month: Advent Pro, Telegrafico […]

  11. […] the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. You might want to check out 22 more Monospaced/Fixed Width Programmer’s Fonts as […]

  12. By Free Fonts Of The Month | tkblog on February 16, 2008 at 10:46 am

    […] the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. You might want to check out 22 more Monospaced/Fixed Width Programmer’s Fonts as […]

  13. […] the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. You might want to check out 22 more Monospaced/Fixed Width Programmer’s Fonts as […]

  14. By Command-Tab on February 19, 2008 at 4:43 pm

    Finding the Perfect Programming Font…

    Inspired by The Typography of Code, I took a few snapshots of some of my favorite programming fonts.
    BitStream Vera Sans Mono

    BitStream Vera Sans Mono is a completely free font part of the GNU font package and has been my preferred coding font for the…

  15. By Another Coding Catastrophe on February 22, 2008 at 5:35 am

    […] on my discovery into the visual style of code I also came across an article on The Typography of Code at Hamish Macpherson’s blog, where he explains some of his favorite fonts he’s used in […]

  16. By Бесплатные Шрифты Месяца on February 22, 2008 at 6:31 am

    […] The Typography of Code Очень четкий моно раздельный шрифт, который был первоначально распределен как часть Internet Explorer 4.0 […]

  17. By The Typography Of Code « memoirs on a rainy day on February 24, 2008 at 4:32 pm

    […] The Typography Of Code Published February 10, 2008 asides , design Tags: asides, code, design, Hamstu, typography The typography of code by Hamstu. […]

  18. […] de alguna alternativa, hasta que finalmente llegue al estupendo y perfecto artículo de “The Typography of Code” por the hamstu vía i love […]

  19. […] Quelle: Hamish Macpherson […]

  20. […] post I stumbled across, The Typography of Code by Hamish Macpherson, resulted in an additional step into prepping a new computer for readiness. […]

  21. By Fonts..... - MacTalk Forums on July 25, 2008 at 12:24 am

    […] You don’t want a mass-pack of fonts - how would you know if the one you wanted was in there? There’s literally 100’s of 1000’s of fonts out there (free and commercial) - it becomes very difficult to guarantee quality in any package of fonts. For fixed-width fonts for use in terminal, I’d suggest starting your reading here: Monospace/Fixed Width Programmer’s Fonts the hamstu The Typography ofCode […]

  22. By -= Linkage 2007.02.07 =- on January 26, 2009 at 10:39 am

    […] Typography of Code<br/> Syntax highlighting is great. But no matter how well your code is marked, it can never make up for a well thought out typeface. One that is properly spaced, has distinct and readable characters, and is flexible at various sizes. […]

  23. […] hamish mcpherson from blog.hamstu.com just published a nice article about using fonts for programming code. here’s the link: http://blog.hamstu.com/2008/02/03/the-typography-of-code/ […]

  24. By Links about Typography | vitali software on February 19, 2009 at 12:22 am

    […] typographic tools, techniques and resources for creating effective and expressive designs. The Typography of CodeAn interesting article about typography in […]

  25. By Мързеливец и Co. - The Typography of Code on February 19, 2009 at 4:38 am

    […] The Typography of Code « Мързел   […]

  26. By links for 2009-02-21 | This Inspires Me on February 21, 2009 at 5:17 am

    […] The Typography of Code (tags: typography code) […]

  27. […] the hamstu » The Typography of Code. Posted by willwm Filed in C#/ASP.NET, C/C++, Eclipse, Java, JavaScript, Programming, SQL, […]

  28. […] [upmod] [downmod] the hamstu » The Typography of Code (blog.hamstu.com) 0 points posted 10 months, 1 week ago by jeethu tags fonts code programming […]

  29. […] the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. You might want to check out 22 more Monospaced/Fixed Width Programmer’s Fonts as […]

  30. […] 下面是几款等宽字体的介绍连接, 可以试用下, 猛击此处 […]

  31. […] Andale MonoAndale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  32. […] Andale MonoAndale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  33. […] Credits: Hamish Macpherson […]

  34. […] Link to the original ‘the hamstu » The Typography of Code’ […]

  35. […] Kuler to select matching colors and also experimented with alternative font types, after reading Hamish Macpherson’s article “The Typography of Code”. Here’s the […]

  36. […] at for hours at a time. I got the idea from an article by “the Hamstu” entitled “The Typography of Code,” which I recommend as a fun place to […]

  37. By Links for 2009-07-01 at .swfgeek on July 1, 2009 at 10:11 am

    […] the hamstu » The Typography of Code As a self proclaimed programmer/designer I enjoy not only the logical and practical things in life, but also the beautiful and well designed. And I find the greatest pleasure when these things converge to produce something extraordinary. […]

  38. […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  39. By Tipografia nos códigos on July 15, 2009 at 11:08 am

    […] papel importante, uma vez que torna o texto e código mais claros e de melhor leitura. Os blogs Hamstu e Hivelogic postaram sobre o assunto, incluindo uma lista, que transcrevo a seguir, com as 10 […]

  40. […] http://blog.hamstu.com/2008/02/03/the-typography-of-code/ […]

  41. […] Andale MonoAndale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  42. […] Andale MonoAndale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  43. […] for yourself. the hamstu » The Typography of Code has a number of free options which were designed for smaller fonts, such as those in code editors. […]

  44. […] Andale MonoAndale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  45. […] Andale MonoAndale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  46. […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  47. […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  48. […] Credits: Hamish Macpherson […]

  49. […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  50. […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  51. […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  52. […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  53. By 20 New High Quality Free Fonts | Smashing Magazine on November 15, 2009 at 9:04 pm

    […] […]

  54. By 20 New High Quality Free Fonts | Buddy's Blog on November 15, 2009 at 10:32 pm

    […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  55. By 20 Neue Hochwertige Schriften on November 16, 2009 at 2:37 am

    […] Credits: Hamish Macpherson […]

  56. […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  57. […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  58. […] Andale Mono Andale Mono es una monoespaciado altamente legible que se distribuyó originalmente como parte de la de Internet Explorer 4.0 para Firefox la página como Monotype.com. Se distingue así entre el cero y el O. Usted puede encontrar más fuentes de monoespaciado 4 en el artículo Hamish Macpherson La tipografía del Código de. […]

  59. […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  60. […] Credits: Hamish Macpherson […]

  61. […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  62. […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  63. By 20 New High Quality Free Fonts | Al8z.Com on December 15, 2009 at 12:09 pm

    […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

  64. […] Andale Mono Andale Mono is a highly legible monospaced font which was originally distributed as part of the Internet Explorer 4.0 add-ons page as Monotype.com. It distinguishes well between the zero, and the O. You can find 4 further monospaced fonts in Hamish Macpherson’s article The Typography of Code. […]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*