Headings 4 to 6 aren't differentiable enough from body text

[rhyslawry]

Expected behaviour

Readers usually expect headings to be either larger, more prominent, or at least differentiable from the body/paragraph text beneath them. It should be obvious to a reader what is a heading and what is not.

Actual behaviour

In the new Design System, headings 4, 5 and 6 are either smaller or the same size as paragraph text, and don't have enough bottom padding. This doesn't look great, and leads to confusion for readers. https://web.unimelb.edu.au/components/base/#typography-styles

I've found editors avoiding h4 to h6s due to their sizes/styles, and are using less logical heading levels purely for their appearances.

In the old pre-2014 design system (as still visible on http://about.unimelb.edu.au) headings 4 to 6 are much easier to visually differentiate from body text.

On closer inspection I think the main issue is that <h4> is exactly the same size as <p>, and h4 to h6 have no bottom padding.

Summary of issues:

• Heading 1 is the only heading which is larger than the surrounding text, however most websites use h1 in the header of the page. WCAG guidelines state that a h1 should only be used once. Editors would like to have headings that are larger than the rest of the text in the body of the text, leading to the use of multiple h1s per page. Even web.unimelb uses multiple h1 tags in the body text: https://web.unimelb.edu.au/components/text/#two-columns
• Heading 2 is simply body-sized text that has been bolded and CAPITALISED
• Heading 3 is simply bolded non-capitalised text
• Heading 4 is exactly the same size as body text
• Headings 5 & 6 are smaller than body text, making the two often indistinguishable.

Steps to reproduce

Compare with the sizes and top/bottom padding of Github headings:

Heading 1

Body text

Heading 2

Body text

Heading 3

Body text

Heading 4

Body text

Heading 5

Body text

Heading 6

Body text

[axelboc]

Yes! 💯% yes!

[dkevey]

I vote for this one too and have also found that H3 is not much better than simply bolding the text.