Em Dash

The em dash is the longest of the standard typographic dashes, at Unicode code point U+2014. Its name derives from its traditional width -- equal to the point size of the typeface, which corresponds roughly to the width of the capital letter M. It is one of the most versatile punctuation marks in English typography, with several distinct conventional uses that set it apart from the en dash and hyphen.

Primary Uses

Parenthetical insertion -- The em dash can replace parentheses or commas to set off a clause, often with more emphasis:

The solution--elegant in its simplicity--took three years to develop.
The meeting was productive--if a bit long--and ended with clear action items.

Strong interruption or break in thought:

She opened the file and--nothing. The database was empty.

Attribution after a quotation:

"The only way to do great work is to love what you do." --Steve Jobs

Replacement for a colon (less formal):

He had one goal--to finish the project before the deadline.

HTML and CSS Usage

<!-- Named entity -->
&mdash;

<!-- Hex entity -->
&#x2014;

<!-- Decimal entity -->
&#8212;

<!-- Direct in UTF-8 document -->
The answer--42--surprised everyone.

/* CSS content property for generated em dashes */
blockquote cite::before {
  content: '\2014 \00A0'; /* em dash followed by non-breaking space */
}

.pull-quote::after {
  content: '\00A0\2014'; /* NBSP + em dash */
}

Spacing Conventions

Style guide opinions diverge sharply on spacing:

• Chicago Manual of Style / most US publishers: no spaces -- text runs directly into the dashes--like this
• AP Stylebook: no spaces for em dashes
• The Guardian, many UK publications: spaces around the dash -- like this -- which some argue improves readability
• HTML/web: a thin space (U+2009) before and after can improve appearance at screen resolutions

<!-- With thin space for web typography -->
The result&#x2009;&mdash;&#x2009;unexpected by all

Keyboard Input

macOS:        Shift + Option + Hyphen
Windows:      Alt + 0151 (numeric keypad)
Linux/GTK:    Compose, -, -, -
Microsoft Word: two hyphens (--) between words auto-corrects to em dash

Em Dash in CSS Properties

CSS itself uses -- for custom property names (a convention with no relation to em dashes), but the em dash character appears in several CSS use cases:

/* CSS custom properties use -- prefix, unrelated to typography */
:root {
  --brand-color: #0066cc;
}

/* Em dash via unicode-range in @font-face for subset loading */
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  unicode-range: U+2014; /* Load this font file for em dash */
}

Two Em Dash and Three Em Dash

Professional typesetting also uses extended forms:

U+2E3A  TWO-EM DASH   -- for missing or suppressed words
U+2E3B  THREE-EM DASH -- for missing author names in bibliographies

Screen Reader Behavior

Screen readers vary: some announce em dash as "dash," others as "em dash," and some skip it entirely. When the dash is essential to understanding (such as in attribution), ensure the surrounding context conveys the meaning without relying on the dash character being read aloud.