Anticode Open builder

The eyebrow label check: when every heading wears a small label

An eyebrow is the small, widely spaced uppercase label that sits above a heading: FEATURES over "Everything you need", PRICING over "Simple plans". The eyebrow label check counts how many of a page's main headings have one and fails when half or more do. A single label where it helps is fine; one on every section is a template showing through.

Updated · By the Anticode team

Why the label over every heading looks generated

Eyebrows come from print, where a kicker over a headline tells you which section of the paper you're in. On landing-page templates they turned into decoration: a tiny tinted word in tracked-out capitals above every block, usually repeating what the heading already says. Generated sites copy the pattern faithfully, so a page where each section opens with LABEL, then heading, then paragraph is now one of the quicker ways to tell nobody designed it. The labels also add a line of reading to every section without adding information, and spaced capitals are slower to read than ordinary text. The eyebrow text guide covers the history and the good uses.

How the eyebrow label check counts

  1. It looks through the stylesheet for rules that set text to uppercase and space the letters by at least 0.15em, and notes the class each rule styles.
  2. It finds every h1 and h2 on the page.
  3. For each heading, it checks the element immediately before it. If that element carries one of the noted classes, the heading counts as having an eyebrow.
  4. If the page has at least three such headings and half or more have an eyebrow, the check fails. The detail says how many, for example "4 of 6 headings have one".

Pages with fewer than three main headings always pass, because a short page can't really show the repeating pattern.

What it doesn't see

The method is specific, and its edges are worth knowing if a page passes while still looking labelled:

  • Gentler tracking. Spacing under 0.15em, or set in pixels rather than em, isn't treated as an eyebrow style. A label at 0.1em passes.
  • Labels inside the heading. A small span within the heading element, or a pseudo-element drawn before it, isn't a separate element, so it doesn't count.
  • Wrappers. A label that isn't the heading's immediate previous sibling, for instance with a divider between them, isn't counted.
  • Smaller headings. Only h1 and h2 are counted, so eyebrows over h3 card titles don't affect the result.
  • Styling by element. The check notes classes; a rule written for a tag name or a nested selector that doesn't end in a class isn't picked up.

When one label is fine

The rule allows labels on fewer than half of the headings, because a few have a job to do. Good uses tend to carry information the heading doesn't:

  • a date or category over a news post or case study;
  • a step number in a process;
  • the name of an event, issue or season above its title;
  • a short status, such as Booking now or Sold out, that changes.

Anticode's Swiss design system shows another way to mark sections: a small red number, 01, 02, 03, generated as part of each section heading. It does what a label does, separating parts of the page, without a word of repeated copy, and because it's inside the heading and not spaced capitals it doesn't count as an eyebrow. The other systems don't use labels over headings at all; see the Swiss design system.

Fixing a failure

  1. Read each label with its heading. If the label just names the section (FEATURES, ABOUT, FAQ), delete it.
  2. If it adds something, consider folding it into the heading: "Pricing for teams of any size" rather than PRICING over "Simple plans".
  3. Keep labels only where they carry changing or specific information, and on fewer than half of the sections.
  4. Make the headings work harder instead: a clear, specific heading needs no announcement.

Limits

  • Reported, not enforced. The design gate doesn't include this check.
  • It counts, it doesn't read. It can't tell a useful date label from a redundant one; the threshold is a proxy for the repeating pattern.
  • Pages only. It's part of the Critic's lint on design-engine pages, not the checks used for model-written apps.

Questions people ask

What is eyebrow text?

A short label, usually in small, widely spaced capitals, placed above a heading to name its section or category. It's also called a kicker or overline.

Is one eyebrow label allowed?

Yes. The check fails only when half or more of at least three main headings have one.

Do Swiss section numbers count as eyebrows?

No. They're generated inside the heading, not as a separate label, and they aren't spaced capitals.

Will it stop me publishing?

No. It's shown in the Report tab only.