When I first started dabbling with HTML, it was from within the Notepad program on Windows 98. The font used was the one and only fixedsys, which happens to be the oldest font on Windows, dating all the way back to version 1.0.
Digital typography has come a long way in the last decade, and a wide array of monospaced beauties are now available for our coding pleasure. But what’s the best font choice when it comes to code? What about size? What about color? I think a lot of these decisions come down to personal preference, but one thing’s for sure, when you’re staring at a screen for hours on end, readability is paramount.
After a dark age of experimentation with WYSIWYG editors in the early 2000’s, I began to return to my coding roots. Sometime around 2003, I made the switch to Dreamweaver. Dreamweaver was the first editor I had used that took advantage of syntax coloring. The ability to recognize elements greatly increased scannability, and helped keep me in line while trying to write valid code.
Some CSS syntax styling with Dreamweaver
At the time, I was using 9pt Monaco. The 9pt size was the default setting, and I must have just gotten used to it, because I left it like that for several years. That all changed when I noticed some of my coworkers beginning to use a program called TextMate.
The theme that seduced me away from Dreamweaver was called Black Pearl. The light and mid-toned colors on the dark background had so much more contrast than the stark white I was used to. Colors aside, I noticed the font was much larger (12pt Monaco) and employed a beautifully rendered anti-alias.
I am now myself a proud owner of TextMate, and am loving the Blackboard theme. Tim and Luke both use the same theme, so this makes it easy to recognize syntax when we’re helping each other with code.
A slice of 12pt Monaco from TextMate's Blackboard theme
But to each his own! I almost decided to use Coda for the sheer sake of adding ‘Panic Sans’ to my font library. Here are a few more runners up in my book:
- Andale Mono
- Consolas
- Bitstream Vera Sans Mono (Panic Sans’ parent)
- Lucida Console
What’s your favorite coding font?
Tags: Coding, Typography
I use 10pt Consolas with a light on dark theme, and I prefer a bit smaller font size to fit more on the screen, 12pt would just be too much scrolling (esp. sideways).
I’ve also played with Bitstream Vera Sans Mono, and used Lucida Console before I found Consolas.
A few other fonts that I’ve looked at, but for some reason or other didn’t really like: Inconsolata (a Consolas “clone” for printing), Droid sans (created for the Android phone OS), and Envy Code R (created by a coder). You might also check out TheSans Mono (Consolas’ parent)
Some things to look for when picking a coding font is differentiation between glyphs. Many fonts use similar (if not the same) glyph for things like capital O (oh), and 0 (zero). Also check for the similarity of the I (capital eye), l (lower ell), and 1 (one) glyphs.
Other things to look for are the visibility of punctuation marks, such as the period, comma, semi- and regular colon. I also look for things like the width of the angle brackets ( < and > ), and the shape of the other brackets { ( and ) } (I prefer a parenthesis that is semi-circular, don’t ask me why)
Consolas is a good font, it has those things that I really like in a coding font, the letters are of course monospaced, but they don’t look like a throwback to Courier. They have personality, and the italic version of the glyphs are actually different, instead of the same glyphs with a slant, which actually blew my mind when I noticed it, because I had never seen anything like it before. The bold glyphs are also the same width as the normal glyphs, which is pretty nice.
… and it’s designed to work with font smoothing, which makes it look sooo nice.
As a sidenote i liked the fonts used in sIFR over here. I guess its the same Diavlo which i used for a header on my site.
@benjam: Good point about glyph differentiation. I use consolas as the primary font on this site for anything wrapped in a code tag (assuming the user has the font installed). Thanks for the other suggestions too, I’ll check them out.
@debashish: Yep, it’s Diavlo alright. The characters make excellent ninja weapons when put in the right context.
I use Monaco 12pt., mainly because it is the default in TextMate. I use the same Blackboard theme for HTML, PHP, etc, but I did configure my CSS to have mainly Yellow, Red and Blue in support of my favorite soccer team – Real Salt Lake. The entity is white, the support is blue, constant is red, keyword is yellow. I have never really tried any other font.
Terminus 12pt
info: http://fractal.csie.org/~eric/wiki/Terminus_font
screenshot: http://tinyurl.com/ck9auh
Using it for years and I love it.
I have the Monaco 12pt setup in TextMate but I just did a little research and got Panic Sans going in TextMate. It looks nice and I will try it out for a while. To get Panic Sans to be available to other apps you need to download Coda and install it, then right click on the application in your applications folder and then click on show package contents. If I remember right the font is then in the resources folder. Take it out and install it and you will have it for all other apps to use.
2008: Monaco 9pt
2009: Consolas 10pt
@ Abraham:
2010: Comic Sans! jk
I was going to install Panic Sans, but I noticed that TextMate renders the anti-alias a lot bolder than when the font appears in Coda. Maybe it was the anti-aliasing that initially attracted me to the font…
Has anyone else noticed drastic changes in font rendering between programs? Textmate is too bold, Dreamweaver is non-existent, and Coda is the lukewarm porridge of programing apps (for me anyway).
I’ve been using ProFont for years and love it. It was designed to be used for programming and displayed at a small font size. Check it out:
http://www.tobias-jung.de/seekingprofont/seeking.html
http://www.tobias-jung.de/seekingprofont/index.html
I’m using proggy clean
Link: http://www.proggyfonts.com
Screenshot: http://www.irtguild.net/imgdump/proggy.png
Dan Benjamin gives a rundown of his top 10:
http://hivelogic.com/articles/view/top-10-programming-fonts
His list includes many of the fonts listed here as well.
A couple years back, after much searching and much perusal of blogs & forums on this very topic, I discovered Century Schoolbook BT Mono: http://www.font-zone.com/download.php?fid=2799
There’s a reason most books & magazines use a serifed font for body copy–they’re more readable & cause less eye strain when consuming large chunks of text. Doesn’t matter if that text happens to be code. Unfortunately serif monospace fonts are few & far between. Century Schoolbook BT Mono is both, plus is good lookin’ & has character.
Whoa, that’s pretty cool Seth! I haven’t seen a mono-serif coding font before. I’m going to have to try that out.