The Small Label That Orients Your Reader First
Picture a card labeled “Disability Benefits” sitting above the heading “Compensation Claim.”
That small label above the heading is called an eyebrow. It tells you what category you are in before you read the actual headline.
It sounds minor, but it changes how fast you understand a page. A well-placed eyebrow supplies context at a glance without making the main heading work harder.
What an Eyebrow Actually Is
An eyebrow is a short line of text placed directly above an H1 or H2 heading. It is smaller than the heading it sits next to and secondary to that heading in visual weight.
Design systems such as VA.gov and the Consumer Financial Protection Bureau specify eyebrows as small text, often rendered in all caps, positioned immediately above the main title.
Its job is not to add a second message. Its job is to give the main heading context quickly.
Why Eyebrows Actually Help Readers
People rarely read every headline word by word. They scan the first few words for a signal that tells them whether the content is relevant.
Research summarized by UX Movement found that readers often use an eyebrow to identify the subject before they process a longer headline. When the headline does not place its clearest keyword first, the eyebrow can supply that missing cue.
Eyebrows are therefore most useful when a longer headline needs context. If the headline already begins with the right topic word, an eyebrow may add less value.
When to Use One and When to Skip It
Use an eyebrow when you need to identify a category, content type, service area, or step in a larger process.
The REI Cedar design system recommends eyebrows for categories and groupings across cards or related pages. VA.gov uses a similar pattern when a subtask belongs to a broader sequence.
Skip the eyebrow when it would merely repeat the heading, display a brand name, or act as another headline. If the information describes a changing state such as “New,” “Open,” or “Updated,” use a status badge instead.
Formatting and Accessibility Basics
Write the underlying eyebrow text in normal sentence case even when CSS displays it in all caps. That keeps the content consistent for screen readers, editors, and any context where the styling does not load.
The eyebrow is not a heading level. It supports the heading beneath it, so the page still needs a logical heading hierarchy.
According to W3C Web Accessibility Initiative guidance, heading ranks should follow a meaningful order. An H2 should not jump directly to an H4 simply because the text looks right.
The CFPB design system also notes that repeated categories may need an accessible text label when nearby visual cues rely on icons alone.
How Design Teams Actually Build Them
The visual details vary from one design system to another, but the core relationship stays the same: the eyebrow is smaller and quieter than the heading.
The CFPB uses a fixed small size, semibold weight, and uppercase styling above an H1. Other systems may connect eyebrow color to a product or content category.
Either approach can work if the spacing, type treatment, and purpose remain consistent. Most teams build the pattern as a reusable component so editors do not have to recreate it on every page.
Common Mistakes to Avoid
Keep the text short enough that it does not wrap onto a second line on mobile. An eyebrow should feel like a quick label, not a sentence.
Avoid punctuation that makes it read like body copy, and do not write it as a second headline. The main heading still needs to carry the message.
Apply the same capitalization, spacing, color rules, and position across the site. Inconsistent eyebrow styles can make related pages feel disconnected.
Getting Eyebrows Right on Your Site
Small details add up to a site that is easier to scan and navigate. When labels, headings, and cards share a clear hierarchy, you spend less time making visitors guess where they are.
Gaps in an eyebrow pattern can also reveal a broader organization problem. The same is true of inconsistent headings, category names, and navigation labels.
If your site needs a more coherent content and visual system, our web design services can help you bring those pieces together.
FAQs
Is an eyebrow the same as a kicker or meta header?
The terms are closely related and are often used interchangeably. Some teams use “kicker” for editorial content and “eyebrow” for interface or marketing content, while others call the same element a meta header. What matters most is defining the term in your design system and using it consistently.
Should eyebrow text be clickable?
Usually, no. The eyebrow normally labels the heading rather than acting as a separate destination. A clickable category may make sense inside a card or archive pattern, but the interaction should be clear and should not compete with the main link.
Do eyebrows help with SEO?
Eyebrows are primarily a usability and readability tool. They can support a well-organized page and help readers scan content, but they are not a direct ranking factor. Use them because they clarify the experience, not because you expect a guaranteed search result.