Typography: New Style and Fonts

David Beath — Wed, 25 Sep 2013 00:51:40 GMT

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.

Web Design: A good rant

David Beath — Sun, 15 Sep 2013 10:00:48 GMT

A really interesting talk by Matthew Butterick about the state of Web Design.

It’s now or never for the web. The web is a medium for creators, including designers. But after 20 years, the web still has no culture of design excellence. Why is that? Because design excellence is inhibited by two structural flaws in the web. First flaw: the web is good at making information free, but terrible at making it expensive. So the web has had to rely largely on an advertising economy, which is weakening under the strain. Second flaw: the process of adopting and enforcing web standards, as led by the W3C, is hopelessly broken. Evidence of both these flaws can be seen in a) the low design quality across the web, and b) the speed with which publishers, developers, and readers are migrating away from the web, and toward app platforms and media platforms. This evidence strongly suggests that the web is on its way to becoming a second-class platform. To address these flaws, I propose that the W3C be disbanded, and that the leadership of the web be reorganized around open-source software principles. I also encourage designers to advocate for a better web, lest they find themselves confined to a shrinking territory of possibilities.

I really sympathise with his views on this. The design of most major websites is crap. Unfortunately, he's correct in his assertion that this is largely to do with the fact that advertising drives most of the web. It's going to take a lot of work to find ways around this.

As I'm currently working on plans for my new idea for a useful site, so this kind of thing is something that I'm doing a lot of thinking about lately. It's so easy to just copy the base format that most sites use without thinking about whether that design is the best for your current situation.

David Beath (Posts about Design)

Typography: New Style and Fonts

Web Design: A good rant