As I’ve said elsewhere it’s a myth that shorter copy is always preferable to longer.
If your content is valuable, people will read it, whether it is writing that is an end in itself, like an essay or review, or a means to an end, designed to instruct or sell.
Copy should be as long as it needs to be to captivate, tell, or convince: no longer, and no shorter.
In this post I consider the aesthetics of longer text: how to present it to make it inviting to read. There’s no need to resort to breaking a unit of content artificially over several pages, or excessive use of decorative images. My focus is online copy, but most of the techniques I discuss apply to print as well.
Clarity, space and light
A readable page conveys a sense of clarity, space and light on first glance. Users are much more likely to read it if thier initial impression is favourable, no matter whether it is showcasing products on a commercial site or legal text on a corporate intranet.
This is the well documented aesthetic usability effect: a well designed page is simply more usable than one which is less pleasing to the eye. If your page looks good readers will believe your content is more compelling, even if it is exactly the same as that presented through a mediocre design.
The effect, often referred to as emotional design, was first studied with reference to digital user interfaces in the 1990s. The Hitachi Design Center subjected a proposed ATM interface to exhaustive examination, testing 26 configurations with more than 250 study participants. They found perceptions about ease of use were strongly influenced by aesthetic appeal.
Hitachi was simply formalising a lesson that has been clear through the history of design. Consider the care with which classical and medieval scribes crafted written manuscripts. The text was inscribed with absolute precision, and place markers dilineating themed passages were embellished beyond their utility, elaboration that reached its apotheosis with the shimmering drop capitals of the illuminated manuscript.
The modernist revolution at the turn of the last century moved page design away from elaborate ornamentation, evolving a set of new techniques for enhancing readability. But the essentials of good typography remained the same.
Column widths designed for the human eye
Column widths must be tailored to the capacity of the human eye to follow a line of text. If the line is too short the eye will continually overshoot the ending, and be forced to loop back abruptly. If it is too long the eye will struggle to locate the start of the next line. The ideal has always been 45 to 65 characters.
A clear typeface: serif or sans-serif
Now, as always, it is essential to use a clear typeface, suited to the nature of the content.
The convention has long been that body text for print should be set in a serif typeface, and for the web in sans-serif. The theory is that, in print, the serifs, the little marks at the foot and joins of these typefaces, make it easier to distinguish letters, and lead the eye horizontally along the line. Blocks set in sans-serif are harder to read because without serifs to offset letter verticals the eye is pulled downwards, against the natural reading direction. The opposite applies for online text: digital screens can’t render serif marks clearly, so sans-serifs should be preferred.
There’s still truth in that. Most novels and longer articles use serifs. But today there are many hybrid typefaces, with serif and sans-serif characteristics, suitable for setting long passages of text that work well for both digital and print.
Online, font embedding has opened up a vast range of excellent typefaces designed specifically for online reading, both serif and sans-serif, and high resolution screens render serifs much more clearly. There are many, many options, and almost as many websites providing excellent advice on choosing and combining typefaces. It’s useful to install a font identification browser extension to help you to identify typefaces you like.
Point size and justification
A couple of other notes about online typography.
If you have good eyesight, or are a designer, it’s tempting to set your text too small. Small point sizes often look neater on the page. But online text should always be set at a larger point size than printed text. Not everyone is viewing your text on a high resolution screen, and even if they are it is still more tiring to read long passages online unless you are using a hi-res tablet.
Online text should be set flush left, and ragged right. This ensures there is appriopriate spacing between words, avoiding rivers of white space running downwards through the text, which often happens when fully justified text creates extra word spacing. Full justification is for printed text only, which can be set using sophisticated page layout applications with much more powerful typesetting power than web browsers.
One other thing: longer passages of online text should be set in black on a white background. Throughout history typographers have known it’s easier to read dark on light. Light on dark can work for reading in darkened rooms but it should be an option, never the only, or even default, view.
Headings and subheadings
Once you have got your essential typography right – a clear typeface, readable line length, and dark-on-light colour scheme – you can consider how best to arrange your text to guide the reader’s eye through your content.
The most fundamental technique is intelligent use of headings and subheadings. These clarify your page’s information hierarchy, allowing users to scan the page and build a mental model of your content before committing to read it.
Your headings and subheadings should clearly contrast with the body text. You can make them larger or bolder, or set them in a different typeface or a different colour. Over the centuries typographers have developed standard point sizes for heading levels, which are still the default used in many publishing systems.
If you are using a well known content management system like WordPress or SquareSpace, your website theme will have a heading stylesheet built in, developed by a professional designer. Stick to it: don’t fall into the common habit of simply using bold to mark subheadings. That makes your page less accessible and gives you very few options for designating third level headings, should your page need it (and many longer pages do).
Logical heading structures allow users to review long pages according to what usability studies show to be the most useful scanning process, the ‘layer-cake pattern’: the reader’s eye fixes on headings and subheadings with quick glances at the text between, generating eyetracking maps consisting of horizontal stripes alternating with largely blank areas, that look a bit like layers in a cake.
Headings and subheadings are even more useful if they are ‘frontloaded’, the first words in each clearly indicating the content they introduce.
A disciplined heading and subheading structure orientates the reader, acting as a kind of internal page navigation, sparing readers the need to resort to improvisational ‘F-shaped’ scanning, which occurs when, confronted with a mass of undifferentiated text, the eye makes a couple of quick sweeps across the top of the page before skimming the first few words of the paragraphs below.
Page subtitles and summaries
There are a few other ways you can make it easier still for the reader to quickly assess whether a page is worth their time:
- You can supplement the heading with a subtitle providing further guidance about the content.
- You might add summary text at the top of the page providing a quick overview, a less formal (and shorter) version of the abstracts that preface academic papers.
- If your opening paragraph provides a good guide to what follows it can serve as a summary: set it in a different weight or font size to make it stand out. (The BBC website has long used this technique.)
- If your page is very long you can give it an index, each item linking to the corresponding section of the page.
Breaking up body text
There are simple techniques for breaking up blocks of body text.
Short paragraphs
Formally, a paragraph is a unit of thought, not of length, and should be as long as needed to express its subject completely. But paragraphs on web pages are easier to read if they are shorter than they would be in print. There’s no hard and fast rule, but perhaps a paragraph that might comfortably extend to five or six lines in print might need to be split into two, three or if necessary four paragraphs online. And they should be separated with a line space.
Keeping sentences short (and using short words) is an obvious way to keep paragraph lengths down. The marketing writer Ann Wyle (quoted in Sarah Richards’s Content Design) notes: ‘When the average sentence length in a piece was fewer than eight words long, readers understood 100% of the story. At 14 words, they could comprehend more than 90% of the information. But move up to 43-word sentences and comprehension dropped below 10%.’ (The Oxford Guide to Plain English recommends 15 to 20 words per sentence.)
Your ability to use short sentences will depend on the nature of your content. If it is an essay or feature intended to be read for its own sake then the writing style should determine sentence length, as in print. The reader has come to the page prepared to invest time in the content. But if your text is functional it is always a good idea to keep sentences brief.
All that said, you should still seek to vary the length of your sentences and paragraphs to ensure your text does not look or sound monotonous. Good writing, like music, has a rhythm, varying shorter and longer passages. Developing a writing rhythm is a matter of practice: as you write more you will get a sense of how your text pulses through the page.
Bullet lists
Bullet (or numbered) lists are simple ways of adding a bit of variety, but are not used as often as they should be. Use them to break up text performing common tasks like outlining product features or setting out a procedure. Bullets are easy to scan and contrast effectively with surrounding paragraphs.
There is some confusion about how bullets should be formatted. A good rule is to use lowercase at the start of each bullet if the list has a lead-in sentence, and capitalise it if it is the start of a new sentence. Punchy marketing copy tends to leave out full stops at end of bullets – it just looks cleaner. More formal content such as a legal document should have proper punctuation, with full stops or semi-colons at the end of each bullet.
Whatever the content one golden rule is to never break a bulleted list over a column. That just leaves the words in the broken bullet stranded.
Pull quotes
Pull quotes are another elegant way to add variety to body text. Setting them in italics and a slightly larger font size clearly distinguishes them from the surrounding copy, and conveys something of the flow of speech.
Today’s publishing systems, like the WordPress Gutenberg editor, make it easy to add pull quotes, and many web themes have stylesheets that add a set of quotation marks at the start of the quote.
Use them when you can!
Use of bold and links
If your text is task-based, designed to be read or skimmed quickly, you can bold important words and phrases.
You can also highlight significant text by, when possible, wrapping it in links, which is differently formatted than body copy. Make sure your link text is meaningful, carrying information bearing words, not generic indicators like ‘click here’ or ‘read more’ (these can work in highlight boxes, but not the main text body).
Using images
Finally, consider whether text is the best way to present your content in the first place.
Certain concepts might be better presented as infographics. To ensure your page is accessible you should still set out the information the graphic is conveying in the body text.
I cautioned about excessive use of decorative images above, but they are an obvious way of breaking up text and enlivening a page. But you don’t have to resort to this often if you use the techniques discussed above. Images should supplement content, not make excuses for it.
More resources
You’ll find a huge amount of information about page formatting online, and in any decent introduction to graphic design. Here are a few of the very best to get you started:
- Content Design London – good advice on content design from the agency set up by Sarah Richards, who led the content development of the GOV.UK website
- Google Design: Type & Typography – a good introduction to online typography with useful advice on combining Google fonts
- Government Digital Service: Content design – very useful advice on planning, writing and managing content
- Nielsen Norman Group Alertbox – 20 years worth of solid advice on website usability, with much information about laying out pages clearly
- UX Collective – a useful blog maintained by a group of UX professionals
The featured image at the top of the page is a detail from the Vulgate manuscript at Malmesbury Abbey, photographed by Adrian Pingstone.
