Style updates of headings

[fcoveram]

Derived from this comment and ticket wporg-parent-2021#163

Text style update

Add the mobile versions of headings in Inter. That spans Heading 3, 4, 5, and 6, as documented in the Design Library's styles page.

Desktop	Mobile

[ryelle]

@fcoveram The photo details headings are "Heading 6" size, but with this update, they're smaller than the body text. The "Heading 5" size is also slightly smaller.

For example, these use "Heading 5" and "Heading 6" in the desktop mockups, here's what they look like with the new small fonts. Is this correct?

Heading 6 in single photo	Heading 5 in footer

[fcoveram]

Do you know if using the same font size for Heading 5 and 6 meets accessibility requirements? I looked at the WCAG and found nothing related to show size differences between headings.

Since font sizes on mobile are already small from heading 3 in Inter, keeping them small compared to the body looks strange.

If there is no problem with requirements, then both headings in 16px seem fine to me. Thoughts @jasmussen?

[jasmussen]

Heading 5 and 6 meets accessibility requirements? I looked at the WCAG and found nothing related to show size differences between headings.

I believe it's a best practice to have some visual differentiation between each heading level, but not a requirement as such. The requirement is that they are correct in their semantics, h1 > h2 > h3, etc, not h1 > h3 > h2.

To that end, I think both headings in 16px should work. But otherwise, we could look at a different visual treatment, for example all-caps for the smaller level.

[fcoveram]

The requirement is that they are correct in their semantics, h1 > h2 > h3, etc, not h1 > h3 > h2.

Right. Due to the content variety the WordPress.org site hosts and the content hierarchies define per section, we haven't applied a direct relationship between H1, H2, H3, etc; and Heading 1, Heading 2, Heading 3.

To that end, I think both headings in 16px should work. But otherwise, we could look at a different visual treatment, for example all-caps for the smaller level.

The all-caps idea sounds good for Heading 6. It will look like this

[ryelle]

To that end, I think both headings in 16px should work. But otherwise, we could look at a different visual treatment, for example all-caps for the smaller level.

All-caps is also not recommended for accessibility reasons - like above, there's no wcag requirement, but uppercase text is uniform in shape, so it's arguably harder for users with dyslexia, and not suited to long headings for everyone. There's a good discussion on all-caps in core Drupal themes with references, where someone also made the point that in languages that don't have an uppercase (e.g., Japanese), using case to differentiate headings would do nothing.

Anyway, uppercase could work here since the use case is only very few words, and this site is not available in other languages yet — but I'm not sure about introducing a style that has potential issues into the design system, unless it's emphasized somewhere that it should only be for 1-2 word headings (and so never used on user-generated text).

[fcoveram]

Thanks for that input.

I was trying to keep the same x-height between Inter and EB Garamond headings, but perhaps I can move away from that idea and distribute sizes between Headings 3 and 6 more evenly. I made a quick mockup and the following sizes could work.

• Heading 3 Inter (Mobile): 21px.
• Heading 4 Inter (Mobile): 19px.
• Heading 5 Inter (Mobile): 17px.
• Heading 6 Inter (Mobile): 16px.

The rest of the font properties remain as proposed in the initial comment.