Using headings to make your pages easier to read

People rarely read a web page top to bottom. They scan for the bit they need, and headings are what make that possible. Used well, they also make your site friendlier for people using screen readers. Here’s the framework we use on our own demo pages.

A framework for a tidy page

1. Open the article in the editor (select its group, open the Documents tab and click the title), highlight the text to style, and pick from the styles list on the toolbar.
2. Give the page one clear title in Heading 1 at the top.
3. If you want an introductory sentence that stands out, style it as Heading 4: slightly larger than paragraph text without shouting.
4. Follow with a feature image (800 by 400 pixels; image sizes explains why that ratio works everywhere), then your content in the ‘normal’ paragraph style, broken into short paragraphs.
5. Split longer content under Heading 2 sections, with Heading 3 for subsections, one level at a time. Bullet points and numbered lists break things up nicely.
6. Quoting a Bible verse? Use the styled quote format rather than italics, and it’ll match every other quote on your site.
7. Click ‘Save’.

---

Good to know

• Tidying up text pasted from Word or another program? Highlight it and use the remove formatting button first (top row of the toolbar, the little red stop sign over the letters HTML). It strips out stray colours, fonts and bolding so you can restyle cleanly with the tools above.
• Avoid laying out content in tables with columns: they can’t reflow on a phone, so they run off the edge of the screen and look broken. Headings and paragraphs resize themselves beautifully.
• Use the heading styles rather than manually making text big and bold. Screen readers rely on real headings to help blind and partially sighted visitors navigate a page, and styled headings keep every page consistent.
• Skipping levels, say jumping from Heading 2 straight to Heading 4, makes pages harder to follow and is considered poor practice on the web.
• Make links from meaningful words in the sentence (‘visit our giving page’) rather than ‘click here’; it reads better and helps accessibility.
• Reworking a page heavily? Make a copy first and edit that, so the live page stays presentable until the new version is ready.
• Because headings come from your site’s design, a site-wide restyle updates every heading at once. Text you’ve styled by hand gets left behind.