Three Dashes, Three Jobs
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
2020–2024 {/* en dash, not 2020-2024 */}
pages 10–20 {/* en dash */}
well-known {/* hyphen: compound */}Bad
Good
Why it matters
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.