# Three Dashes, Three Jobs

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

> SHOULD: Use the correct dash: hyphen (-) for compounds, en dash (–) for ranges and connections (2020–2024, pages 10–20), em dash (—) for sentence-level breaks. A hyphen in a range is a typesetting error. In JSX use the real UTF-8 character or a named entity — a \u2013 escape renders literally in a text node. (Use dashes sparingly per content-impeccable-em-dash-overuse; this is about picking the right one when you do.)

Hyphen joins compounds, en dash spans ranges (1–10), em dash breaks a sentence — one glyph for all three is a typographic error

The keyboard has one dash key; English needs three characters. A hyphen (-) joins compounds — well-known, sign-in. An en dash (–) spans ranges and connections and reads as "to" or "through": 2020–2024, pages 10–20, the New York–London route. A hyphen in a range (2020-2024) is one of the most common tells that text was never typeset. An em dash (—) marks a sentence-level break. The distinction is invisible until it is wrong, at which point it quietly says "nobody set this type." A tension worth naming, because the corpus holds both: content-impeccable-em-dash-overuse warns that leaning on em dashes reads as an AI tell and pushes you toward commas, colons, and parentheses — that rule is about FREQUENCY, this one is about CORRECTNESS, and they agree. Use dashes sparingly; but when a range needs one, make it an en dash, not a hyphen. In JSX, use the real UTF-8 character or a named entity — a `\u2013` escape renders literally inside a text node. Neighbour to content-typographic-quotes and content-ellipsis-character: the same "use the designed character, not the typewriter approximation" instinct.

## Rule snippet

```tsx
2020–2024  {/* en dash, not 2020-2024 */}
pages 10–20  {/* en dash */}
well-known  {/* hyphen: compound */}
```

## Bad — do not do this

`content-dash-taxonomy-bad`

```tsx
export function DashTaxonomyBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="space-y-2 rounded-lg border border-border bg-card p-4 text-sm text-foreground">
        <p>Fiscal year <span className="font-mono">2020-2024</span></p>
        <p>See pages <span className="font-mono">10-20</span></p>
        <p>The <span className="font-mono">New York-London</span> route</p>
      </div>
      <p className="mt-4 text-xs text-destructive">
        Hyphens standing in for ranges — the reliable tell that text was never typeset.
      </p>
    </div>
  );
}
```

## Good — do this

`content-dash-taxonomy-good`

```tsx
export function DashTaxonomyGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="space-y-2 rounded-lg border border-border bg-card p-4 text-sm text-foreground">
        <p>
          Fiscal year <span className="font-mono">2020–2024</span>{' '}
          <span className="text-muted-foreground">en dash · range</span>
        </p>
        <p>
          See pages <span className="font-mono">10–20</span>{' '}
          <span className="text-muted-foreground">en dash · range</span>
        </p>
        <p>
          A <span className="font-mono">well-known</span> fix{' '}
          <span className="text-muted-foreground">hyphen · compound</span>
        </p>
        <p>
          It worked—eventually.{' '}
          <span className="text-muted-foreground">em dash · sentence break</span>
        </p>
      </div>
      <p className="mt-4 text-xs text-success">
        En dash for ranges, hyphen for compounds, em dash for breaks — the right glyph for each job.
      </p>
    </div>
  );
}
```

## References

- [Butterick — Practical Typography: hyphens & dashes](https://practicaltypography.com/hyphens-and-dashes.html)
- [bencium — typography skill (Butterick-derived)](https://skills.sh/bencium/bencium-marketplace/ui-typography)
- [MDN — en dash / em dash](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Character_references)