Take it to the max (but no further)

What is one of the quickest, easiest and most dependable ways of ensuring legible type online?

Put a max-width on all text.


You could add it to your CSS like this:

a, blockquote, button, caption, code, pre, dd, figure, input, li, option, p, select, small, summary, td, textarea, details, dt, h1, h2, h3, h4, h5, h6, label, legend, th { max-width: 35em; }

Or, if you have already a variable for targeting all text, like this:

@include text-all { max-width: 35em; }

You could use the em unit. Or the ch unit.

Base it on a standard line of paragraph text. What is the comfortable maximum for the typeface you are using? Take that and apply it to the rest of your text formats as well.

If your work combines different typefaces, or differing type characteristics, for various formats of text — e.g. paragraphs, headings, quotes, etc. — target them separately if necessary.

Just apply it as globally — ubiquitously and non-specifically — as possible. On the HTML elements themselves, as opposed to a component-by-component, template-by-template basis.

“Isn't that a bit heavy-handed?”

Why? Are there some situations where you are planning for lines of text to run wider than is comfortable to read?! Would this rule disrupt that?!

No, it's elegant, efficient and safe.

Naughty Wikipedia

Wikipedia is a prominent example of a web experience that features no limits to its line-lengths:

After all this time Wikipedia still lets the text flow the full width of available layout. Probably a relic from their early days and the limitations of controlling web typography and layout back then.

It's horrible. I have to shrink the width of my web browser so as not to strain my eyes.

Smashing Magazine have a great article on considerations for line-length.

To remedy this, let’s take a look at the same page, with our limiting rule applied globally, to all text:

That's better. Comfortable line lengths.

“But doesn't it look strange when there is a mix of type sizes?”

Because we want to limit line-lengths based on font size, relative units like the em are our friend.

(Yes there are other factors in play in achieving optimum legibility — like line-height and surrounding space but — for the purposes of this article, let's keep it simple.)

This means the larger the text, the longer the line-length max-width.

Using this rule does mean, when combining a handful of different text sizes in one place, it can be an extremely ragged affair:

I've thrown in extra heading content and some larger text to emphasise how headings would still be able to run longer than lines of standard paragraph text.

This is where other layout rules can come in...

“I don't need this, I've got layouts and grids set up to stop this from happening”

Well, great. But — until container queries are supported — layouts and grids usually work canvas-in, rather than content-out. Do your blocks, sections and grid items carry their own max-widths that stops lines of text content getting too long inside?

Probably not.

And there will always be a situation where text creeps in in unexpected ways and isn't governed by these layouts.

Ever struggled to combine your beautifully-elegant layout classes with the code coming from a plugin? Or CMS content?

Ever spotted the work of someone else, who was unaware of — or didn't understand — the nuances of controlling layout in your project?

Globally-limited line-lengths are your safety net.

This takes the pressure off of grids, layouts and spatial systems in general. These are then left to focus on content emphasis, hierarchy and visual finesse.

In our Wikipedia example the limited line-lengths have improved legibility, but our general layout is still arguably off:

There's a lot of empty space to the right. In my opinion this isn't wrong, legibility is paramount and any white space only helps focus on the content.

But many of us may crave a more balanced, pleasing use of the space. So let's centre our text area and limit its container to match the max-width of our basic paragraph size:

There. A much more legible, focused and attractive approach.

And let's honour the content and heading sizes Wikipia use:

“But all this means pages will get longer...”

Yep. Not usually the goal. But legibility is paramount.

Assuming our content is well-planned, useful, succinct, engaging and well-paced — and comfortable to read — it shouldn't be blamed for any other interface criticism.

So the next question is, as designers, what else can we do to improve the experience? Multiple columns of content? Better navigation to help browse different sections? Break down a long page into sub-pages?

That's down to you. But go forwards, safe in the knowledge that you stood up for robust and comfortable reading experiences.