본문에 준 줄간격이 제목에서 붙어버린 이유

문제 발생

본문 컨테이너에 줄간격을 주었는데, 그 안의 제목만 줄이 서로 붙어 보였습니다.

.prose { font-size: 15px; line-height: 1.7em; }
.prose h2 { font-size: 30px; }        /* 줄이 겹친다 */

em을 떼고 1.7로만 바꾸자 정상이 됐습니다.

원인 분석

상속되는 값이 다릅니다. MDN이 두 경우를 구분해 설명합니다.

단위 없는 숫자 — 그 숫자 자체가 상속되고, 각 자식 요소가 자신의 글자 크기를 기준으로 줄 높이를 다시 계산합니다. 그래서 글자 크기가 다른 요소들이 저마다 비례한 줄간격을 갖습니다.

length·percentage 값 — 계산된 값이 상속됩니다. 자식은 비율이 아니라 이미 픽셀로 확정된 값을 물려받습니다.

우리 경우가 두 번째입니다. .prose에서 1.7em은 15px × 1.7 = 25.5px로 계산되고, h2는 글자 크기가 30px인데도 25.5px 줄 높이를 물려받습니다. 글자보다 줄 높이가 작으니 겹쳐 보입니다.

MDN이 드는 예도 같은 구조입니다 — 부모 15px에 1.1em을 주면 자식 h1의 줄 높이가 16.5px가 되어 "의도한 결과가 아닐 가능성이 높다"고 적습니다.

해결 방안

1. 본문 줄간격은 단위 없는 숫자로 줍니다.

.prose { line-height: 1.7; }

2. 접근성 하한을 지킵니다. MDN이 인용하는 WCAG 이해 문서의 권고는 본문 문단의 line-height에 최소 1.5를 쓰라는 것입니다 — 저시력, 난독증 등에서 읽기가 실제로 쉬워집니다.

3. 개별 요소는 그 요소에서 조정합니다. 큰 제목은 1.2처럼 더 촘촘한 값이 어울립니다. 상속에 기대지 말고 제목 규칙에 직접 씁니다.

4. 디자인 토큰으로 관리합니다. --line-height-body: 1.7 같은 값을 정해두면 페이지마다 다른 숫자가 흩어지지 않습니다.

5. em 값이 필요한 경우도 있습니다. 배지나 버튼처럼 높이를 고정하고 싶은 작은 컴포넌트에서는 계산된 값 상속이 오히려 편합니다 — 다만 그 안에 글자 크기가 다른 자식을 두지 않는다는 전제가 필요합니다.

6. 확대 상태에서 확인합니다. 브라우저 확대(200%)에서 줄이 겹치거나 잘리는지 보면, 이 종류의 문제가 바로 드러납니다.

공식 문서

• MDN: line-height
• W3C: Understanding SC 1.4.12 Text Spacing