Design & UX
By Alex Walker

Is There a Perfect Paragraph Length for the Web?

By Alex Walker
The original Magna Carta document

The original Magna Carta document

This is the original Magna Carta written in 1215. Parchment was very expensive in the 11th century, so thrifty scribes wrote in tiny, densely packed latin.

While it's quite beautiful, the absence of paragraphs gives it a rather impenetrable look – even allowing for the latin. It's hard for our modern eyes to traverse that sheer wall of text.

Why do we even need paragraphs?

Paragraphs serve three useful purposes in writing. Firstly they help the writer to order and organise their thoughts. Secondly, they give the reader 'rest points' as they work through the text.

And finally, paragraphs give us entry and exit points into documents – shortcuts for navigating around text. This is particularly useful on the web, where we know that readers browse, scan and snack on text much more than they do on printed texts.

What is the ideal paragraph length?

Sentence lengths over time

Sentence Lengths in SOTU over time – Source: Language Log

Predictably, there are lots of answers for this question, but the general consensus has been getting shorter for 200 years.

Mark Liberman from Language Log wrote a script that analyzed the structure of every US presidential 'Inaugural Address' and 'State of the Union' address since the late 1700's. Of course, sentence length and paragraph length are different, but there’s certainly a relationship.

As Mark’s chart shows, average sentence length has gone from over 40 words per sentence, to less than 20 words in 2011. I don't have a problem with this trend, but some do.

Whatever the driving forces, we've been continually selecting for shorter sentences and paragraphs for a long time.

Elsewhere Bob Brooke's Writers' Corner advises that you:

Try to limit your paragraph to five lines – not sentences. If it's too long, break it down into a series of paragraphs on subtopics.

Of course, on the web 'five lines' changes from device to device.

The Yahoo! Style Guide says:

Keep paragraphs short. Two to three sentences is often enough.

Which brings us to an interesting question

As FEDs/designers/UX people, we take responsibility for setting type sizing, line-heights, kerning, contrast, and all other typographic choices to create the best possible user experience.

1) Is it also our job to try to design the ideal paragraph lengths for our layouts? (I suspect most would say no).

2) The 'ideal' paragraph length surely must differ for different screen sizes? What is most comfortable to read on a Kindle or desktop surely isn't the same as what works best on an iPhone.

The same text on desktop and mobile - the utility of a paragraph disappears on small screens

The utility of paragraphs disappears on small screens.

Take this example of the same text on two devices:

On the phone above, a lot of the usefulness of paragraphs starts to disappear when you can only see one or at best two paragraphs at a time. We get a more 'magna carta-esque' wall of text.

So, what can we do?

In a perfect world it might makes sense to rewrite the content for different devices – 'responsive content'. After all, we have different needs and expectations reading on a train than we do tucked up in bed, right?

Of course, the practicalities (and workload) of writing different content for each device/screen rules that out (for now at least).

But I’ve been thinking that there might be one layout trick that can help (a little) to fit more useful paragraphs onto mobile screens without needing to drastically shrink the text size.

On the web, paragraphs are almost always presented in the same way: They begin with non-indented text and end with a bottom padding equal to an empty line (like this very article).

Classic paragraph formatting

But this is only one way of presenting paragraphs – albeit the most common method we see today. Until relatively recently most books looked like this:

There was no extra bottom padding on paragraphs – just a short indent on the first sentence of a few spaces. Almost all books and newspapers used this style of paragraph for most of two hundred years, until it began to fall steadily out fashion in the 1960s-70s.

Maybe there's now good reason to re-introduce this old technique – JUST for our small screen layouts? Our wide screens won't change, but media queries allow us to use those paragraph breaks more usefully on mobile view only.

This lets us maintain the familiar breathing space on larger screens but potentially provide more readability and a better UX on small screens. It won’t be dramatic, but it may be enough to put three paragraphs onscreen, rather than two.

This needs some proper UX testing, but I think it has merit.

What do you think?

Originally published in the SitePoint Design Newsletter

  • Ralph Mason

    According to some, we’re killing off the paragraph:

    I think I plead guilty to that, at least on the web. But then, I’m not to caught up on how we present the written word, as it’s just a representation of the spoken word—which is the real language. As long as the language makes sense, how it’s broken up in “print” doesn’t bother me. Whatever works best for people, and on the web, a fair bit of white space does seem to make reading easier.

    I prefer the gap between paras, even on mobile.

    • That article was part of my thinking and motivation for the article, @pageaffairs:disqus (it was in Versioning, wasn’t it?). A great read.

      • Ralph Mason

        Yep, I added it to the list in Versioning. Wondered if you’d seen it. :)

  • Formulate

    Interesting analysis and idea. Have no reliable data on whether it would work or not. But personally, I wonder if there is actually MORE need for spacing between paragraphs on smaller viewports, because you have even less context and it’s easier to get lost? I guess the question is: on average, to readers prefer more signposting or less scrolling?

  • Now, that’s my kind of article! Alex, I’ve experimented with using indents as paragraph indicators on web pages in place of a line break, but it didn’t really work. The indent didn’t give enough relief to readers from the “slab of text” effect. That relief is a necessity: not a luxury, not a “looks nice” kind of thing, it is necessary to retain reader engagement. But paragraph break lines aren’t the only way to provide that relief. Well-chosen and well-positioned images have a similar effect, reducing the slab effect.

    It won’t surprise you that I could go on about the minutiae of this all day, but I’ll restrict myself to one other comment. Alex, you ask whether it is the job of the FEDs/designers/UX people to design ideal paragraph lengths. While suggesting many would say no, you’ve not supplied who should be responsible.

    It is the author who should do this. The content producer has to be aware of the way their text will be displayed and lay it out to suit, including allowing for different devices. In a situation like SitePoint, an editor will take this on, but in most cases it is the writer’s job. This is the reality of writing for screens. Things changed when writing moved from papyrus to paper, from pages to books, from handwriting to print, from one font to many and so on. Nowadays, writers have to write for device screens, and they have to take into account design elements they can’t change. They have to collaborate with designers, devs and UX people to get the optimal effect for readers (a tiny example: you say “on the phone above” but the phone isn’t above, it’s to the right – the text content didn’t change to accommodate a layout change).

    I love seeing this article and would love to see SitePoint cover more on content and how it affects and is affected by devs, designers, et al. The role of the content producer / manager / editor is only going to become more important as text layout questions become more technical to accommodate the different ways we consume content.

    Oh, and there is no ideal paragraph length, just as there is no ideal sentence length and there is no ideal article length. It all depends on context, the desired effect and an understanding of what the reader expects, whether it’s a 5,000 word academic treatise or a 500 word blog post. Thanks, Alex.

    • Great stuff, ronsman!

      My gut reaction to the *idea* of replacing paragraph breaks with indents is the same as you and @formulate:disqus. My head tells me it shouldn’t work.

      But has had me reconsidering that position. See the following screen cap.

      Obviously Keith Houston is very highly trained in making typography work–so I suspect the margin for error may be much smaller–but I visually enjoy reading Keith’s blog. It has a slightly old world, bookish quality, but that’s more about our memories than anything locked into the text.

      In other words, if Medium, Huffpo and NYT kept driving their typography in this direction, we wouldn’t be seeing it as old fashioned in 2-3 years.

  • adaivanoff

    Too short paragraphs aren’t better either. I really hate it when a longish article – i.e. 1,500+ words consists mainly of one-liners. This really chops it. Additionally, all equal, there is more scrolling.

    As for mobiles, I don’t see how the problem can be solved at present. After all, they are not made for reading. Even 10″ tablets are a strain for the eyes (or at least my eyes), not to mention smaller devices, dim-lit environments, energy saving modes, etc. I am not saying ditch mobile users completely but when you cater to their needs and serve the same content on all devices, the mobile-centered approach hurts the desktop experience.

    As for intended paragraphs, preference is maybe just a matter of habit. We, me included, are used to padded paras and this is why intended ones look bad. If we were used to indented paras, then the extra spacing below would be confusing.

    • This is how you can earn 65 bucks hour… After searching for a job that suits me for 6 months , I started working over this internet-website and today I possibly can not be more happy. After 3 months on! my new job my income is around 5000 dollars/monthly -Visit link on MY~PROFILE~PAGE to see more

Get the latest in Design, once a week, for free.