Mind Your En And Em Dashes: Typographic Etiquette for Web Content

The difference between polished, professional content and amateur work often comes down to mastering the subtle art of dashes, hyphens, and minus signs.

What Are En Dashes and Em Dashes?

Understanding these punctuation marks begins with their names. Both derive from typography's historical roots, where type was measured in units relative to the width of specific letters.

The Name Game: Width Matters

The em dash gets its name from being approximately the width of a capital letter "M" in any given typeface. Similarly, the en dash measures roughly the width of a capital letter "N". This historical measurement system gave us the terminology we still use today, even as digital typography has evolved far beyond metal type.

Visual Differences

When rendered in a standard typeface, these marks look distinct:

  • Hyphen (-): The shortest mark, typically about one-third the height of an em dash
  • En dash (-): Medium length, approximately half the width of an em dash
  • Em dash (--): The longest mark, giving its name to the concept of an "em" unit in typography

Historical Context

Dashes have a rich history in written communication. Early manuscripts used various marks to indicate pauses or breaks in text. The first printing presses in the 15th century began standardizing punctuation, and by the 18th century, dash usage became more codified. The 19th century saw further refinement of typographic standards that inform our modern conventions.

For web content creators and developers, understanding these distinctions is essential for producing professional, polished material. Proper dash usage signals attention to detail and respect for readers, while incorrect usage can undermine credibility. Our content strategy services help ensure every piece of content reflects these professional standards.

When to Use Em Dashes

Em dashes are the most assertive member of the dash family, serving multiple grammatical functions that add emphasis and clarity to your writing.

Setting Off Parenthetical Information

Em dashes effectively replace commas, parentheses, or colons when you want to add emphasis to the interrupting material. Unlike parentheses, which gently introduce aside remarks, em dashes draw attention to the enclosed content.

Examples:

  • After excelling in challenging courses--physics, organic chemistry, and physiology--Lee decided to pursue medicine.
  • The results were surprising--every single test case passed.

Indicating Sudden Breaks or Changes in Thought

Em dashes can signal an abrupt interruption, a change in direction, or a dramatic pause that builds anticipation.

Examples:

  • Most experts predicted a rebuilding year for the team, but Coach Smith--she knew otherwise.
  • I was about to say something--wait, did you hear that?

Proper Spacing for Em Dashes

Spacing conventions vary significantly between style guides:

  • Chicago Manual of Style: No spaces around em dashes (preferred)
  • Associated Press Stylebook: Spaces before and after em dashes
  • British conventions: Often use spaces around em dashes

For web content and technical documentation, the Microsoft Style Guide recommends no spaces around em dashes for consistency and cleaner appearance.

When to Use En Dashes

En dashes serve more functional purposes than their dramatic em cousins, primarily handling ranges and connections between elements.

Ranges of Numbers and Dates

The en dash's most common use is to indicate ranges, replacing phrases like "through" or "and" between numbers or dates.

Examples:

  • The conference runs June 15-18, 2025.
  • Pages 45-67 contain the relevant data.
  • Business hours are 9 a.m.-5 p.m.
  • The company operated from 2010-2022.

Sports Scores and Vote Tabulations

En dashes connect opposing teams in scores and separate figures in vote counts.

Examples:

  • The final score was 3-1.
  • The measure passed 120-85.

Compound Adjectives with Open Compounds

When one element of a compound adjective is already an open compound (two words with a space), use an en dash instead of a hyphen.

Examples:

  • New York-London flight
  • post-Cold War era
  • pre-World War II architecture
  • Twin Cities-based company

According to the University of Minnesota's writing guide, this convention prevents visual confusion and maintains readability. These typographic details matter significantly for technical writing services where precision is paramount.

Dash Types Comparison
CharacterSymbolWidthPrimary Uses
Hyphen-ShortestCompound modifiers, prefixes, word division
En dash-MediumRanges, scores, compound adjectives with open compounds
Em dash--LongestEmphasis, breaks in thought, parenthetical asides
Minus signVariableSubtraction, negative numbers

Keyboard Shortcuts for Typing Dashes

One reason hyphens are so commonly misused is that they're immediately accessible on any keyboard. Dashes require special key combinations or software configuration.

Windows

  • En dash: Alt + 0150 (numeric keypad required)
  • Em dash: Alt + 0151 (numeric keypad required)
  • Hyphen: Standard keyboard key

macOS

  • En dash: Option + Hyphen (-)
  • Em dash: Shift + Option + Hyphen (-)
  • Hyphen: Standard keyboard key

HTML and Unicode

For web content, use these character entities:

CharacterHTML EntityUnicode
En dash– or –U+2013
Em dash— or —U+2014
Minus sign− or −U+2212

Most modern content management systems and word processors can be configured to auto-convert double hyphens (--) to em dashes. Configuring your tools for seamless dash entry saves time and ensures consistency. Our web development services team can help configure your CMS for proper typographic rendering across all your digital content.

Style Guide Variations

Major style guides have different preferences, so consistency within your organization matters more than universal correctness.

Chicago Manual of Style (CMOS)

  • Em dashes: No spaces, unspaced
  • En dashes: For ranges, scores, connections
  • Hyphens: Standard compound modifier rules

Associated Press Stylebook (AP)

  • Em dashes: Spaced on both sides (-- like this --)
  • En dashes: For sports scores and vote counts; use hyphens for ranges
  • Generally more minimalist punctuation approach

Economist Style

  • En dashes: Spaced for parenthetical remarks, unspaced for ranges
  • Em dashes: Avoids them, prefers en dashes with spaces
  • Distinctive approach favoring consistency

Web Content Considerations

For web content, the Microsoft Style Guide recommends:

  • No spaces around em dashes
  • Unspaced en dashes for ranges
  • Clear distinction between dashes and minus signs
  • HTML entities or proper Unicode characters

As noted in comparisons of major style guides, organizations should document their chosen conventions in a brand style guide and apply them consistently.

Frequently Asked Questions

Can I just use hyphens instead of en dashes?

While hyphens will often "work" visually, using the correct en dash shows attention to detail and follows typographic conventions. In ranges, en dashes clearly indicate "up to and including" which a hyphen doesn't convey.

Should I use spaces around em dashes?

This depends on your style guide. Chicago Manual of Style recommends no spaces, while AP Stylebook recommends spaces. Pick one style and apply it consistently throughout your content.

What's the difference between an en dash and a minus sign?

En dashes indicate ranges and connections. Minus signs represent subtraction and negative numbers. For accessibility, these should never be substituted for each other.

How do I type these dashes on my keyboard?

On Windows: Alt+0150 (en), Alt+0151 (em). On macOS: Option+Hyphen (en), Shift+Option+Hyphen (em). Configure auto-correction for seamless typing.

Do I need to worry about this in HTML content?

Yes! Use proper HTML entities (–, —, −) or Unicode characters to ensure dashes render correctly across all browsers and devices.

How do I remember which dash to use?

Think functionally: em dashes EMPHASIZE, en dashes NAVIGATE ranges and connections, hyphens HYPHENATE words together.

Elevate Your Web Content with Professional Typography

Every detail matters when crafting professional digital experiences. From proper punctuation to pixel-perfect design, attention to the small things sets exceptional content apart.

Sources

  1. Microsoft Learn Style Guide: Em dashes, en dashes, hyphens, and minus signs - Comprehensive official guidelines on proper usage of all dash types with clear examples and accessibility considerations.

  2. Wikipedia: Dash - Extensive historical and typographic reference covering figure dash, en dash, em dash, horizontal bar, and swung dash with Unicode character information.

  3. LinkedIn: En Dash? Em Dash? - Practical overview of major style guide differences including AP Stylebook, Chicago Manual of Style, and Economist guidelines.

  4. University of Minnesota: The Ins and Outs of Em Dashes and En Dashes - Academic communication guide with practical examples for en dash usage in ranges and compound adjectives.