I've spent a few hours over the last few days reading Butterick's Practical Typography, which I felt might be a good idea considering that I enjoyed his rant about Web Design that I posted a while back. I feel that in some ways I damn myself as the worst (or best, depending on how twisted your perceptions are) type of geek for being interested in and recommending a book on the intricacies of typography. Though really, much as there is on the site, it's still only a primer, and I don't think I'm going to go much farther down the rabbit hole than this.

The further I read through the book, the more little details in my site started to annoy me a bit. As a result, I've spent even more hours slowly and meticulously changing the styling and fonts of this blog. The changes are relatively minor, but while you won't be able to do a direct comparison, as obviously I've already updated the site, I assure you they make a big difference in the quality of this site's appearance.

The biggest difference comes simply from changing the font. While I'm still using the Foundation framework, I've changed the font from it's trusty default, Helvetica Neue, to Charter. Ordinarily I've always tended to use Sans-Serif fonts whenever I've actually thought about it and gone beyond the default Times New Roman or Arial in my writing, but this time I figured a good Serif font looks more professional and easier to read. A serif font also allows for better use of emphasis. Doing side by side comparisons between the old and new versions of my site, I find Helvetica Neue to be slightly blurry to my eyes, while Charter looks relatively crisp and sharp.

For code blocks I've switched from the default css monospace to Inconsolata.

def helloworld():
    print "Hello World"

It's a nicely legible monospace font, and quite importantly when it comes to code, makes it very easy to distinguish between characters such as O and 0. While any good font will do this, it's especially important in a monospace font when you're reading code, and trying to figure out what character you're dealing with at a quick glance. Witness the relatively subtle difference between O and 0 in Charter. While the capital O is slightly wider than the number 0, it can be confusing in the absence of other references. The strikethrough in Inconsolata's zero makes the difference clear. Many fonts have the same issue between capital I and lowercase l as well. Most monospace fonts take pains to make these differences plain, so it largely comes down to a matter of personal preference.

One small change that makes a big difference is increasing the whitespace by slightly separating the lines with the line-height value. This separation just makes each line a little more distinct and less cramped feeling, making for easier reading. I also increased the margins a touch around the code in the code blocks, making the code stand out a little more, and combined with the line-height change makes the code in my previous post stand out nicely.

Finally with the typography changes, centering the titles of each post provides a clearer visual indication of the start of a new post. It also makes the difference between the title of a post and the subheadings stand out more, especially if I should want to start a new post with a subheading, or have one after a single paragraph.

The last little change I've made is to include a couple of cool little icons from Font Awesome. I always wanted an RSS icon on my RSS feed button, and now I have one. There are also icons for the links on my About page, which I really should update with a bit more info sometime.

One final point: If you're still reading this far, you'll hopefully be wondering what the hell I'm talking about fonts and spacing for, because you should be reading this in a proper RSS reader, and all my typography has been stripped out. I'll forgive you if this is your first time visiting, or you've come from a link posted somewhere. Otherwise, go be a good geek and learn how to host and run Tiny Tiny RSS, or if you're not into self hosting, then I recommend Feedly. And if you're into Web Design, do any typing or publishing, or need to write a résumé, then read Practical Typography.