CSS line-height 하나 바꿨을 뿐인데 글이 훨씬 읽기 편해졌다

블로그를 새로 만들면서 본문 타이포그래피를 손봤다. 폰트를 바꾸고, 글자 크기를 키우고, 줄간격을 조정했는데 세 가지 중 체감 효과가 가장 큰 건 줄간격이었다.

기본값이 왜 부족한가

브라우저 기본 line-height는 보통 normal로 설정되는데, 이는 폰트에 따라 다르지만 대략 1.2 전후다. 제목처럼 한두 줄 텍스트에는 괜찮지만 본문 단락에 쓰면 줄이 촘촘하게 붙어 읽기 힘들어진다. 특히 한국어는 글자 자체에 상하 공간이 많이 필요해서 더 두드러진다.

/* 본문 기본 설정 */
body {
  font-size: 1rem;       /* 16px */
  line-height: 1.75;     /* 글자 크기의 1.75배 */
}

/* 긴 글 영역 */
.prose {
  line-height: 1.8;
  max-width: 68ch;       /* 한 줄에 들어오는 글자 수 제한 */
}

1.75 에서 1.8 사이가 한국어 본문에서 무난하다. 영문 본문은 1.6도 충분한 경우가 많지만, 한글은 자소 구조상 조금 더 여유가 필요하다.

단위를 단위 없는 숫자로 쓰는 이유

line-height: 28px 처럼 px로 고정하면 자식 요소가 폰트를 다른 크기로 상속받았을 때 줄간격 비율이 깨진다. 단위 없는 숫자(1.75)를 쓰면 요소의 계산된 font-size에 곱해진 값이 상속된다.

/* px 고정 — 자식 font-size가 달라도 line-height는 28px 그대로 */
.parent { font-size: 16px; line-height: 28px; }
.child  { font-size: 14px; } /* 줄간격이 상대적으로 더 커 보임 */

/* 단위 없음 — 자식도 자신의 font-size 기준으로 계산 */
.parent { font-size: 16px; line-height: 1.75; }
.child  { font-size: 14px; } /* 14 × 1.75 = 24.5px, 자연스럽게 유지됨 */

줄 길이와 함께 조정해야 효과가 있다

line-height를 아무리 높여도 한 줄이 너무 길면 읽다가 다음 줄을 찾기 어렵다. max-width를 ch 단위로 설정하면 폰트 크기가 바뀌어도 한 줄에 들어오는 글자 수가 유지된다. 보통 본문은 60~75ch 범위가 적당하다고 알려져 있다.

이 두 가지를 같이 조정하고 나서 긴 글을 처음부터 끝까지 읽어보면 차이가 바로 보인다. 글이 더 잘 읽힌다는 느낌은 대부분 줄간격과 줄 길이에서 온다.