Fixing Typographic Orphans on Mobile with Tailwind
- #web
- #typography
Two typographic orphans I couldn’t ship.
I’d expanded the NOW section - added “on product, data, and AI” after the notes link, “by Blask” after Signal & Noise. Desktop looked right:
On a 375px iPhone SE viewport - the narrowest you’d realistically encounter - those trailing words wrapped and sat alone on the next line:
“and AI.” alone. “Blask.” alone.
Hot metal typesetters named both conditions: a widow is the last line of a paragraph stranded alone at the top of a new column; an orphan is the opening line left at the bottom, cut off from the paragraph that follows. Shop slang, emotionally loaded by design. Typesetters adjusted spacing and tracking by hand until every paragraph broke cleanly - considered a basic mark of craft. The problem survived into desktop publishing; InDesign has a widow/orphan control buried in paragraph styles that most people never touch.
The very short final line of a paragraph composed of a single word (highlighted blue) is a runt. The first line of a paragraph beginning at the end of a page (highlighted green) is called an orphan (sometimes called a widow). The last line of a paragraph continuing on to a new page (highlighted yellow) is a widow (sometimes called an orphan).
The fix here: <span class="hidden sm:inline"> around the trailing words. Mobile: span disappears, line ends clean. From 640px up: full text.
<li>— Writing occasional <a href="/posts">notes</a><span class="hidden sm:inline"> on product, data, and AI</span>.</li>The question is which words survive 390px. “notes” - yes. “on product, data, and AI” - context. Same for “by Blask”: the show name carries the link; attribution waits.
No media query. One Tailwind utility pair. Nobody inherits the typesetter’s job on the web.