디자인 아틀라스
EN
Aa 타이포그래피

위도우와 오펀

Widows and orphans

문단의 마지막 줄에 짧은 단어 하나만 덩그러니 남는 "위도우", 문단 첫 줄이 단 하나만 다음 컬럼에 떨어지는 "오펀". 둘 다 편집 디자인의 오랜 금기입니다.

다른 이름: 과부와 고아 줄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}}

인쇄 편집자들은 오래전부터 수작업으로 이런 "외로운 줄"을 피해왔습니다 — 문단이 시각적으로 불균형해 보이고, 짧은 단어 하나가 줄 전체 폭을 낭비하기 때문입니다.

웹에서는 최근 CSS `text-wrap: pretty`(Chromium)가 문단 전체의 줄바꿈을 다시 계산해서 위도우를 자동으로 줄여줍니다. 기본값 `text-wrap: normal`은 오직 한 줄씩 그리디(greedy)하게 채우기 때문에 마지막 줄에 뭐가 남을지 신경 쓰지 않습니다.

제목 전용으로는 `text-wrap: balance`(뒤 항목 참고)를, 본문 문단에는 `text-wrap: pretty`를 씁니다. 두 값 모두 계산 비용 때문에 짧은 텍스트에만 적용하도록 브라우저가 자체 상한을 두고 있습니다.

언제 쓰나

좁은 컬럼의 본문 문단, 카드 설명, 캡션처럼 줄바꿈이 어색해 보이면 눈에 띄는 곳에 `text-wrap: pretty`를 시도하세요.