Punctuation & special characters

Open any website. Look at the quotation marks. If they're straight, the developer didn't care about typography. Every fix here takes seconds. ## Smart quotes vs. straight quotes Your keyboard's `"` key produces a straight quote, inherited from typewriters. Correct quotation marks are _curly_, with distinct opening and closing forms. Use the Unicode characters directly: `“` for left double, `”` for right double, `‘` for left single, `’` for right single and apostrophes. Most MDX pipelines handle this automatically. Verify. ## Em dash, en dash, and hyphen Three marks that look similar. Different jobs. - **Hyphen** (`-`): Joins compound words. "High-quality," "re-enter." No spaces. - **En dash** (`–`): Indicates ranges. "2020–2024," "pages 12–36." No spaces in ranges. - **Em dash** (`—`): Sets off parenthetical clauses or introduces a sharp break. The width of a capital M. Two house styles: the _unspaced em dash_ (American) and the _spaced en dash_ (Bringhurst, British). Choose one. Be consistent. Developers type a hyphen or `--` where an em dash belongs. Use `—` (U+2014) directly. ## Primes vs. quotes - **Prime** (′): feet, arcminutes. - **Double prime** (″): inches, arcseconds. A 50″ television is correct. A 50” television uses a straight quote. A 50” television uses a closing smart quote. Both are wrong. CMS auto-quote conversion swaps blindly, so prime-as-quote is a bug you catch by hand. ## Midpoints and ampersands The **midpoint** (·) is an underused separator for horizontal lists. _Home · About · Contact_ reads cleaner than _Home | About | Contact_. Pad midpoints with hair spaces or thin spaces. The **ampersand** (&) is a logogram for _et_. Use in proper names (_Johnson & Johnson_), pair forms (_Mr & Mrs_), and shorthand (_R&B_, _Q&A_). In prose, write _and_. ## Non-breaking spaces A non-breaking space (` `) prevents a line break between two words. - **Units and values**: "100 kg" should never break across lines. - **Last two words of a headline** to prevent a widow: "Web Typography." - **Copyright symbol and year**: "© 2026." - **Keyboard shortcuts**: "Cmd + K." Use sparingly. Too many defeat the browser's line-breaking algorithm. ## Ellipsis The **ellipsis** (…) is a single character (U+2026), not three periods. Three periods produce uneven spacing and can break across lines. Use for omissions ("Wait for it…") and in UI to signal that an action needs more input ("Save As…", "Print…"). ## Multiplication sign and fractions Dimensions use the **multiplication sign** (×, U+00D7), not a lowercase `x`. "1920×1080" is correct. At display size the difference is obvious. Unicode provides proper fraction characters: ½, ¼, ¾. "1½ cups" reads better than "1-1/2 cups."