Punctuation & Special Characters
12 minPunctuation & Special Characters
The fastest way to spot an amateur interface is to look at the quotation marks. If they are straight — the kind your keyboard types by default — the developer did not care about typography. That single tell reveals more about craft standards than any amount of animation polish or color system sophistication.
Punctuation is the lowest-effort, highest-signal typography improvement you can make. Every fix in this lesson takes seconds to implement and zero design skill to execute. And yet most production interfaces ship with straight quotes, hyphens where em dashes belong, and foot/inch marks masquerading as apostrophes.
Smart quotes vs. straight quotes
Your keyboard's " key produces a straight (or "dumb") quote: a vertical, undifferentiated mark inherited from typewriters. Typographically correct quotation marks are curly — they have distinct opening and closing forms that visually bracket the quoted text.
"Hello World" — straight quotes
It's a beautiful day — straight apostrophe
"Hello World" — smart quotes
It's a beautiful day — curly apostrophe
The same applies to single quotes and apostrophes. The straight apostrophe (') should be a curly apostrophe ('). The difference is subtle in body text and glaring in headlines. The single closing quote ' doubles as the apostrophe, making apostrophes the most common offender. A site set in smart quotes elsewhere can still betray itself with a single straight apostrophe in a contraction.
In code, use the actual Unicode characters: " (U+201C) for left double, " (U+201D) for right double, ' (U+2018) for left single, and ' (U+2019) for right single and apostrophes. Most MDX pipelines and CMS platforms will handle this automatically if configured correctly — but verify. Never assume.
Em dash, en dash, and hyphen
These three marks look similar and serve entirely different purposes. Confusing them is one of the most common typographic errors on the web.
- Hyphen (
-): Joins compound words. "High-quality," "re-enter," "self-aware." One character, no spaces. - En dash (
–): Indicates ranges. "2020–2024," "pages 12–36," "New York–London." Slightly wider than a hyphen. No spaces in ranges. - Em dash (
—): Sets off parenthetical clauses — like this one — or introduces a sharp break in thought. The width of a capital M in the current typeface.
There are two house styles for em dashes, and the choice matters less than consistency. The unspaced em dash is standard in most American style guides. The spaced en dash is preferred by Robert Bringhurst and most British typographers, who consider the em dash too wide for fine text. If the em dash in your chosen typeface looks ungainly, switch to spaced en dashes for that project.
The em dash is particularly important because developers almost universally replace it with a hyphen or a double-hyphen (--). Neither is correct. Use — (U+2014) directly.
Primes vs. quotes
When you write measurements — 5′ 10″ for five feet ten inches — the correct marks are primes, not quotation marks and not straight quotes.
- Prime (′): A slightly slanted mark used for feet, arcminutes, and similar units.
- Double prime (″): Used for inches, arcseconds, and similar.
A 50″ television is correct. A 50" television uses a straight quote. A 50" television uses a closing smart quote. Both substitutions are wrong, though the straight quote is at least conventional enough that most readers will not flinch.
In practice, primes appear most often in product specs, sizing information, and coordinate displays. If your interface shows measurements, use real primes. Most CMS auto-quote conversion will not produce primes — it swaps straight quotes to smart quotes blindly, so prime-as-quote is a bug you will have to catch by hand.
Midpoints and ampersands
The midpoint (·) is an underused alternative to vertical bars and bullets for separating items in a horizontal list. Home · About · Contact reads cleaner than Home | About | Contact: the bar looks too much like an uppercase I, and a normal bullet is too heavy. Pad midpoints with hair spaces or thin spaces — regular word spaces are too wide and make the dot float.
The ampersand (&) is a logogram for et — the Latin word for and. Use it in proper names (Johnson & Johnson), pair forms (Mr & Mrs), and set shorthand expressions (R&B, Q&A). In ordinary prose, write and. Italic ampersands are often more ornate than their roman counterparts — pulling the italic ampersand into an otherwise-roman headline is a long-standing typographic move.
Non-breaking spaces
A non-breaking space ( or U+00A0) prevents a line break between two words. Use them deliberately in specific situations:
- Units and values: "100 kg" should never break across lines. The number and its unit are a single semantic chunk.
- Between the last two words of a headline to prevent a widow: "Getting Started with Web Typography."
- Copyright symbol and year: "© 2026."
- Keyboard shortcuts: "Cmd + K."
Use non-breaking spaces sparingly. Sprinkling through every paragraph defeats the browser's line-breaking algorithm and produces worse layouts on narrow screens.
The audit
Once you have internalized these distinctions, you will start seeing violations everywhere — in your own codebase, in the products you use daily, in billion-dollar apps that somehow shipped with straight quotes in their marketing headlines. That is the point. You cannot fix what you cannot see, and after this lesson, you will not be able to unsee it.
Run a search across your codebase for straight quotes in user-facing strings. Replace them. It will take fifteen minutes and the result will be permanent.
"It's the 21st century -- why are we still using straight quotes?" The store is open 9-5, and the screen measures 27". He said, 'I'll be there in 5'. The flight from New York-London takes 7-8 hours. She lived 1990--2024, and her impact was immeasurable.
“It’s the 21st century — why are we still using straight quotes?” The store is open 9–5, and the screen measures 27″. He said, ‘I’ll be there in 5′. The flight from New York-London takes 7–8 hours. She lived 1990—2024, and her impact was immeasurable.