Beyond the Button

Are you spending hundreds of hours starting at ugly code? No I'm not insulting your PHP, ActionScript, or VisualBasic abilities, I just think you might need to pick a different font. After lots of searching, testing, and frustration I picked the lovely ProFont. Here's why.

Typography isn't just for designers

I regularly agonize over a font choice for some piece of media design. A bad font can make copy hard to read and confusing. However, one day I realized I had never considered the fonts I was starting at in my code. Since I would be spending lots of time starting at gobs of text that look like gobbledegook to the average viewer, I thought I should do some research into what makes a good programing font.

Precision please

A programing font should be precise. Every character counts in programming. I needed a font that made it real easy to tell the difference between commonly confused characters: O0ilLI1. I didn't want to have to squint to see if that variable was an l or an i, or maybe an O instead of a Zero.

A programing font should also be monospaced. That is, every character in the font should get the same width so that multiple lines of code line up no matter what characters you have typed. This is especially important for comment blocks, lists of variables and arrays, as well as tabbed conditional statements.

I also wanted something that was simply easy to look at. Several of the fonts I tested looked blury at large sizes or pixelly at small sizes. I needed to pick something that was going to do my eyes some favors.

ProFont to the rescue

After testing several fonts I've finally settled on ProFont. I use it in BBEdit and my command line program (iTerm, a great replacement for OSX's default Terminal). I am mostly a Mac person but I even use ProFont when I am trying to hammer out some old code in VisualBasic on a Windows machine from time to time.

ProFont does a fantastic job distinguishing between all those easily confused characters, has good monospacing, and sizes well so I can view it small or zoom it extra large when I am showing code to a group.

Many other options exist out there and people are pretty religious about their choices. Here are several resources that you should consider in your search for the perfect font:

• Monospaced fonts - A list of programing fonts ranked by the author's preference. This site contains image samples of the different fonts which helps a ton in checking them out.
• More programing fonts - Another list of fonts with some other favorites not listed above.
• Anonymous - A great font by Mark Simonson. This was my runner up that I really tried to use for some time. However, it isn't truly monospaced on some characters and comment blocks appeared all wonky with it. I really wished I could have settled on this one.

The Elements of Typographic Style Applied to the WebDigital displays are standing in for print graphics in more and more physical museum exhibits. Typography plays an important role in any print graphic design but is rarely attended to with as much detail in media displays or web design. Most of this is the result of fluid layouts and a limited number of tools to control the appearance of a web design.

The Elements of Typographic Style Applied to the Web provides many specific examples using HTML and CSS markup to properly display information with text. I am especially pleased to see them covering a great deal of minutiae that the average code monkey wouldn't be likely to consider in designing a website.