Heading levels

Headings should describe the content underneath and for someone using specialised software (because they cannot see the page) correctly used headings help them understand how the page is structured.

Headings provide structure to a web page. So, 'heading 2' indicates a subsection of 'heading 1', 'heading 4' indicates a subsection of 'heading 3' and so on. They should not be used for font or presentation effects. Misusing heading styles - eg. to make text appear a certain size - makes it difficult for users with special software to understand how the page is organised and to navigate it.

Our WYSIWYG editor allows coordinators and publishers to select heading styles from 1 - 6.

Because the title of your page will always be heading 1, all subsequent sub-headings should follow accordingly from there. That is,

Page title (heading 1) [specified by CMS template]
Sub title (heading 2) [specified by content publisher] and so on down the page.

Heading styles should only be applied to text that is a heading.

Heading 1 (28px, #555555)

Heading 2 (22px, #005596)

Heading 3 (19px, #555555)

Heading 4 (16px, #005596)

Body text (15px, #000000)