Eyebrow Text in Web Design — What It Is and When to Use It

You have probably seen eyebrow text on hundreds of websites without knowing it had a name. It is the short label — usually one to five words — that sits directly above a main heading. It tells visitors what a section is about before they read the heading itself.

On a SaaS homepage, it might say “For Enterprise Teams” above the main value proposition. On a product page, it might say “New Release” above a feature announcement. In both cases, it does the same job: it gives the reader context before they invest attention in the larger text below.

The term comes from print journalism, where a short line above the main headline was called a kicker or eyebrow. In web design, the principle is identical — a small, secondary piece of text that frames and categorises what follows.

Why it matters for nonprofit websites

Most nonprofit websites serve multiple audiences simultaneously. Institutional funders need governance documents and impact evidence. Individual donors need a clear case for support and a working donation flow. Beneficiaries need programme information. Board members need to see that the organisation’s public face reflects its stated mission.

That is a lot of competing needs on a single site. Eyebrow text helps because it tells each of those audiences, within a fraction of a second, whether a section is relevant to them.

Consider a homepage with three content sections. Without eyebrow text, visitors see three headings and have to read each one to work out what the section contains. With eyebrow text — “Our Impact”, “Current Programmes”, “Governance & Accountability” — the structure becomes immediately scannable. A funder arriving at the site can jump straight to governance. A programme partner can find what they need without scrolling through donor-facing content.

This is not a cosmetic choice. It is an information architecture decision that directly affects how well the site serves its primary stakeholders.

What eyebrow text is — and what it is not

An eyebrow is a short contextual label. It sits above a heading. It is visually smaller and less prominent than the heading it supports. Its job is to categorise or frame, not to persuade or explain.

It is not a subtitle — subtitles come after the heading and expand on it. It is not a tagline — taglines represent the brand, not a specific section. And it is not decoration. If the eyebrow text does not add genuine clarity about what the section contains, it should not be there.

Good eyebrow text reads like a label: “For Funders”, “Case Study”, “Annual Report”, “How We Work”. Bad eyebrow text reads like a slogan or a sentence: “Discover Our Amazing Impact Story” is not an eyebrow. It is a heading pretending to be one.

When to use eyebrow text

Eyebrow text earns its place in a few specific situations.

The first is when a heading is deliberately broad or emotive. If a section heading says “Building a Future Together”, an eyebrow reading “Our Programmes” tells visitors what the section actually contains. The heading does the emotional work; the eyebrow does the navigational work.

The second is when you need to segment content by audience. Eyebrows like “For Institutional Funders”, “For Partners”, or “For Beneficiaries” immediately signal who the content is intended for. On a nonprofit site serving multiple stakeholder groups, this kind of labelling saves visitors significant time and reduces the chance that a funder lands on beneficiary-facing content and concludes the site is not serious enough for their due diligence.

The third is on content-heavy pages — blog listings, resource libraries, programme directories — where category labels help visitors scan quickly. “Governance”, “Accessibility”, “Fundraising” as eyebrow labels on blog cards tell readers what each post covers without requiring them to parse the full headline.

The fourth is for status or context signals. “New”, “Updated”, “Annual Report 2025” — these short labels communicate timeliness and relevance at a glance.

When not to use it

Eyebrow text should not appear above every heading on the page. If every section has one, the pattern loses its navigational value and becomes visual noise.

It should not be used when the heading already communicates clearly. If a section heading says “Our Safeguarding Policy”, adding an eyebrow that says “Policies” is redundant. The heading has already done the job.

It should not be a full sentence. If the eyebrow text runs longer than five or six words, it has stopped being a label and started competing with the heading for attention. That breaks the hierarchy instead of supporting it.

And it should never be styled so prominently that it overshadows the heading. The eyebrow is the supporting act. If it is larger, bolder, or more colourful than the heading itself, the visual hierarchy is inverted and the page becomes harder to read, not easier.

How to style eyebrow text properly

Typography hierarchy is the key consideration. The eyebrow should be noticeably smaller than the heading — typically 40 to 60 per cent of the heading’s font size. Many implementations use uppercase lettering with slightly increased letter spacing, which gives the eyebrow a distinct visual identity without requiring it to be large.

Colour should be muted relative to the heading. A common approach is to use an accent colour at reduced opacity, or a mid-tone grey that creates enough contrast to be legible without drawing the eye away from the main heading.

Spacing matters more than most people realise. The gap between the eyebrow and the heading below it should be tight enough to create a clear visual grouping — the eyebrow belongs with the heading, not with whatever content sits above. Eight to sixteen pixels is a sensible range depending on the overall design scale.

The accessibility dimension

This is where nonprofit organisations need to pay particular attention. Eyebrow text is a visual design element, not a structural heading. In the HTML, it should be marked up as a <span> or <p> element — never as an <h2> or <h3>.

Screen readers use heading tags to build a navigational outline of the page. If eyebrow text is incorrectly marked up as a heading, screen reader users encounter a confusing structure: they hear something like “For Funders” as a heading, immediately followed by another heading with the actual section title. That breaks the expected pattern and makes the page harder to navigate for anyone using assistive technology.

For organisations that have WCAG AA obligations — which includes most nonprofits receiving public funding or serving people with disabilities — this is not a minor detail. It is a compliance consideration. The visual styling of the eyebrow can look however you want it to look, but the underlying markup must respect the semantic heading hierarchy.

In Webflow, this means using a text block or paragraph element styled to look like an eyebrow, not a heading element with reduced font size. The Lumos framework handles this distinction cleanly, but it requires the person building the site to understand the difference between visual appearance and semantic meaning.

What this looks like on a real nonprofit site

Imagine a homepage structured for three primary stakeholder groups identified through a salience analysis — institutional funders, individual donors, and programme partners.

The page has a hero section, then three content blocks. Without eyebrow text, visitors see three section headings and have to work out which one is relevant to them. With eyebrow text — “For Funders” above the governance and impact section, “Support Our Work” above the donation call to action, “Partner With Us” above the collaboration section — the page becomes immediately navigable by audience.

That is the difference between a site that asks visitors to figure out where they belong and a site that directs them there. For an institutional funder conducting due diligence, the second experience signals organisational clarity. The first signals that the website was not built with their visit in mind.

The governance question behind the design question

Every design decision on a nonprofit website is, at some level, a governance decision. Eyebrow text is no exception. The question is not “does this look modern?” — it is “does this help our primary stakeholders find what they need?”

If the answer is yes, use it. If the answer is “it just looks nice”, leave it out. That discipline — using design elements only when they serve a clear structural purpose — is what separates a website that functions as institutional infrastructure from one that functions as a brochure.

If your site’s information architecture is not serving stakeholders clearly — or if you are not certain which stakeholders should be driving the structure — a Blueprint Audit identifies exactly where the design decisions are helping and where they are getting in the way.