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:
- Put on socks.
- Put on shoes.
- Tie laces.
A numbered list.
Changelog for this page
Date | Notes |
---|---|
3 June 2021 | First version of page published |