Heading

A heading does two jobs at once, and it is worth separating them. It labels the block that follows, and its treatment (size, weight, colour, space above) places that block in the document’s outline. The label is content; the placement is typography. Getting the first right and the second wrong produces a page that reads correctly line by line and is impossible to skim, because a reader navigating by headings is reading the sizes rather than the words.

The vocabulary is inconsistent across fields. Publishing says headline for the title of a piece and subheading, deck, or standfirst for the line beneath it that elaborates. Interface work says title for the name of a screen or a dialog, section header for the sticky label above a group in a list, and heading for the generic case. HTML says h1 to h6 and nothing else, so all of it collapses to six levels the moment it becomes markup.

That collapse is where the trouble starts, because visual level and semantic level are separate decisions that get conflated. h1 is not “the biggest text”, it is “the top of the outline”, and the two only coincide when nobody has had to fit a design to a document yet. A card title set at 13px may well be an h3, and a display line at 48px may be no heading at all if it is marketing copy with nothing under it. Style the level with a class and choose the element from the structure, never the other way round, and keep the levels in order: heading hierarchy is the term for the sequence, and skipping a level is what breaks it.

Two habits do most of the work. Bind each heading to what it labels with space: more room above than below, so it reads as attached to the section beneath it rather than floating between two. And keep them short. A heading is scanned, not read, and a full sentence set at heading size is a paragraph with delusions, which is also why sentence case tends to beat title case at anything longer than three words.