Eyebrow Text in Web Design
Key takeaways
- Eyebrow text is a short contextual label above a heading that frames what a section contains before the reader processes the main heading.
- On nonprofit sites serving several audiences at once, eyebrows let each stakeholder group identify relevant sections in a fraction of a second — an information-architecture decision, not decoration.
- Use eyebrows when a heading is deliberately broad or emotive, to segment content by audience, on content-heavy listing pages, or for status and timeliness signals.
- Avoid them above every heading, where the heading is already clear, when they run longer than a few words, or when they are styled to overshadow the heading.
- Style eyebrows smaller and more muted than the heading, typically 40 to 60 per cent of its size, with tight spacing that groups the eyebrow and heading together.
- For accessibility, eyebrow text must be marked up as a span or paragraph and never as a heading element, so screen-reader navigation is not broken.
Summary
Eyebrow text — the short label that sits above a heading to provide contextual framing before the reader processes the main heading — is one of the most effective and most misused design elements on nonprofit websites. Used well, it reduces cognitive load for visitors navigating a complex site, signals which stakeholder group a section is relevant to, and improves accessibility by providing additional structural context. Used poorly, it adds visual noise, duplicates information, or creates confusion by labelling things that do not need labelling.For nonprofits specifically, the governance dimension of eyebrow text is its role in stakeholder navigation. A site serving institutional funders, donors, beneficiaries, and programme partners simultaneously needs to signal quickly which content is relevant to which audience. Eyebrow text is one mechanism for doing this without creating separate site sections or duplicating content.This post explains when eyebrow text adds genuine navigational value, when it should be omitted, what content it should contain for different page types on a nonprofit website, and how to implement it accessibly — including the ARIA roles that ensure screen readers interpret it correctly and the CSS patterns that style it without disrupting the heading hierarchy that assistive technologies depend on.
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.
Frequently asked questions
Eyebrow text is the short label — usually one to five words — that sits directly above a main heading and tells visitors what a section is about before they read the heading itself. The term comes from print journalism, where a short line above the headline was called a kicker or eyebrow. It is a contextual label, not a subtitle, a tagline, or decoration.
In four situations: when a heading is deliberately broad or emotive and needs a navigational label; when content must be segmented by audience, with labels such as "For Institutional Funders" or "For Partners"; on content-heavy listing pages where category labels help scanning; and for status signals such as "New" or "Annual Report 2025". If the heading already communicates clearly, the eyebrow is redundant and should be omitted.
Noticeably smaller than the heading — typically 40 to 60 per cent of its font size — often in uppercase with slightly increased letter spacing, in a muted colour that does not compete with the heading. The gap between eyebrow and heading should be tight, around eight to sixteen pixels, so the two read as one visual group. If the eyebrow overshadows the heading, the hierarchy is inverted and the page becomes harder to read.
No. Eyebrow text must be marked up as a span or paragraph, never as an h2 or h3, because screen readers use heading tags to build a navigational outline of the page. An eyebrow incorrectly marked up as a heading creates a confusing double-heading structure for assistive technology users. For organisations with WCAG AA obligations, this is a compliance consideration, not a minor detail.
An eyebrow is a short label above a heading that categorises what follows. A subtitle comes after the heading and expands on it. A tagline represents the brand rather than a specific section. Good eyebrow text reads like a label — "For Funders", "Case Study", "How We Work" — while anything that reads like a slogan or a full sentence is a heading pretending to be one.
