Researching a Longform Stylesheet

By: Jacob Taylor
on

It started in earnest. I had some school essays I wanted to put online, because I was at some level proud of them. But there was something I just couldn't find anywhere on the internet — a stylesheet created purely to display longform writing. So I decided to make one myself.

Across all of it, I learned a lot. A lot about optimum line lengths, and the ratio of font size to line height, and heading and trailing margins for paragraphs, among other things. And a lot of stated intuition on what kinds of fonts to use and when. Lots and lots of people debating about which reamnants from what we know about the layout of books can be transposed to the web.

For font choice, my favorite and most useful thing I came across was a selection of "revised" font stacks, wherein the authors critique the selection and ordering of fonts on popular or otherwise well-designed sites. Seeing what could be better on otherwise good sites is very informative. The first version of the stylesheet had pretty bad fonts. Don't get me wrong — they were legible. But they were not quite as readable as I'd have liked. So I toyed with some of those font stacks, and found a few I really liked for longform text. Played with those until I got something I really liked.

As for the textual ratios, I used a data driven approach for the first iteration of the stylesheet. It seemed like a lot of designer rants focused on the same ratios of font size and line height and line length and things. The first version of my stylesheet lifted some (but not all) of those. I've messed around with it a bit more since then, and mucked about enough to really be happy with the product.

It seems designers want to prescribe an optimum line length. Some suggested averages of 60, 70, and 75 (with some suggesting 90 or over 100, some 40-50 as well). Mine averages 80. I still cannot stand 60 (which was the most common length I saw online). The lines are just too short, my eyes have to reset their position (to the left, at line end) too often. It's subtley jarring.

Some sites which I poked around their css to see what they were doing to make their sites so readable: The New Yorker, The Verge, CodingHorror's blog, Craig Mod's Bibliotype library, Bitly's new redesign, and Fast Company's Design site.

I actually didn't find Readability until after I'd gone through the second revision. Though, when I found it our stylesheets were pretty convergent. A nice pat on the back for me, to be sure. Also, Information Architects have some beautifully constructed type.

The results of this work are used to display this very page. If you'd like to use it, you're welcome to. I don't claim it's professional quality, but it's easy to read for me, which means I've succeeded. If you have suggestions for how to make it better, drop me a line.
Sheet

The very most useful pages: