Header Tags

Here’s a quick explanation of ‘Header Tags’ and what they’re used for:

H1 — The title of a page, or post. They’re usually keyword-centric, focussed around the ‘big idea’ of a page, or post and crafted to grab a reader’s attention.

H2 — These are sub-headers that clarify the main points of your paragraphs and separate sections. Consider using semantic keywords related to the ‘big idea’ in your H1 while also helping the reader easily find the sections they want to read.

H3 — These are sub-sections that clarify the points made in the H2 further. Alternatively, they can be used to format lists, or bullet points.

H4 — These are sub-sections that clarify the points made in the H3 further. Alternatively, they can be used to format lists, or bullet points.

Visual guide

The following is a visual guide to show how each Header Tag will affect the look of your headings. Notice how much, or little space is added above each header tag.

This is a H1 heading.

Text height: 72pt, Weight: 700 (bold), Text transform: None

Note: Always centre-align H1 headings

This is a H2 heading.

Text height: 54pt, Weight: 600 (Demi-bold), Text transform: Default/Uppercase

Note: H2 headings can be either left, or centre-aligned

This is a H3 heading.

Text height: 36pt, Weight: 700 (bold), Text transform: None

Note: Always left-align H3 headings

This is a H4 heading.

Text height: 18pt, Weight: 600 (Demi-bold), Text transform: Uppercase

Note: Always left-align H4 headings

This is a H5 heading.

Text height: 18pt, Weight: 600 (Demi-bold), Text transform: Default

Note: H5 headings can be either left-, or centre-aligned. Only to be used in lists or call-out blocks when the H4 tag has already been used elsewhere on the page.

This is H6 heading.

Text height: -pt, Weight: – (-), Text transform: –

Note: -.

Text height: -, Weight: –

This is body text — Text height: 18pt, Weight: 300 (light)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis odio ipsum, ut facilisis massa porttitor non. Mauris facilisis hendrerit massa, non efficitur lacus ultricies ut. Proin tincidunt commodo nisi ut laoreet. Nulla facilisi. Cras eget lacus sit amet ligula ullamcorper porttitor eu sed sapien. Curabitur sodales massa eget libero interdum, vitae dapibus felis vulputate. Quisque aliquam dictum ipsum sit amet fringilla. Nunc egestas iaculis lorem id laoreet. Phasellus lacinia metus et sagittis mollis. Suspendisse neque tellus, venenatis quis mi id, scelerisque porttitor diam. Maecenas viverra dolor eget augue ornare, tempor consequat velit interdum. Etiam ornare finibus hendrerit. Sed est ipsum, sagittis ac diam eget, imperdiet semper nisl. Pellentesque vitae libero vitae diam mollis eleifend. Donec consectetur elementum lacinia.

Paragraph Text

The ‘Paragraph’ tag is applied to the body text that comprises all your written content. Select Paragraph for all sentences, paragraphs and single lines of copy. As you can see, all the text on this page is formatted with the ‘paragraph’ tag.

Sample copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis odio ipsum, ut facilisis massa porttitor non. Mauris facilisis hendrerit massa, non efficitur lacus ultricies ut. Proin tincidunt commodo nisi ut laoreet. Nulla facilisi. Cras eget lacus sit amet ligula ullamcorper porttitor eu sed sapien. Curabitur sodales massa eget libero interdum, vitae dapibus felis vulputate. Quisque aliquam dictum ipsum sit amet fringilla. Nunc egestas iaculis lorem id laoreet. Phasellus lacinia metus et sagittis mollis. Suspendisse neque tellus, venenatis quis mi id, scelerisque porttitor diam. Maecenas viverra dolor eget augue ornare, tempor consequat velit interdum. Etiam ornare finibus hendrerit. Sed est ipsum, sagittis ac diam eget, imperdiet semper nisl. Pellentesque vitae libero vitae diam mollis eleifend. Donec consectetur elementum lacinia.

Text height: 18pt, Weight: 300 (light)

Style Sheet