Heading sizes: separate semantics from styles
Problem to solve
Based on discussion from gitlab-org/gitlab-ee!8267
As @andr3 puts it well:
The html elements of headings should be chosen according to the document structure to facilitate understanding and parsing the sections of the document. Assistive tech like screenreaders usually have a mode to navigate only by headings.
The style is handled by css. Not html.
Semantics and style should be separate as we sometimes need an h1 that looks like an h2 or maybe an h2 that looks like an h1. Here's an example how BBC did it in their design system. It's very common to use naming that suggests size but not semantics. BBC used old typographic measure names for that, when I was at Auto Trader we used car names (Smart, Fiat-500, ..., Land Rover).
- We should define sets of sizes for headings (for various breakpoints) and assign names that suggest the size but not the semantic value.
- we should document these in the Design system
What does success look like, and how can we measure that?
Headings styles that are separate from the semantic value so that headings don't break the outline of the page.