Friday, March 12, 2010

Visual Studio 2010 - Revisiting Themes and Fonts

[update: 4/2010 - there is a new color schemes site for visual studio that also has several alternate themes, including the humane studio theme discussed here. ]

With the pending release of VS 2010 and it's shiny new UI, I thought it time to revisit the topic of color schemes and fonts. I have typically use a hacked up "dark theme" in VS 2008 with a black or near-black background, but I wasn't too thrilled with the results after porting my previous color scheme over to VS 2010.

I've always been decently happy with Visual Studio's text editor once I change a few of the more retarded defaults (really? Line numbers aren't enabled by default?). But that default white background with dark text is a bit harsh on the eyes.

I personally prefer darker color schemes, but Visual Studio has never been a "theme" friendly app. You can easily import and export settings, which serves as a poor-man's kind of theme though, but overall personalizing the theme is Visual Studio is always a pain in the ass.

So the first thing I did was try to find a new base theme online that I could start from, then customize it to my own preferences.

Every time I try a black background based theme, I keep running into the same problems:
  1. There too few colors that are bright enough to contrast readably against a black background. This is exactly why so few web pages use black-grounds despite their popularity among web users.  

  2. A good editor color-codes text to help the developer quickly interpret the meaning and structure of their code. For Visual Studio you need about a dozen distinct colors, which is not easy against a black-ground.

  3. Most colors that are usable on black are the really bright ones like hot pink, lime green, and electric blue. These tend to clash easily with each other though, and I often end up with a nauseatingly horrible color scheme as a result.
With VS 2010, these problems are just harder to get around. The new version adds yet more color-coding, all of which is useful. So this time, I tried a few of the compromise themes.... Ones that aren't based on black/near-black backgrounds. The most interesting of these turned out to be a theme called HumaneStudio:




The colors remind me of an old editor (whose name I cannot remember) from back around 1995 or so. It uses a series of browns for backgrounds, and for text a mix of various earth tones from across the color spectrum.

I didn't expect to actually like this theme when I downloaded it. Earth toned stuff isn't my thing typically, but after only a few minutes working with it I discovered this was quite possibly the most fantastic theme ever! The colors are dark enough not to be too harsh on the eyes, and the wide array of available text colors works effectively with Visual Studio's color coding. I did have to make some minor changes though: First I replaced the font...

A mono-space font is non-negotiable for code editors (so says me!), but there are several good mono-space fonts to choose from. There are six that I personally recommend, all of which achieve a decent balance between long-term readability and efficient use of screen space:

Serif fonts:

A serif is the little ticks at the edges of characters. These come from the old days where chisels were used to carve letters in stone or wood. Serifs tend do improve readability of text, especially with larger blocks of smaller text. Most books, newspapers, and other text-heavy documents use serif based fonts for this reason. These fonts are less visually appealing at larger sizes though, so serifs are less common for titles, signs, and short text scenarios. Serif fonts also tend to be more readable on older low-resolution electronic displays. A major drawback to serifs is that they tend to bleed into darker backgrounds. The serifs can even disappear completely when used on black at small font sizes.

  • Courier New (Serif) - This is an old font, and been the default for windows text editors for a very long time. The problem is that it wasn't designed for modern high-resolution LCD displays. Quite the opposite actually, as this variation was specially designed for readability on older low resolution CRTs. Courier New wastes a lot of horizontal space, and doesn't scale smoothly. Still though, this font and has been around a very long time for very good reasons, and remains a quite serviceable font today.

    Courier New sample
         
  • AnonymousPro (Serif) - This is a modern serif font. It is more stylistic than courier and has been designed with today's higher-resolution LCD displays in mind. It remains highly readable even on dark backgrounds, though the serifs are subtle enough to bleed out almost completely on black backgrounds. This is my favorite of the serif fonts.

    Anonymous Pro sample
         
Sans-Serif fonts:

These fonts lack the ticks at the edges and most people find them much more visually appealing. The drawback is that sans-serif characters can be less recognizable at smaller sizes. Sans-serif fonts do allow more flexibility in character shapes, which leads to more artistic styles. With today's higher resolution displays, sans serif fonts are increasingly common even for dense and small text cases where serif fonts used to dominate. Sans-serif fonts don't suffer as much from use on black backgrounds so long as the characters aren't over-stylized or too compressed.

  • Consolas (Sans-Serif) - This is Microsoft's new favorite mono-space font, and is the default for VS 2010. It was designed specifically for LCDs and is further optimized for Microsoft's Cleartype font rendering technology. On dark backgrounds at smaller sizes though this font tends to flatten out awkwardly (in my opinion). On light backgrounds though, this is one of the best fonts ever invented. It scales very smoothly and is exceptionally pleasant at medium to large sizes. Though not a serif font, the character styles are very similar to serif fonts like courier new.

    Consolas sample
         
  • DejaVu (Sans-Serif) - This is a variation of the Vera font family, and is very popular on linux systems. The general shape is similar to Consolas, but the characters are taller, a tad wider, and the style is a little more rounded. It doesn't flatten out like consolas at smaller sizes, and for this reason it has become my personal favorite on black or near-black backgrounds.

    DejaVu sample
         
  • Envy Code R (Sans-Serif) - This is a somewhat bizarre font with a wilder style. It uses thin lines and is somewhat compressed, but overall I'm not personally fond of it. It is a popular developer font though, and has decent readable even on dark backgrounds, but long-term readability does suffer at smaller sizes.

    envy code r sample
         
  • Monaco (Sans-Serif) - This is a windows version of the popular font used in TextMate from the Apple universe. This is the largest of the fonts listed here. It also has a fancy stylistic look with unusual character shapes. While pleasant to look at, I find that it wastes too much space all around. It does render very well on dark backgrounds, mostly because of the exaggerated size of the characters. It is a solidly readable font once you get used to it.

    Monaco sample
         
The default font for the HumaneStudio theme is "Envy Code R". While this is a neat font, it is just too "stickish" for my tastes. I switched the default font to either AnonymousPro or DejaVu. I also removed all of the "bold" text effects from the theme's settings; the bold effect work well with Envy Code R, but not so much with my own preferred fonts.

I'm torn between AnonymousPro at 11pt and DejaVu at 10pt with this theme.

In VS 2008 AnonmousPro is my preference, but VS 2010 renders text differently. I'm finding that I am leaning more towards DejaVu in VS 2010. Another area that required some customization was the output and find windows. HumaneStudio's default settings uses a custom font called Palm OS. This is a terrible font! The color scheme for these windows is also a green-on-green "lime explosion" type thing. I like the stark contrast of these windows compared to the warm tones of the main editor window, but I had to change the background to black to make the output and find text comfortably readable at such extremely small sizes. For the font in these windows I stuck with AnonymousPro at 8pt.

Overall, HumaneStudio is probably the best theme I've ever used in a code editor. It was very easy to get used to, and it holds up amazingly well during long coding sessions without causing me any eye fatigue. This theme also has a lot more flexibility for customizations than most black based themes.

On VS 2010, the warm earth-tones in the editor window tends to contrast poorly with the default VS 2010 scheme for menus, borders, and the other non-text editor features. By default, these are based on a stark blue color theme, and these settings cannot be changed directly in the options menu. Fortunately there is an extension for VS 2010 that allows you to customize these non-editor colors. The extension's built-in "autumn" scheme seems to fits in with the Humane Studio editor theme perfectly.

I've put my own variants of the Humane Studio theme if you want to try them out yourself:



You'll want to get the AnonymousPro and DejaVu fonts and install them before you load the themes.