A graphic designer with print roots walks through six CSS typographic controls that bring professional typesetting to the web: fluid type scales with clamp(), balanced headings via text-wrap: balance, widow prevention with text-wrap: pretty, drop caps using initial-letter, optical sizing with font-optical-sizing: auto, and hanging punctuation. Each technique is explained with its print origins, practical CSS code, browser support caveats, and a progressive enhancement strategy. The piece emphasizes that all controls ship off by default and degrade gracefully, requiring no JavaScript.
Table of contents
The page remembers what the screen forgotSet the scale, not the sizesEven the rag: text-wrap: balanceFix the widow: text-wrap: prettyDrop the initial: initial-letterCut the glyph: font-optical-sizingFlush the edge: hanging-punctuationWhat I actually ship22.7K Impressions3 Comments