typographic-rag-tunerlisted

# Typographic Rag Tuner A headline that wraps to two full lines and then one lonely "growth." on a third reads as broken, even though every word is right. A paragraph whose last line is a single "it." looks unfinished. A block whose right edge zig-zags between 30 and 62 characters has a jagged silhouette that tires the eye before it's read anything. Print typographers fix these by hand; the browser now has two algorithms that do most of it, if they're switched on. Treat every text block as a shape, not a stream, and set the wrapping rules that keep the shape clean. ## The two rules **Headings balance.** `text-wrap: balance` tells the engine to distribute the words so lines are as even as possible — a two-line heading becomes 50/50 instead of 90/10, and the dangling last word disappears. It belongs on anything short and prominent: H1–H4, pull quotes, card titles, hero statements, blurbs under five lines. It stops working past ~6 lines and costs layout time, so it must not go on paragraphs. **Paragraphs go pretty.** `text-wrap: pretty` looks ahead a few lines and adjusts earlier breaks to avoid an orphan on the final line, and tidies the rag. It belongs on `p`, `li`, `blockquote`, `figcaption`, `dd` — anything multi-line and read continuously. It's cheap enough for whole documents. ```css @layer base { h1, h2, h3, h4, .editorial-title { text-wrap: balance; } h1, h2 { letter-spacing: -0.02em; } /* display sizes set tighter; loose tracking exaggerates gaps */ h3, h4