# One Emphasis Signal at a Time

**SHOULD** · **ID:** `content-emphasis-one-signal` · **Category:** content
**Source:** Custom
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-emphasis-one-signal

> SHOULD: Emphasize with bold OR italic, never both on the same text, and never underline for emphasis — on the web underline means link. Reserve underline for links, bold for strong emphasis, italic for titles/terms/mild stress, each used alone. Stacking emphasis markers cancels the contrast they exist to create.

Emphasize with bold OR italic, never both at once, and never with underline — on the web, underline means link

Emphasis is a contrast, and contrast only works while it is scarce. Stacking bold and italic on the same words does not make them twice as important — it makes the line look like it is shouting and spends the next level of emphasis you might have needed later. Pick one: bold for strong emphasis, italic for titles, terms, and mild stress. Underline is worse than redundant on the web, because it is the near-universal signal for a link: underlining for emphasis trains users to click text that does nothing, and it collides with design-underline-from-font, which is about styling the underline on actual links. Reserve underline for links, and use bold and italic one at a time. This is the character-formatting version of the over-signalling failure the corpus flags elsewhere (design-ibelick-color-restraint for accent colour, content-impeccable-em-dash-overuse for punctuation): more emphasis markers do not add emphasis, they cancel it.

## Rule snippet

```tsx
<strong>important</strong> · <em>term</em> · <a href="…">link</a>
// not: <span class="font-bold italic underline">…</span>
```

## Bad — do not do this

`content-emphasis-one-signal-bad`

```tsx
export function EmphasisOneSignalBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="rounded-lg border border-border bg-card p-4 text-sm leading-relaxed text-foreground">
        <p>
          This is <span className="font-bold italic underline">extremely important</span> and you should{' '}
          <span className="underline">read it carefully</span> before continuing.
        </p>
      </div>
      <p className="mt-4 text-xs text-destructive">
        Bold + italic + underline stacked on one phrase, and underlined text that looks clickable but isn’t.
      </p>
    </div>
  );
}
```

## Good — do this

`content-emphasis-one-signal-good`

```tsx
export function EmphasisOneSignalGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="rounded-lg border border-border bg-card p-4 text-sm leading-relaxed text-foreground">
        <p>
          This is <strong>important</strong>, the term <em>flush-left</em> has a precise meaning, and the
          full rules live in the{' '}
          <a
            href="#emphasis"
            className="text-primary underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
          >
            style guide
          </a>
          .
        </p>
      </div>
      <p className="mt-4 text-xs text-success">
        Bold alone for strong, italic alone for a term, underline reserved for the real link.
      </p>
    </div>
  );
}
```

## References

- [Butterick — Practical Typography: bold or italic](https://practicaltypography.com/bold-or-italic.html)
- [bencium — typography skill (Butterick-derived)](https://skills.sh/bencium/bencium-marketplace/ui-typography)