A closing paragraph of the previous block of content, sitting directly above the crowded heading with no gap at all.

Flag Crowded One

The content this heading introduces sits forty pixels away while the previous block touches the heading.

Another closing paragraph of a previous content block, again flush against the heading that follows it in the flow.

Flag Crowded Two

Second crowded case. Two or more headings must violate the principle before the rule fires on a page.

A third closing paragraph that the next heading will visually attach to, which is the inversion this rule measures.

Flag Crowded Three

Third crowded case, this time an h3, to confirm the rule reads h2 through h4 and not only the top level.

A paragraph of running prose, set with one uniform margin, so the subhead below sits as close to it as to its own text.

Flag Near Equal Under Prose

Twenty pixels above and twenty-four below, under two lines of body copy: the subhead reads as part of the run above.

Another paragraph of running prose. The subhead below keeps exactly the gap it keeps to the paragraph it introduces.

Flag Even Under Prose

Twenty-four pixels on both sides of the subhead, under body copy that runs across the column.

A closing paragraph ten pixels above a title whose module box is painted the same white as the page around it.

A closing paragraph ten pixels above a title over a carousel that draws its slides in a shadow tree.

Flag Title Over Shadow Carousel

Pass First Heading

The first heading in its case has nothing above it, so it is exempt from the rhythm comparison entirely.

A paragraph with plenty of room after it. The heading below keeps sixty-four pixels above and sixteen below.

Pass Generous Above

Sixty-four pixels above and sixteen below. The heading clearly binds to this paragraph, the healthy shape.

A short line of copy.

Pass Even Under One Line

Even spacing under a single line is not running prose: a closing line, a kicker, a caption.

A paragraph before a heading whose spacing above and below is nearly equal, with more room above than the crowded test asks.

Pass More Room Above

Twenty-four pixels above and twenty below. The heading sits closer to its own content, the healthy direction.

A paragraph before an eyebrow label. The label belongs to the heading cluster, and the cluster has room above it.

Chapter Four

Pass Eyebrow Cluster

Space is measured from the top of the cluster, where seventy-two pixels separate it from the text above.

A paragraph before an eyebrow that a site builder wrapped in its own box, with the title wrapped in another box.

The wrapped label is still the heading's own label, and seventy-two pixels separate the pair from the text above.

Pass Divider Above

Twenty-four pixels to the rule above and forty-eight to this paragraph; the rule already separates the blocks.

A block of content followed by a horizontal rule, then a heading twelve pixels under that rule.

Pass Rule Above

The measured block above is the rule itself, which separates the sections rather than crowding the heading.

A block of content directly above a section title that draws a rule above and below its own text.

Pass Banded Title

The title band's own rule is the separator above it, so the zero gap to the block above is not crowding.

A paragraph twenty-four pixels above a heading whose standfirst sits behind a wrapper that generates no box at all.

Pass Standfirst Behind Contents

A paragraph before a small card. The card boundary provides the separation for the heading inside it.

A paragraph before a banded section. The heading is the first content inside a section with its own background.

A closing paragraph above a section header whose own padding holds sixteen pixels above the title.

The header's forty-eight pixels of bottom padding sit between the title and this, the content it introduces.

A closing paragraph above a title wrapper with a few pixels of bottom padding and a margin under it.

Six pixels of padding and forty-two of margin still put forty-eight pixels between the title and this.

A closing paragraph above a title set beside an icon that is taller than the title's own line.

The icon stretches the row, and the row's margin puts this content well away from the title.

A closing paragraph above a pricing title row whose button is taller than the title.

The plans the title introduces start under the whole row, fifty-eight pixels below the title.

What the column title introduces runs under the whole row, forty-eight pixels below the title.

A closing paragraph ten pixels above a heading whose gap below is an empty spacer box.

Flag Spacer Below

The spacer holds forty-eight pixels open between the heading and this content.

A closing paragraph, then a date line in a wrapper, set like the body copy rather than as a label.

The date is content of its own, so the title sits ten pixels under it and forty-eight above this.

A closing paragraph, then a code block framed on every side, twelve pixels above the next heading.

npm install impeccable
npx impeccable detect src/

Flag Code Block Above

The frame is the code block's own box, not a rule, so the heading still sits closer to it than to this.

A closing paragraph above a heading that ends a box drawing a rule under it.

The rule under the box ends the heading's box, so this content belongs to the next one.

A closing paragraph, then a news card whose grey section link sits a few pixels above its headline.

The grey link is the headline's label, so the cluster starts at the link, twenty-four pixels under the block above.

A closing paragraph, then an italic eyebrow at body size that opens the box holding a section title.

The italic line is the title's label, and the cluster sits forty-eight pixels under the block above.

A closing paragraph, then a hairline eyebrow at body size that opens the box holding a section title.

The weight sets the line apart from the copy around it, so it is read as the title's label.

A block of tiles closes with a blue link to the full list, laid out in the same box as the tiles.

View all essays

Flag Link Closing Block

The link ends the tiles above, so the title sits twelve pixels under it and forty above this.

A post excerpt closes with its grey date, and the next post's title follows twelve pixels under the date.

March 3, 2026

Flag Date Closing Post

The date belongs to the post above, so the title sits twelve pixels under it and forty above this.

A closing paragraph twelve pixels above a heading that carries a small icon as its own background image.

Flag Icon Heading

The icon decorates the heading and draws no edge above it, so the heading is measured as any other.

A closing paragraph twelve pixels above a title that draws a short accent bar under itself with a gradient.

Flag Accent Bar Heading

The bar sits under the title and draws nothing along its top, so the title is measured as any other.

A closing paragraph, then a grey sentence ten pixels above the next title, too long to read as a label.

Filed under politics and the week in review

Flag Grey Sentence Above

A sentence is content of its own whatever its colour, so the title sits ten pixels under it and forty-eight above this.

A closing paragraph directly above a band whose grey is a background image rather than a colour.

A closing paragraph directly above a band painted with a small tiled texture instead of a colour.