# Use text-balance and text-pretty

**MUST** · **ID:** `content-ibelick-text-balance` · **Category:** content
**Source:** [@Ibelick](https://www.ui-skills.com/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-ibelick-text-balance

> 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

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.

## Bad — do not do this

`content-ibelick-text-balance-bad`

```tsx
export function IbelickTextBalanceBad() {
  return (
    <div className="space-y-4">
      <div className="max-w-xs">
        <h2 className="text-xl font-bold">
          This is a heading that wraps awkwardly
        </h2>
        <p className="text-sm text-muted-foreground mt-2">
          This paragraph of text might end up with a single word on the last line which looks
          odd.
        </p>
      </div>
      <p className="text-xs text-destructive">
        No text-wrap control - awkward line breaks and orphans
      </p>
    </div>
  );
}
```

## Good — do this

`content-ibelick-text-balance-good`

```tsx
export function IbelickTextBalanceGood() {
  return (
    <div className="space-y-4">
      <div className="max-w-xs">
        <h2 className="text-xl font-bold text-balance">
          This is a heading that wraps awkwardly
        </h2>
        <p className="text-sm text-muted-foreground mt-2 text-pretty">
          This paragraph of text might end up with a single word on the last line which looks
          odd.
        </p>
      </div>
      <p className="text-xs text-success">
        text-balance on heading, text-pretty on paragraph - clean line breaks
      </p>
    </div>
  );
}
```

## References

- [baseline-ui (skill source)](https://github.com/ibelick/ui-skills/blob/main/skills/baseline-ui/SKILL.md)
- [jakubkrehel — wrapping-and-punctuation.md (the counter-position)](https://raw.githubusercontent.com/jakubkrehel/skills/main/skills/better-typography/wrapping-and-punctuation.md)
- [CSS text-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-wrap)