Highlighted word in headline design: a template habit, and better emphasis

How one coloured word took over

The pattern is familiar: "Build websites faster", with "faster" in violet; "The future of finance", with "future" in a gradient; "Design that feels human", with "human" in an italic serif while the rest is sans-serif. It spread through startup landing pages and component libraries, where a span with a highlight class was the quickest way to make a hero look designed. Generated pages then picked it up as a default, so the coloured word in a heading now reads as part of a kit.

Look at which words get the colour, because a highlighted word in headline copy is a claim that this word matters most. They're almost always abstract: faster, better, future, simple, human, magic. The highlight draws the eye to the least informative part of the sentence. A visitor reading "Fresh bread from 7am" learns more than one reading "Bread, reimagined".

What goes wrong

MDN's page on background-clip, the property behind most gradient text, carries exactly these warnings: check the contrast between the background and the text over it, provide a fallback background colour in case the image fails, and test support with @supports. See gradient text headlines for the gradient version in detail.

Em or span: what the markup says

If a word is italicised to mean something, the element matters. As MDN's page on em explains, em marks stress that changes the meaning of a sentence and may be read with verbal stress, while i marks text in an alternate voice, such as a foreign word or a title, without extra stress. A purely decorative recolour is neither: it's a span with a class, and to a screen reader it's invisible. That's a useful check. If the emphasis would make no difference read aloud, it's decoration.

Getting emphasis from the sentence instead

1. Make the headline specific. Replace the highlighted abstraction with a fact: a time, a place, a price, a number of people. Specific words carry their own weight.
2. Let size and weight do the work. A large headline in one colour, with a lighter supporting line underneath, already has a clear hierarchy.
3. Use real stress when you mean it. "We don't charge for call-outs", with stress on "don't", is a genuine use of emphasis, and em is the right element.
4. Keep the action colour for actions. Buttons and links stay recognisable when nothing else shares their colour.
5. Put character in the type choice, not in one word. A distinctive typeface used consistently is stronger than a decorative word in a generic one; see big typography in web design.

One-word highlights also tend to come with other habits: the "X, not Y" headline, a small label over every section and dense em dashes. See AI headline clichés, eyebrow text above headings and em dashes in website copy.

The italic word in a headline in Anticode

The Critic flags a single headline word recoloured or italicised. One of its nineteen checks looks inside the page's main headline (the h1) for an em, i, span, strong or b wrapping one or two words, and flags it, naming the word. A related check flags headlines built on the "X, not Y" formula or as two clipped fragments. The design engine sets each headline in one colour and one family, sized by the design system's headline scale, which you can change in the visual editor.

Questions people ask

Is it wrong to colour one word in a heading?

Not wrong, but rarely useful. It usually highlights the vaguest word and borrows the action colour from things people can click.

Is gradient text accessible?

It can be, if every part of the gradient meets contrast against the background and there's a solid fallback colour. In practice, parts of it often fail.

Should I use em or span for a highlighted word?

Use em only for stress that changes the meaning. A purely visual highlight is a span, and probably worth removing.

Sources

1. background-clip, MDN Web Docs, checked 24 October 2026
2. <em>: The Emphasis element, MDN Web Docs, checked 24 October 2026