Eyebrow text above headings: when the small label helps and when it's a tic
An eyebrow, the small label above a heading, earns its place when it tells readers something the heading doesn't: which series an article belongs to, which step of a process they're on, which category a product sits in. Put the same tiny spaced capitals over every section and it stops carrying information. It becomes a pattern people recognise from templates and generated pages.
Where the eyebrow comes from
Newspapers and magazines have long set a short label above a headline: a section name, a column title, a topic. Editors call it a kicker; web designers more often call it an eyebrow, and some interface type scales name the style an overline. In print it solves a real problem: a reader flicking through pages needs to know they've moved from news to sport. On a website, the same job exists on article pages, in product listings, and in multi-step forms.
The habit is newer. Marketing templates began putting a label over every block: "FEATURES" above "Everything you need", "PRICING" above "Simple, transparent pricing", "TESTIMONIALS" above "What our customers say". The label repeats what the heading already says, in smaller and harder-to-read type, and generated sites copy it because it's everywhere in the material they learned from.
Kicker text design that earns its place
| Useful | Redundant |
|---|---|
| Case study · Hospitality, above the project name | Our work, above "Our work" |
| Step 2 of 3, above "Choose a time" | Booking, above "Book now" |
| Ceramics, above a product name on a mixed shop page | Products, above "Our products" |
| Updated 12 March, above a policy title | About, above "About us" |
| Menu · Autumn, above a seasonal menu | Menu, above "Our menu" |
The test: cover the heading and read the eyebrow alone. If it tells you something new, keep it. If it's a one-word version of the heading, cut it, and if the heading then feels weak, rewrite the heading to say something specific.
Small caps label above heading: readability
The usual styling, tiny uppercase letters with wide tracking, is the least readable type on the page. Text in capitals loses the word shapes that help recognition, and MDN's text-transform reference notes that large amounts of uppercase text can be hard to read for people with dyslexia. A short label is tolerable; a long one isn't.
- Keep eyebrows to two or three words.
- Use
text-transform: uppercasein CSS rather than typing capitals, so screen readers and copy-paste get normal case. - Keep them at least 12px, ideally 13 to 14px, with enough contrast; muted grey at 11px fails most people.
- Consider sentence case in a heavier weight or the action colour instead of capitals.
Marking up overline text
An eyebrow isn't a heading. Marking it as an h2 or h3 doubles the headings in a screen reader's list and fills it with single words. Make it a paragraph or a span, placed before the heading in the source so it's read first. HTML has an element for exactly this pairing: hgroup groups one heading with paragraphs before or after it, such as a tagline or subtitle, and only the heading counts in the outline. See heading structure for accessibility for the wider outline.
Getting the same result without labels
- Better headings. "Cuts, colour and beard trims from 25 minutes" orients the reader more than an eyebrow ever could.
- Section numbers where order matters, as Swiss-style layouts do.
- Rules and space. A clear line or generous gap between sections separates them without a label.
- Navigation that marks the current place, such as a highlighted link or breadcrumb, on deep sites.
Eyebrows in Anticode
The Critic flags a small spaced-capitals label over most headings. When a page has at least three main headings, it looks for elements styled in uppercase with wide letter-spacing sitting directly before them, and it flags the page if half or more of the headings have one. A label over one or two headings, where it carries information, passes.
Anticode's design-engine sections open with a heading and a short line of supporting text, not a label. The Swiss system places a small section number above each section heading, drawn as part of the heading in the action colour, which gives the page its numbered structure; the Luxury system uses wide-tracked capitals for navigation, buttons and small facts rather than over headings.
Questions people ask
What is eyebrow text?
A short label set above a heading, usually smaller and often in capitals, that gives context such as a category, series or step.
Should every section have an eyebrow?
No. Use one only where it adds information the heading doesn't. Over every section it becomes noise.
Should an eyebrow be a heading element?
No. Use a paragraph or span before the heading, or group the two in hgroup.