Design Atlas
한국어
Aa Typography

Widows and orphans

위도우와 오펀

A widow is a short lone word stranded on a paragraph's last line; an orphan is a paragraph's first line left isolated at the bottom of a column. Both are old taboos in editorial design.

Also known as: 과부와 고아 줄Widow/orphan control
···
html
<div class="stage">
  <div class="col">
    <div class="tag">text-wrap: normal</div>
    <p class="box normalwrap">디자인 시스템 문서를 작성할 때는 좋은 예시와 나쁜 예시를 나란히 두고 비교하는 것이 이해를 돕는다</p>
  </div>
  <div class="col">
    <div class="tag good">text-wrap: pretty</div>
    <p class="box prettywrap">디자인 시스템 문서를 작성할 때는 좋은 예시와 나쁜 예시를 나란히 두고 비교하는 것이 이해를 돕는다</p>
  </div>
</div>
css
.stage{display:flex;gap:22px;align-items:flex-start;justify-content:center;flex-wrap:wrap;width:100%;padding:0 8px}
.col{display:grid;gap:8px;max-width:220px}
.tag{font:10px ui-monospace,Menlo,monospace;color:var(--accent-2);letter-spacing:.02em}
.tag.good{color:var(--accent-3)}
.box{font-size:13px;line-height:1.6;font-family:-apple-system,system-ui,"Apple SD Gothic Neo",sans-serif;color:var(--fg);margin:0;
  border-left:3px solid var(--line);padding-left:10px;animation:resize 5s ease-in-out infinite}
.normalwrap{text-wrap:normal;border-left-color:var(--accent-2)}
.prettywrap{text-wrap:pretty;border-left-color:var(--accent-3)}
@keyframes resize{0%,100%{width:190px}50%{width:225px}}

Print editors have long fixed these "lonely lines" by hand — an unbalanced-looking paragraph, or a single short word wasting an entire line's width.

CSS `text-wrap: pretty` (Chromium) recently automated this by recomputing a whole paragraph's line breaks to reduce widows. The default, `text-wrap: normal`, wraps greedily one line at a time and never looks ahead to what's left on the last line.

Use `text-wrap: balance` (see the next entry) for headlines and `text-wrap: pretty` for body paragraphs. Both are capped by browsers to short text only, since the layout recalculation is relatively costly.

When to use

Try `text-wrap: pretty` on narrow-column body paragraphs, card descriptions, and captions — anywhere awkward line breaks are visible.