Microtypography: The Punctuation Details That Signal Craft

Microtypography is the layer of decisions too small to notice individually and impossible to miss in aggregate. Readers do not consciously register a correct em dash or a curly apostrophe, but they reliably perceive text that gets these things right as more credible and more professionally produced. The whole layer takes an afternoon to learn and then costs nothing to apply forever.

Three Dashes, Three Jobs

The hyphen joins words and breaks them across lines: well-set, twenty-one. The en dash, roughly the width of a lowercase n, marks ranges and relationships: pages 45–75, the London–Paris route, a 2020–2024 term. The em dash, roughly the width of a capital M, sets off a parenthetical break in a sentence — like this one. Using a hyphen where a range needs an en dash is the single most common punctuation error in otherwise careful web copy.

Style guides disagree about whether the em dash takes surrounding spaces. Most American guides close it up; most British guides and many European ones use a spaced en dash for the same job. Either is defensible. Mixing both within one document is not, and it is exactly the kind of inconsistency that accumulates when several people write in the same codebase without a documented rule.

Quotation Marks Versus Inch Marks

The straight marks on your keyboard are not quotation marks. They are the prime and double prime, historically used for feet and inches, minutes and seconds, and they exist on the keyboard because typewriters had limited keys. Correct typographic quotes are directional: opening and closing single quotes, opening and closing double quotes, drawn as distinct glyphs that curl toward the text they enclose.

The apostrophe deserves particular attention because it is the case people get wrong even after switching to smart quotes. An apostrophe is always the closing single quote — the same glyph in don't, it's, and '90s. Automatic smart-quote conversion routinely renders a leading apostrophe as an opening quote, so a decade written as '90s comes out reversed. Check any string that begins with an apostrophe by hand.

Straight quotes are not a style choice. They are a typewriter limitation that outlived the typewriter.

Ellipses and the Spaces You Cannot See

An ellipsis is a single character, not three periods. The dedicated glyph carries built-in spacing designed by the type designer and, importantly, will not break across a line the way three separate periods can. Three periods typed manually may end up with two on one line and one on the next, which looks like a defect because it is one.

The invisible characters matter as much as the visible ones. A non-breaking space glues two words together so the browser cannot separate them at a line end — essential between a number and its unit, between a name and an initial, and before a lone short word that would otherwise be stranded. A thin space gives fine control where a full space is too much, such as inside nested quotation marks. Using these deliberately is what prevents the small awkward breaks that make a layout feel unfinished.

Widows, Orphans, and the Lonely Last Word

A single word alone on the final line of a paragraph is a widow, and in a headline it is the most visible microtypographic failure on a page because the eye goes to the headline first. Nothing in CSS removes widows automatically. The reliable fix is a non-breaking space between the last two words of the heading, which forces them to wrap together. It is a manual intervention, and it is worth doing for every headline that ships.

The related properties are worth knowing even though they help less than their names suggest. The orphans and widows properties in CSS apply to fragmentation contexts — printing and multi-column layouts — not to ordinary paragraph wrapping, so they will not solve a headline problem on a normal web page. And text-wrap: pretty and text-wrap: balance now offer real help for short blocks of text in current browsers, which makes them a good progressive enhancement for headings.

Hyphenation and Justification

Justified text on the web needs hyphens: auto to be tolerable. Without hyphenation the browser can only stretch word spaces to fill each line, which on a narrow measure produces the rivers of white space that make justified web text look amateurish. With hyphenation enabled the browser has a second lever and the grey value evens out considerably. Set the lang attribute correctly, because hyphenation dictionaries are language-specific and the wrong language produces wrong breaks.

For unjustified text, hyphenation is optional and often unwanted — a ragged right edge is fine and a stack of hyphens at the line ends is not. One case where it becomes necessary regardless of alignment is narrow columns containing long unbreakable strings such as URLs or technical identifiers, where overflow-wrap: break-word is the blunter but sometimes required companion.

Making It Stick

• Document one dash convention and one quote convention in your style guide, then enforce them in review.
• Configure your CMS or editor to convert straight quotes on input rather than relying on writers.
• Add a non-breaking space to every shipped headline that ends in a short word.
• Set the lang attribute on the html element — hyphenation and language-aware quotes both depend on it.
• Proof at the narrowest breakpoint, where bad breaks surface first.

None of these details will be praised. That is the nature of the layer: correct microtypography is invisible and incorrect microtypography reads as carelessness the reader cannot quite name. If you are already using the Text Alignment Simulator to test justified settings or the Paragraph Indentation Tool to work out an editorial style, paste real copy with real punctuation into them rather than placeholder text. The problems you are trying to catch only appear in real sentences.