20 October 2008
Relative readability
Greg asked a good question about the redesign in the comments on the last post.
Why go so big on type? Could not the same effect be achieved with smaller sizes?
My answer got long, so I figured I’d use it as an excuse to post again (twice in the same month, I know, shocking).
The short answer is “so the body text could be big.”
After years of wondering why browsers defaulted to 16pt text sizes I’m starting to be convinced that long text really is significantly more readable on screen at precisely that size.
So I started with 16px for the post text and worked out from there. The problem is that whenever I’ve tried that in a normal layout, it looks clown-sized, like those remote controls for old people. So I started pushing the scale up all around — width, headers, white space, images.
With the previous design I increased the width to 1000px, which was great for the homepage. But the post pages were just these huge wide blocks of text. It was too much space for the content. I didn’t want to load up the layout with gratuitous sidebars and extras, so this time I tried scaling the content up to fit the space, instead of adding content to fit the space.
There’s a great article by Oliver Reichenstein of Information Architects Japan that makes a really great case for why larger type and lower content density is good for readability on the Web. He calls it The 100% Easy-2-Read Standard (or 100E2R for short).
When I first linked to that article about a year ago, I was intrigued, but skeptical: “I agree it’s easier to read, but damn it’s big.” Oliver emailed me in response and made a point that really surprised me.
Actually it’s not that big, once you use it you start thinking “Damn. Everything else is small”. Physically 16pt is as big as 11pt in print. Huh? Yes, the screen is usually further away, which at such small distances, has a huge impact.
He included a picture of a magazine held at reading distance in front of a monitor at browsing distance. I’ve recreated it here to illustrate his point. On the left, a post on this site with 16px body text. On the right, an article from a recent issue of Dwell, with what looks like 11pt body text.
Oliver explained…
If you think that’s flawed, you’re invited to repeat the experiment. It’s stupefying. 16pt only looks big because we’re used to small fonts and because the threshold (browser window) makes it look big.
Oliver’s whole article makes a much more comprehensive case, including white space, line-length and height and contrast, but it’s still that visual comparison that stuck with me.
So that’s how everything got so big. That and I was looking for an excuse to use obscenely big Helvetica Bold headers.
Comments