Optimal line length


(Kasper Peulen) #1

Not sure if there is already a topic on this, but I think it deserves one. I guess most people don’t think much about the optimal line length when they are considering lay out, at least, I used not to care about this, untilI began working with a more professional document preperation system (LaTeX).

I was suprised that the standard setting there is too have very wide margins, which felt to me like a waste a paper, until I found a post on stackexchange, which convinced me of the following:

It’s not that the margins are too wide. It’s that the paper is too big!

Something similar is true for our screens, they are way too wide, very cool for watching movies, but not at all useful for reading text.

The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable. Link

Well, 50-60 characters a line is not much at all, it would be even hard to get only 75 character in each line, and still let discourse look natural on wide screens, but I think it is something to consider. I only realized how much better those 50-75 characters line read, when I compared reading a normal book with 60 characters, and printed this book out in A4 paper having 110 charachters on each line. It is really huge difference in readability.

Currently, discourse (at least meta.discourse.org) has around 110 characters per line. I played around a bit, and the image below has around 70-80 characters per line:

Sorry for the bad quality of the image, not sure how to make good quality screenshot with my macbook retina.


Custom scrollbar with sticky sidebar (necessitates slight UX rethink)
#2

One of my first topics to the forum is related to this subject.

According to @codinghorror, the site is already optimized for proper line length. Or is it?

But my topic linked above has some ways to fix the aesthetics, as well as line length.


(Jeff Atwood) #3

see

and

The only thing it doesn’t mention that I’ve seen elsewhere is that there’s some evidence to support that line length on digital displays can be slightly longer than the general 12 word rule of thumb (probably something to do with viewing distances… we seem hold printed material closer to our faces). I’ve seen suggestions in the 14-18 range.

You should also look at the screenshots in the topic @purldator linked too.


(Kris) #4

It’s a bit of a minefield overall with whitespace, because there’s also an issue of banner blindness that happens on pages where people will have a narrow primary column, and use the existing space for other components (navs, extra information, etc). I’ve seen sidebars suggested here a lot.

A lot of people have these huge screens now, but the reality is that it’s really difficult to effectively use that space. Even if it’s just secondary nice-to-have information (related topics, for example) — most people just don’t look or interact with it… so as far as I’m concerned, why combat that idea?

A solid case study I recently encountered happened while redesigning the news section of a website for a large global corporation. They get hundreds of thousands of hits a month, so it was important to them to do some moderated usability/experience testing before beta testing it with the public (we gave users tasks, interviewed them, and did some eye tracking).

Testing multiple layouts showed overwhelmingly that people almost completely ignore secondary content on a page… one of the layouts tested was a single-column page with all secondary information following below the main content (rather than alongside it)… and people actually looked at the secondary content more frequently using that layout… despite it being further down on the page.

The idea seems a bit contrary to what one would assume at first… but it seems as though the overuse of ads may have conditioned us to ignore most elements on a page, no matter what they are. Or maybe we just don’t want to have our attention diverted in general.