Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

content@Ibelick

Use text-balance and text-pretty

MUST

MUST: Use text-balance for headings (prevents orphans) and text-pretty for body paragraphs (optimizes line breaks). Improves readability without manual tweaking.

Use text-balance for headings and text-pretty for body text to improve readability

Bad

Good

Why it matters

From the Typography constraints in ibelick's baseline-ui skill. text-balance evens out line lengths in headings; text-pretty prevents orphans (a single word stranded on the last line) in paragraphs. Both improve readability without hand-managed line breaks. DIRECT CONFLICT, deliberately kept: jakubkrehel's better-typography draws the scope line tighter. It agrees on `balance` for headings, but scopes `pretty` to *descriptions* — short blocks, a card subtitle, a meta line — and rules both out of long-form prose: "Skip both in long-form text: browsers ignore `balance` past a few lines anyway, and evening out a whole paragraph wastes space and makes it harder to read."

Both positions stand, and the axis is the length of the block. On a two-line heading or a one-sentence description, the browser has few enough lines that rebalancing them is cheap and the orphan is glaring. On an article paragraph, `balance` is a no-op the engine declines to run past a handful of lines, and `pretty` buys an orphan fix by pulling text up from earlier lines, which loosens the whole rag.

Take ibelick's rule as the default for UI text, which is nearly all of it, and take jakubkrehel's exception the moment the block is genuinely long-form.

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.