The three types of dash

CSS Wizardry

Front-End’s Missing Metric: The TBT Window Meet Your Users Where They Are with Obs.js Better Browser Caching with No-Vary-Search font-family Doesn’t Fall Back the Way You Think What Is CSS Containment and How Can I Use It? When All You Can Do Is All or Nothing, Do Nothing Obs.js: Context-Aware Web Performance for Everyone Low- and Mid-Tier Mobile for the Real World (2025) The Fastest Site in the Tour de France Making Sense of the Performance Extensibility API Why Do We Have a Cache-Control Request Header? HTML Is Not a Programming Language… Build for the Web, Build on the Web, Build with the Web Licensing Code on CSS Wizardry A Layered Approach to Speculation Rules Designing (and Evolving) a New Web Performance Score Core Web Vitals Colours The Ultimate Contract Templates for Tech Consultants: Protect Your Business and Get Paid Optimising for High Latency Environments Cache Grab: How Much Are You Leaving on the Table? blocking=render: Why would you do that?! Correctly Configure (Pre) Connections The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache What Is the Maximum max-age? How to Clear Cache and Cookies on a Customer’s Device The Ultimate Low-Quality Image Placeholder Technique Core Web Vitals for Search Engine Optimisation: What Do We Need to Know? The HTTP/1-liness of HTTP/2 In Defence of DOMContentLoaded Site-Speed Topography Remapped Why Not document.write()? Speeding Up Async Snippets Critical CSS? Not So Fast! Measure What You Impact, Not What You Influence Optimising Largest Contentful Paint Measuring Web Performance in Mobile Safari Site-Speed Topography Speed Up Google Fonts Real-World Effectiveness of Brotli Performance Budgets, Pragmatically Lazy Pre-Browsing with Prefetch Making Cloud.typography Fast(er) Time to First Byte: What It Is and How to Improve It Self-Host Your Static Assets Tips for Technical Interviews Cache-Control for Civilians Bandwidth or Latency: When to Optimise for Which ITCSS × Skillshare What If? CSS and Network Performance The Three Types of Performance Testing Getting to Know a Legacy Codebase Image Inconsistencies: How and When Browsers Download Images Identifying, Auditing, and Discussing Third Parties My Digital Music Setup Measuring the Hard-to-Measure Finding Dead CSS The Fallacies of Distributed Computing (Applied to Front-End Performance) Ten Years Old Relative Requirements Airplanes and Ashtrays Performance and Resilience: Stress-Testing Third Parties Refactoring Tunnels Little Things I Like to Do with Git Writing Tidy Code Configuring Git and Vim Base64 Encoding & Performance, Part 2: Gathering Data Base64 Encoding & Performance, Part 1: What’s Up with Base64? Code Smells in CSS Revisited Typography for Developers Moving CSS Wizardry onto HTTPS and HTTP/2 Ack for CSS Developers A New Year, a New Focus Preparing Vim for Apple’s Touch Bar Choosing the Correct Average CSS Shorthand Syntax Considered an Anti-Pattern CSS Wizardry Newsletter Nesting Your BEM? Improving Perceived Performance with Multiple Background Images Continue Normalising Your CSS Pure CSS Content Filter Pragmatic, Practical, and Progressive Theming with Custom Properties Refactoring CSS: The Three I’s Speaker’s Checklist: Before and After Your Talk Improving Your CSS with Parker The Importance of !important: Forcing Immutability in CSS Mixins Better for Performance Managing Typography on Large Apps White October Events Workshop Partnership BEMIT: Taking the BEM Naming Convention a Step Further Travelling Like You Want to, When You Have To Contextual Styling: UI Components, Nesting, and Implementation Detail Subtleties with Self-Chained Classes Cyclomatic Complexity: Logic in CSS Immutable CSS Can CSS Be Too Modular? More Transparent UI Code with Namespaces When to use @extend; when to use a mixin The Specificity Graph CSS Wizardry Ltd.: Year 1 in review

Harry Roberts · 2010-01-31 · via CSS Wizardry

30 January, 2010

Written by on CSS Wizardry.

Table of Contents

Independent writing is brought to you via my wonderful Supporters.

The em dash —
1. Proper em dashes:
2. Improper hyphens:
3. Spaces around em dashes
The en dash –
The hyphen
1. The minus
More reading

Unbeknown to many, there are ~~three main~~ many types of dash, and one of the most common typographical mistakes is to use the wrong dash for the wrong job. There are actually ~~three~~ several different types of dash and each have their own uses. The ‘dash’ you see on your keyboard is actually a hyphen which is used as a ‘catch all’ glyph which is used for several purposes. The only reason for this is that there’s just not enough room on a keyboard for so many different dashes.

The em dash —

The em dash (—)–so named because it is the width of a capital ‘M’—is used to delimit a separate clause in a sentence—rather like this—or similar sub-clause structures. Often used in its place however is the hyphen (-). Looking at the two side by side the difference is quite clear:

Proper em dashes:

The em dash (–), or m dash, m-rule, etc., often demarcates a parenthetical thought–like this one–or some similar interpolation.

Improper hyphens:

The em dash (—), or m dash, m-rule, etc., often demarcates a parenthetical thought - like this one - or some similar interpolation.

Spaces around em dashes

The proper setting of em dashes seems somewhat unclear. The ideal way to set them is with hair spaces ( ) either side — like this. However, IE6 doesn’t support the hair space leaving the options of either fully spaced — like this, or unspaced—like this.

			Various means of spacing em dashes

					Fully Spaced
					Hair Spaced
					Un Spaced

						This -- is an em -- dash.

						This -- is an em -- dash.

						This--is an em--dash.

The en dash –

The en dash (–)–so named because it is half the width of a capital ‘M’ (an ‘n’)–has altogether different uses to the em dash. The en dash is used in ranges, for example:

6–10 years
July 10–August 1 2009
pp. 40–42
§§ 12–13

Read more specific guidelines on Wikipedia.

The hyphen

The purpose of the hyphen (-) is to join two words–for example ‘front-end’–and to separate syllables when splitting a long word over two lines. As previously mentioned, the hyphen is often misused in place of both the above.

The minus

There is also a separate dash for the minus symbol. The proper entity for a minus symbol is simply −.