It is bad practice to have more than one H1 heading on a page. This is because search engines like Google use H1 headings to determine the title/topic of a page, so having multiple can “confuse” the search engine and it may pick an unintuitive section heading as the name of the page in search results.

In most cases, a H1 heading will be shown automatically as part of the template, or as part of a hero section block you’ve added to a page. These will look different to the default heading styles shown below. A heading may be a H1 heading, but styled to be smaller and sentence case to fit other requirements of the website’s design.

H1 Heading

H2 headings should be used as section headings to differentiate between parts of a page’s content.

As it is bad practice to use multiple H1 headings on a single page, the theme deviates from the wireframes and styles H2 headings as all uppercase.

H2 headings have differences in colour between the first and second lines of a heading. By default, the first line of a H2 heading is the blue grey theme colour, and the second and following lines are the orange theme colour.

If a H2 heading is detected to be on a dark background, all lines of the heading are white. If you want a line of a light heading on a dark background to be a different colour, this needs to be done manually using the text highlight feature in the block editor.

h2 Heading

H2 Heading
Across two lines

H3 Heading

H4 headings use an extra bold font weight, like that of H1 and H2 headings, to provide a different stylistic option.

H4 Heading

H5 Heading

H6 headings use the normal font weight, unlike the bold font weight of H3 and H5 headings.

H6 Heading