Lines of Text That Run the Width of the Screen

A line that never seems to end

Open a long page on a wide office monitor and some sites spread the text from one edge of the window to the other. A single line can run to two hundred characters or more.

Reading it is hard work. Every time a line finishes, the eye has to travel all the way back across the screen and find the start of the next one, and it often lands on the wrong line.

Readers skip a line or read the same one twice, slow down, and start skimming. On a page of policies or service details, that is how the important sentence gets missed.

For some readers it is more than tiring. People with dyslexia or low vision can lose their place on every line.

Who loses their place first

• Readers with dyslexia, for whom tracking along a line already takes effort.
• People who magnify the screen, seeing a fraction of each line at once.
• Older readers who enlarge the text in the browser.
• Anyone reading in a second language, word by word.
• Everyone on a wide monitor at the end of a long day.

The second has it worst. With the screen magnified, a long line means panning sideways across the whole page and back again for every line, and finding the place each time.

How text ends up this wide

Many sites built in the 2000s used layouts that stretched to fill whatever window they were shown in. On the screens of the time that produced long but tolerable lines.

Monitors have grown since. A layout that stretched to a comfortable width on an old office screen now stretches across a far wider one.

Some newer themes do the same in a different way: wide banners and photographs run edge to edge, and the text sections below are allowed to follow them.

Nothing looks broken on the laptop the page was built on. It only shows on a large screen, which may be exactly what your customers use at home.

What the standard says

Line length appears in WCAG 2.0 only at its highest level, AAA, rather than at the AA level most businesses aim for.

At that level it asks for lines of no more than 80 characters, line spacing of at least one and a half within paragraphs, and text that is not justified.

It is also one of the cheapest AAA items to meet.

Set a maximum width for text

The fix is a maximum width on blocks of text, set once in the site's style sheet so every page follows it.

Somewhere around 60 to 75 characters a line suits most body text. Photographs, banners and tables can still run wider; only the paragraphs need limiting.

Set the width in em, a unit tied to text size, not in pixels. When a reader chooses larger text in the browser, the column grows with it and lines keep about the same number of words.

Make it a maximum, never a fixed width. On a narrow window or a phone the text should still shrink to fit without sideways scrolling.

Spacing and alignment

Line spacing matters almost as much as line length. Lines set close together make it harder to land on the right one; spacing of about one and a half lines is a comfortable starting point.

A little extra space between paragraphs helps readers see where one thought ends and the next begins.

Align body text to the left. Justified text, stretched to meet both edges, leaves uneven gaps between words that some readers with dyslexia find hard, especially in narrower columns.

A worked example

A house sitter who works alone lives in clients' homes while they are away: plants, pets, mail, snow on the path and lights that make the house look lived in.

Many of her clients are retired couples who spend part of each winter somewhere warm. They read about her at home, on a desktop computer with a large monitor, often with the text enlarged.

Her site had three long pages: how house sitting works, what is included, and her references and insurance. The theme stretched each paragraph across the full window.

Two people mentioned on the phone that they had printed the pages to read them. One asked whether she could simply mail the information instead.

Whoever looks after the site set the text column to a maximum of about 70 characters, raised the line spacing, switched the justified text to left aligned and added headings to the longest page.

The photographs and the banner still run the full width of the window. The words no longer do.

Check it on a wide screen

Open your longest pages on the widest monitor you can find, with the browser window at full size. A page that looks fine on a laptop may not.

Count the characters in a typical line, or simply the words: more than about fifteen words a line usually means the column is too wide.

Then enlarge the text a few steps with the browser's zoom. The text should grow and rewrap without a sideways scroll bar appearing.

Check the pages that matter most for long reading: policies, service descriptions, frequently asked questions and the blog.

The counter-case

Short pages suffer least. A contact page, a gallery or a home page made of short blocks rarely produces a line long enough to cause trouble.

Some content needs the width: a price table, a timetable or a chart is easier to read wide, and limiting it would force scrolling of its own.

And on phones lines are short anyway, so the change is invisible to phone visitors. It matters on bigger screens, where long reading tends to happen.

Any page meant to be read rather than glanced at should have its text held to a comfortable width, with generous line spacing and left alignment.

Making the change

1. Open your longest page on a wide monitor.
2. Count the words in a typical line.
3. Set a maximum width for blocks of text.
4. Make it a maximum, never a fixed width.
5. Raise the line spacing to about one and a half.
6. Align body text left, not justified.
7. Zoom in to check nothing scrolls sideways.

Step four is the one that stops the fix creating a new problem. A fixed width forces sideways scrolling when a reader zooms in or uses a narrow window; a maximum only stops lines growing too long.

Another small fix, for visitors who use a keyboard instead of a mouse, is covered in a drop-down list that jumps as soon as you choose.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.