Skip to content

Making Github’s Code Readable

I love Github.  We recently decided to become paid customers at work, and I’m tickled.

I also can’t stand reading code on the site.

Why?  Frankly, the text is plain old ugly:

before

Those italicized comments look like faintly-etched glass.  And the bolded bits look clumsy as well (check out the ‘m’ on ‘module’)!

What’s with the ugly?  Let’s ask Firebug:

firebug

‘Bitstream Vera Sans Mono’?  Never heard of it.  Haven’t got it installed.  If you’re on Windows or OS X, you probably don’t either.

Okay, so I haven’t got Bitstream, so it looks like we’re falling back t–oh my GOD it’s COURIER.

Yes, Courier.  Invented in the 1950s.  For typewriters.  I think I last used this font while editing GORILLA.BAS to mess with the speed and gravity.  No one should be using Courier anymore (unless you’re writing a screenplay).

Fortunately, there are two easy ways to fix this.  The first, you and I can do.  The second will have to be done by the Github guys.

What we can do: install Bitstream Vera Sans Mono.

Download it here.

Installation is OS-specific, but I bet you can figure it out.

Here’s how things look after the install:

after

Sweet mystery of life at last I’ve found you!  This is about…a billion times more readable.

Now, the experience of not having their first-choice font shouldn’t have been so painful.  If you’re going to lead with a talented but fragile rookie, make sure you have a dependable second-string something something sports analogy.

Anyway, the Github guys should change ‘Courier’ to ‘Courier New’ in their stylesheet. Courier New is an updated and refreshed grand-child of Courier, and it’s far more readable, especially when bolded or italicized.  Plus it’s just as widely installed as Courier.

Little change on our side.  Little change on their side.  Code looks beautiful; everyone’s happy.

Github — no longer a butterface.

10 Comments

  1. dude wrote:

    First of all, you’re a programmer and you don’t have bitstream vera sans? Second, looks like you’re on windows so you’re used to having everything look like shit… Why would github cater to people with such low standards to begin with?

    Sunday, November 1, 2009 at 9:03 am | Permalink
  2. mcrittenden wrote:

    Or just set up a userstyle to make it use whatever typeface you want it to.

    Sunday, November 1, 2009 at 9:08 am | Permalink
  3. masklinn wrote:

    FWIW in OSX, courier (the default monospace font for both Safari and Camino) looks pretty good I think.

    Sunday, November 1, 2009 at 9:09 am | Permalink
  4. Olivetti Underwood wrote:

    Not to mention the general butt-ugliness of blogs in general. Wake up, web!! This is 2009, not 1985. People have high resolution screens and don’t need to read “light gray on white” type in 4 point helvetica. Pretty much anything is more readable. Any more “90% gray” and I’m going to program firefox to substitute fonts and colors mercilessly.

    Sunday, November 1, 2009 at 9:30 am | Permalink
  5. gene t wrote:

    I’ve made suggestions, they respond pretty quickly, within an hour (i.e. , they don’t implement your suggest in an hour, they indicate they’ll work on it, ). One was that they do some kind of primitive code folding based on line indentations;

    http://github.com/contact

    Sunday, November 1, 2009 at 11:10 am | Permalink
  6. anon wrote:

    Fonts always look ugly on Windows. It looks fine on mac (Courier), and would look fine on Linux (Bitstream Vera is a pretty standard font). Font rendering is also better on those OSs

    Sunday, November 1, 2009 at 8:57 pm | Permalink
  7. Hans wrote:

    C’mon, if you want your code to look good don’t use Windows. But if you insist, your problem is font rendering so you colud try GDI++, take a look at this http://vladg.com/2009/03/make-windows-fonts-look-as-smooth-as-mac-os-x-fonts/.

    Monday, November 2, 2009 at 12:18 am | Permalink
  8. Dan Croak wrote:

    “If you’re on Windows or OS X, you probably don’t either.”

    To all those “blame Windows” commenters, I believe the author is not on Windows. I’ll take a wild guess and say Ubuntu.

    I’d second the Userstyle idea.

    Github’s code looks pretty good on my Mac OS X, I think because of their super-duper anti-aliasing?

    Friday, November 27, 2009 at 11:14 am | Permalink
  9. Dan Croak wrote:

    Also, we started to write an iPhone Gorillas app as a goof: flick the touchscreen to send the banana through the air on a TV screen. The two players have their own iPhones used as controllers.

    Friday, November 27, 2009 at 11:16 am | Permalink
  10. Max wrote:

    The reason for selecting courier, I believe, is that it is a well known, commonly used, and widely supported fixed pitch font. I personally love fixed pitch for coding, because it causes my text to line up well, so if I am calling the same method on a list of parameters, as often is the case when writing to configuration or log files, I have the parameters in columns, and can use my text editor’s column mode to edit them simultaneously. I also find it more readable, as code must be interpreted by my mind and deciphered, I often find myself looking for a specific part of the line; my eyes are in column mode. I agree that the example you showed was badly formatted, but I think the font size was the issue, not the type, and I feel that you could have solved the problem locally with a script like “readability” or such.

    I do not post this to bitch – I liked the rest of the post. I just happen to have courier’s back on this matter.

    Sunday, January 31, 2010 at 7:42 pm | Permalink

Post a Comment

Your email is never published nor shared.