Eyebrow text 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. You have probably seen it many times without knowing it had a name.

On a SaaS homepage it might say “For Enterprise Teams” above the main value proposition. On a product page, “New Release” above a feature announcement. Either way, 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 headline was called a kicker or an eyebrow. The web uses the same principle: a small piece of text that frames what follows.

Why it matters for nonprofit websites

Most nonprofit websites serve several audiences at once:

  • 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 site reflects the stated mission.

Visitors are not reading carefully enough to untangle all that. Nielsen Norman Group's eyetracking work on how people read online (Moran, 2020) reports that people rarely read online and are far more likely to scan than read word for word, a behaviour their studies found unchanged across twenty-three years. Most visitors decide whether to stop on the strength of a glance.

An eyebrow is the cheapest thing you can put in the path of that glance. Take a homepage with three sections. Without eyebrows, visitors have to read each heading to work out what it contains. With eyebrows reading “Impact”, “Current Programmes” and “Governance and Accountability”, a funder can go straight to governance, and a programme partner can skip the donor-facing content.

This is an information architecture decision, not a cosmetic one. It sits close to the messaging decisions about who each part of the site is talking to.

What eyebrow text is, and what it is not

An eyebrow is a short contextual label above a heading, 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.
  • A tagline. A tagline represents the brand, not a specific section.
  • Decoration. If it does not add 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. “Discover Our Amazing Impact Story” is a heading pretending to be a label.

One thing to catch in review: the possessive is usually dead weight. “Our Impact” and “Impact” do the same job, and the shorter one takes less space. If an eyebrow can lose a word without losing meaning, it should.

When to use eyebrow text

Eyebrow text earns its place in four situations.

  1. The heading is deliberately broad or emotive. Above “Building a Future Together”, an eyebrow reading “Programmes” says what the section contains. The heading does the emotional work; the eyebrow does the navigational work.
  2. Content has to be segmented by audience. “For Institutional Funders”, “For Partners” or “For Beneficiaries” signal at once who the content is for. That saves visitors time, and makes it less likely a funder lands on beneficiary-facing content and concludes the site was not built with their due diligence in mind. The underlying problem is multi-stakeholder navigation; eyebrows are one of the lighter instruments for solving it.
  3. Content-heavy pages. On blog listings, resource libraries and programme directories, “Governance”, “Accessibility” or “Fundraising” on a set of cards tells readers what each item covers without parsing the full headline.
  4. Status or context signals. “New”, “Updated”, “Annual Report 2025”. These communicate timeliness and relevance at a glance.

When not to use it

  • Above every heading. If every section has one, the pattern becomes visual noise. A signal that never stops is not a signal.
  • When the heading is already clear. Above “Our Safeguarding Policy”, an eyebrow saying “Policies” is redundant.
  • As a full sentence. Past five or six words it stops being a label and competes with the heading, which breaks the hierarchy.
  • Styled more prominently than the heading. The eyebrow is the supporting act. If it is larger, bolder or more colourful than the heading, the hierarchy is inverted and the page gets harder to read.

How to style eyebrow text properly

Typography hierarchy is the whole of it.

Size

The eyebrow should be noticeably smaller than the heading, commonly around forty to sixty per cent of its size. That is a working range, not a rule.

Check it at the small end of your breakpoints. A heading already reduced for mobile leaves very little room underneath it, and mobile heading sizes is where that ratio tends to break first.

Case

Uppercase with slightly increased letter spacing is the conventional treatment, and for this use it has support. Nielsen Norman Group's summary of MIT AgeLab research on glanceable reading (2017) found that isolated words set in uppercase were recognised faster than the same words in lowercase, with lowercase requiring twenty-six per cent more time for accurate reading.

The caveat is in the same article: those findings apply to single words read at a glance and do not extend to longer passages, where all-caps reduces legibility. That is exactly the line between an eyebrow and everything else. A two-word label can be uppercase. A sentence cannot.

Colour

Muted relative to the heading: an accent colour at reduced strength, or a mid-tone that holds contrast without pulling the eye. It still has to meet contrast requirements in its own right; muted is not an exemption.

Spacing

Keep the gap between eyebrow and heading tight, so the two read as one group. The eyebrow belongs with the heading, not with whatever sits above it. That is the proximity principle, the same mechanism covered in white space and visual hierarchy. Get it wrong and the label floats, attaching itself to the previous section.

The accessibility dimension, and who carries it

This is where a styling question becomes a governance one. Eyebrow text is a visual element, not a structural heading. In the markup it belongs in a <span> or a <p>, never an <h2> or an <h3>.

That is not a preference. WCAG 2.2's technique for heading markup, H42, states plainly that heading markup should not be used when the content is not a heading.

The consequence is measurable. WebAIM's tenth Screen Reader User Survey, run over December 2023 and January 2024, found that 71.6 per cent of respondents navigate a long page by moving through its headings first, ahead of every other method, and 88.8 per cent rated heading levels very or somewhat useful. For most screen reader users, headings are the first route into a long page.

So an eyebrow marked up as a heading puts a decorative label into the list a visitor is using as a table of contents, right before the real section title. Every section gains a phantom entry, and the outline stops describing the page.

Why it matters for your organisation, not just your developer: if a funder's accessibility questionnaire, or a partner's procurement process, asks whether your site meets WCAG 2.2 AA, the answer has to be true at the markup level. Nobody in your comms team can see the markup. The failure is invisible in the browser and in a screenshot. It only surfaces in an audit, a complaint, or a form you have already signed.

You do not need to read code to check it. Two things get you most of the way:

  1. Read the heading outline. Ask whoever maintains the site to show you the page's heading outline, which every accessibility tool and most browser extensions produce in one click. It should read like a contents page. Any entry that is a label rather than a section is the bug.
  2. Put it in the brief. One line saying decorative labels must not use heading elements, and that the outline will be reviewed at handover, moves this from something you discover later to something you specified.

If your site runs on Webflow, the WCAG AA implementation guide covers how this and the rest of the AA requirements land in practice.

The eyebrow can look however you want. The markup underneath it is not a matter of taste.

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. After the hero come three content blocks.

Without eyebrow text, visitors have to work out which section concerns them. With eyebrows, the page is navigable by audience at a glance:

  • “For Funders” above the governance and impact section;
  • “Support Our Work” above the donation call to action;
  • “Partner With Us” above the collaboration section.

One site asks visitors to work out where they belong; the other directs them there. To an institutional funder doing due diligence, the second signals organisational clarity. The first signals the site 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, and eyebrow text is no exception. The question is not “does this look modern?” It is “does this help the stakeholders who matter most find what they need?”

If yes, use it. If it just looks nice, leave it out. Using design elements only when they serve a clear structural purpose is what separates a website that works as institutional infrastructure from one that works 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 where the design decisions are helping and where they are getting in the way.