Form following function

Squarespace 6 just added Typekit integration, which had been available in Squarespace 5. I had just assumed it would be in Squarespace 6 from the start, but when I relaunched my website on there I only found a selection of Google web fonts, so I just went with those though I still had a Typekit subscription active.

The Squarespace 6 Typekit integration includes 65 fonts, but my subscription gave me access to more of their catalog, so I went back to some typefaces I'd originally wanted to use here. For body text I'm using Chaparral by Carol Twombly, and for post titles I'm using FF Dax Compact Web Pro by Hans Reichel. You may or may not have noticed the update, but I'm happier with how these fonts render, especially on retina displays.

A long digression about my site layout. My previous blog design, from years ago, had a right gutter alongside the main column, and even further back, I had a right and left gutter. This time around, I chose a single column layout for several reasons. For one thing, I wanted to focus less on reblogging this time around and more on longer-form writing. Doing this just in my spare time, by myself, I can't produce enough content to support a multi-column, content-dense browse experience. Also, instinctually, this felt like the right form for the content I had bottled up in my head.

At Asymconf California recently, I heard Horace Dediu offer a fascinating explanation for why a clean single-column design might be evolutionarily soothing to humans (he wasn't arguing specifically for that design, but I'm going to selfishly appropriate his idea towards analyzing my site design). I can't remember where he himself heard the theory, but the idea is that because humans have both eyes in the front of their heads rather than on the sides, granting us binocular vision, we have the ability to focus our vision intently for long periods of time on a small area of our visual field. This, in addition to other developments like our brain size, may have uniquely enabled us to do things like read books or write code for hours on end.

One consequence of this positioning of our eyes, though, is that when we're reading, things in the periphery of our visual field are often read as threats or predators just based on evolutionary impulses. So a multi-column page layout, with colorful photos and ads to either or both sides of the content to be read, is constantly distracting us from the task at hand. It impedes deep focus.

That sounds crazy, I realize, and I'm no evolutionary biologist, but I do find it difficult to read content on so many sites on the web. That we even have services like Instapaper, Readability, and Pocket is comment enough on the subpar reading experience of the web.

Take your typical NYTimes article (I just grabbed the first one off of their homepage just now). Obviously they have many jobs they're trying to do on that page, but it is hard to just read the text top to bottom with any sense of peace when off to either side are persistent blocks of color and buttons and graphics, most of which have little to do with what you're reading. It's the tradeoff inherent to the business model and advertising formats they've chosen, and they are obviously far from the only site squeezed by the new economics of journalism in this age. The web is a wonder for all of its prodigious content, but there is a cost, and thus far we've paid for it with a largely distraction-filled substandard reading experience.

One other decision I've made based on the types of content I typically produce is to flatten the hierarchy of my blog, the primary page on my site, so that each post is displayed in full. With the frequency with which I post the types of long form content I post, a fully expanded single column of text felt most appropriate. It produces the feeling I want when reading content.

As for monetizing my blog, I will occasionally post affiliate links to Amazon for products I mention, but only if they're products I am discussing or endorsing. When I do, it will always be inline. If enough of you click and convert on those links to cover my site's hosting fees, and most years you do, it's a bonus. I'm not running this as a my sole means of supporting myself so that's all gravy.

One of the underrated aspects of Daring Fireball, one of the first sites I visit on the web each day, is its design. It also has a flat hierarchy, and its monochromatic design, minimal graphics, and single column layout makes for efficient and focused reading. Start at the top and read down until you come up against the last thing you read there. You're done. I always feel a sense of peaceful isolation with Gruber's thoughts.

Obviously some of that is a function of his prose style, which tends to be efficient, but the design is underrated. He also integrates much of his advertising inline with his posts so they don't stand out visually, with the exception of the one ad banner off to the left from The Deck (I wish it wasn't there, but it's a minor tradeoff for reading his content for free).

It's something akin to black and white photography. When I process a batch of photos from my SLR in Lightroom, one of the first decisions I make is whether to leave the photo in color or transform it into black and white. Often colors in a photo are just distraction, and what you want people to see is just structure. Black and white photography removes distractions and allows you to see the form of light and matter in the purest way.

Designing for text feels similar. For all that we do online, it's hard to beat the design of a physical book for presenting text in the most readable, comfortable, efficient layout. Kerning, line spacing, typeface selection, line length — printers have honed these to near perfection over centuries. We are still trying to find our way back.