Last reviewed: 10 August 2021

Elements

Headings, paragraphs and lists

Headings, paragraphs and lists give your content structure and help to make it more readable.

Content guidelines

Headings

You should use headings and subheadings to break your content up. This makes your content:

  • easier for people to read
  • more accessible for those using assistive technology like screen readers

Headings should be short, clear and descriptive because this helps people to understand what content is there and find the content they need.

Front-load your headings where possible. Statements work better than questions and they let you put the keyword first.

Good example:

£5 Freezer Fillers

Bad example:

Looking to stock up on brands you love? Browse our £5 Freezer Filler

Paragraphs

Write paragraphs using short simple sentences. As a general rule, use 25 words or less. Longer lines can be difficult to read.

Lists

Bullet lists (unordered lists)

Use bullet points to break up a list of items. It makes your content easier to read and understand.

Bullets must:

  • use a lead-in line
  • make sense running on from the lead-in line
  • use lower case at the start of the bullet
  • have only one sentence per bullet point - use commas, dashes or semicolons to expand on an item

Bullets should not:

  • be paragraphs using the list format for visual effect
  • use a full stop after the last bullet point
  • include ‘or’ or an ‘and’ after the bullets

Numbered lists (ordered lists)

Use a numbered list for a logical sequence of things, like a series of tasks that must be done in a certain order.

Unlike bullet lists, they do not need a lead-in line and should be complete sentences that start with a capital letter and end with a full stop.

Design guidelines

Our headings, paragraphs and lists have set font sizes.

Go to the guidelines on font sizes.

We’ve used our foundations to design headings, paragraphs and lists.

Headings

Headings should be structured logically. This is because assistive technology users can use the headings as a way to navigate around the page.

Heading 1 (H1) is the main page heading, you should only have one of these.

Heading 2 (H2) is a subheading, you can have several of these.

Heading 3 (H3) is a subheading within a H2 section, you can have several of these.

You can use our custom font sizes to adjust the size of headings to fit your design. For more information, go to the guidelines on font sizes.

Paragraphs and lists

Paragraphs, lead paragraphs and lists are set at a size to make content readable.

Do not change the font sizes, or the line spacing. These have been set to meet our accessibility standards.

Examples

Everything you need to know about Fairtrade

When you choose Fairtrade, you’re helping make a difference to farmers all over the world. Fairtrade is a global movement that guarantees producers a fair deal.

From the best ways to support Fairtrade, to how it’s transforming communities, here’s everything you need to know.

Fairtrade is about empowering farmers and workers

When you buy products with the Fairtrade Mark, you’re supporting the farmers and workers’ human rights.

This helps to provide:

  • a fair price for their product through the Fairtrade Minimum Price and Premium
  • fair terms of trade when selling their products
  • good working conditions that are socially fair
  • freedom from forced or underage labour

Text content using a H1, lead paragraph, paragraph, H2 and bullet list.

The meeting agenda will be:

  • an overview of the last month
  • a presentation
  • a special announcement

A bullet point list.

Before leaving the house:

  1. Put on socks.
  2. Put on shoes.
  3. Tie laces.

A numbered list.

Changelog for this page

Date Notes
3 June 2021 First version of page published

Get support

Co-op Digital colleagues can get support in our dedicated Slack channel:

#experience-library-support

Sign up for email updates

Get updates about changes and developments.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.