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.
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 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
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
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).
- Lucid Console
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
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.
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
- A great list/review of programming fonts
- Jeff Atwood’s thoughts on programming fonts
- I Love Typography — great resource on all things typography
- PHPRunner — somewhat unrelated, but it’s a program I wrote a few weeks ago, and the source of the Python code examples used in the images above
61 Comments
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
I’m loving the andale mono. Think I might switch to that full time.
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
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.
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. :)
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.
My personal choice (for several years now) is ProFont. http://www.tobias-jung.de/seekingprofont/
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.
Victor & Steve
Thanks for sharing. :)
DejaVu Sans Mono is excellent. Pretty much Bitstream Vera Sans Mono with lots more characters.
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. ;)
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.
My favourite is Terminus (12pt, green on black ;)
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.
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.
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. :)
Kyle
Ah, it’s programs like Coda that make me wish I owned a Mac, *sigh*
Thanks for sharing!
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.
I meant ‘Fixed-pitch’ :D
Galo
The fonts used for the comparison are Consolas and Myriad Pro, respectively.
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!
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.
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.)
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.
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.
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.
love it ! … i’ll try a new font now ! ! !
I’m rather partial to Droid Sans Mono, myself: http://damieng.com/blog/2007/11/14/droid-sans-mono-great-coding-font
I agree with #28, droid is my favorite
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.
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!
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.)
@Matt (32): I believe the vertical lines are a feature of BBEdit for Mac, showing the tab stops.
how about Akkurat? http://www.lineto.com/The+Fonts/Font+Categories/Text+Fonts/Akkurat+Mono/
I was actually really surprised that you didn’t showcase Inconsolata. In my opinion, only Consolas comes even close to it.
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 :)
@Ajay: Both Consolas and the current Inconsolata version have a slashed zero.
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?)
What’s the color scheme in use in these screen shots?
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)
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?
Consolas Font Pack for Microsoft Visual Studio 2005 http://www.microsoft.com/downloads/details.aspx?familyid=22e69ae4-7e40-4807-8a86-b3d36fab68d3&displaylang=en
Very nice article!:)
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.
Try Droid Sans Mono (link above)! Apart from the lack of slashed-0, it’s the best I’ve found so far.
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.
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.
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.
M-MZ
Sounds good, let me know how it works out for you!
Alex
Those are excellent suggestions. I’ll keep them in mind.
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/
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
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.
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!
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.
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 !
Zamo
Thanks. The font is Helvetica Neue 45 Light, 16pt.
hey thats great can you tell me how can idle be like above? i want it!
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 ;)
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.
Isnt Courier the mostly used font?
who said that programming is not an art - just looks at this post
I myself prefer using Monaco for my code.
20 Trackbacks
[…] 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 […]
[…] 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. […]
[…] the hamstu » The Typography of Code (tags: fonts typography programming monospace code) […]
[…] ş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 […]
[…] 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. […]
[…] 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 […]
[…] 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 […]
[…] The typography of code by Hamstu. These icons link to social bookmarking sites where readers can share and discover new web pages. […]
[…] 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 […]
[…] The Typography of Code Download Andale Mono Font Smashing Magazine - Free Fonts Of The Month: Advent Pro, Telegrafico […]
[…] 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 […]
[…] 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 […]
[…] 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 […]
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…
[…] 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 […]
[…] The Typography of Code Очень четкий моно раздельный шрифт, который был первоначально распределен как часть Internet Explorer 4.0 […]
[…] The Typography Of Code Published February 10, 2008 asides , design Tags: asides, code, design, Hamstu, typography The typography of code by Hamstu. […]
[…] 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 […]
[…] Quelle: Hamish Macpherson […]
[…] post I stumbled across, The Typography of Code by Hamish Macpherson, resulted in an additional step into prepping a new computer for readiness. […]