한글 폰트 행간·자간, 역할과 매체별로 수치가 다 다르다

line-height: 1.6을 나눔고딕에 적용했을 때와 Pretendard에 적용했을 때, 결과가 같은가? 눈으로 보면 다르다. 같은 수치를 줬는데 왜 다를까 — 그 질문이 이 글의 출발점이다.

행간과 자간 수치는 역할·매체만큼이나 폰트 자체의 구조에 영향을 받는다. 어느 폰트는 정사각형 틀을 꽉 채우고, 어느 폰트는 획이 가늘고 여백이 남는다. 이 밀도 차이가 동일 수치에서 완전히 다른 시각 밀도를 만든다. 수치 표를 보기 전에 이 원리를 이해하지 않으면, 표를 외워도 새 폰트로 바꿀 때마다 처음부터 다시 시작하게 된다.

---

폰트 구조가 같은 수치를 다르게 만든다

한글 서체는 대부분 초성·중성·종성이 고정된 정방형(正方形) 틀 안에 조합된다. 1980년대 디지털 조판이 표준화된 이후 이 구조가 굳어졌는데, 이 틀 안에서 획을 얼마나 크게 채우는지가 서체마다 다르다.

획이 틀을 빡빡하게 채우는 서체(나눔고딕, 본고딕 계열)는 글자 자체가 시각적으로 크게 보인다. 같은 font-size: 16px라도 텍스트 덩어리가 더 무겁게 느껴지고, 행간을 조금만 좁혀도 줄이 답답해 보인다. 나눔고딕으로 본문을 잡아두고 line-height: 1.6을 적용해 보면 "조금 빽빽하다"는 인상이 드는데, 1.7이나 1.75로 올리면 훨씬 숨통이 트인다. 긴 글을 읽을 때 특히 차이가 도드라진다.

반면 획이 가늘고 여백을 남기는 서체(Pretendard, Noto Sans KR)는 동일 크기에서 시각적으로 좀 더 작고 가볍게 느껴지며, 행간 1.6과 1.7의 차이가 상대적으로 덜 도드라진다. Pretendard로 블로그 본문을 짜면 1.6에서도 충분히 읽힌다는 느낌을 받는 경우가 많다. KoPub 바탕체 같은 명조 계열은 조금 달라서, 세리프 획의 특성상 행간을 1.7~1.8로 넉넉히 주지 않으면 획 끝부분이 서로 가까워 보여 뭉쳐 보이는 느낌이 난다.

자간도 마찬가지다. 정방형 틀의 모든 글자는 같은 폭을 갖는다 — 영문처럼 글자 쌍별로 커닝(kerning) 값이 다르게 들어가지 않는다. 이 균일한 고정 폭이 기본 상태에서 자간을 시각적으로 넓게 느끼게 만드는 원인이다. 그래서 한글에서 -0.01em 전후의 음수 자간이 관행처럼 쓰인다. 영문 본문에서 자간을 음수로 조정하는 일이 드문 것과 대조적이다.

폰트를 바꿀 때마다 행간·자간을 재확인해야 한다는 게 규칙이지 예외가 아니다. 같은 line-height: 1.6을 줘도 나눔고딕은 답답하고 Pretendard는 여유 있어 보인다면, 수치가 틀린 게 아니라 폰트의 획 밀도가 다른 거다.

---

한글 자간이 음수여야 하는 구조적 이유

영문 알파벳은 글자마다 폭이 다르고, 폰트 제작 단계에서 글자 쌍별로 커닝 값이 세밀하게 설정된다. 대문자 'AV' 사이를 당기고 'II' 사이는 그대로 두는 식이다. 한글은 이 커닝이 없다. 정방형 구조상 모든 글자가 같은 폭이고, 자간이 글자 오른쪽 끝에 균일하게 붙는다.

letter-spacing: 0을 그대로 두면 글자 사이 여백이 다소 넓어 보이는 경향이 생긴다. -0.01em 정도로 좁히면 시각적으로 더 자연스럽게 밀착된다. 이 차이는 특히 굵은 폰트 웨이트(Bold, ExtraBold)에서 더 잘 드러난다. 굵은 글자는 획 면적 자체가 넓어지기 때문에, 글자 간 여백이 상대적으로 더 넓어 보이는 효과가 생겨서 -0.01em이 아니라 -0.02em이 더 자연스럽게 맞아 들어가는 경우도 있다.

단, 아주 작은 크기(12px 이하)에서 음수 자간을 유지하면 획이 붙어 보이는 역효과가 나니, 캡션·레이블에서는 자간을 0 또는 약간 양수로 되돌린다.

WCAG 1.4.12는 사용자가 자간을 0.12em 이상으로 늘렸을 때도 레이아웃이 깨지지 않아야 한다고 명시한다. 그래서 고정 px 단위보다 em 단위가 유지보수에 유리하다 — 사용자가 브라우저 폰트 크기를 키웠을 때 간격도 함께 스케일되기 때문이다.

---

WCAG 2.1 AA가 정한 하한선

W3C의 WCAG 2.1 SC 1.4.12(Text Spacing, Level AA)는 디자인 권장값이 아니다. 사용자가 이 수준으로 재정의해도 콘텐츠가 살아남아야 하는 하한선이다.

실제 디자인의 기본값은 이보다 크게 설정하는 게 일반적이다. 여기서 흔한 실수가 하나 있는데, 컨테이너에 고정 height를 지정하면 사용자가 간격을 늘렸을 때 텍스트가 잘려나간다. WCAG 준수 여부와 무관하게 유연한 레이아웃이 기본이다.

이 기준은 "이 수치면 충분하다"는 뜻이 아니라 "이 아래로 내려가면 접근성 위반"이라는 뜻이다. 디자인 목적의 권장값은 아래 표가 따로 제시한다.

---

텍스트 역할 × 매체별 권장 행간·자간 수치

아래 표는 WCAG 기준, 실무 디자인 관례, 편집 디자인 표준을 종합한 참고 권장값이다. 폰트마다 설계 비율이 달라 동일 수치에서도 시각적 결과가 다를 수 있으니, 출력 결과를 직접 보면서 미세 조정하는 게 원칙이다.

🖥 웹(CSS)

모바일은 기준이 조금 달라진다. 손에 쥐고 보는 거리는 짧지만, 좁은 화면에서 행간이 너무 크면 스크롤 피로가 쌓인다. OS별 단위 차이(Android의 sp, iOS의 pt)도 체크해야 한다.

모바일(Android sp / iOS pt)

인쇄는 또 다른 세계다. 화면과 달리 픽셀이 없고 단위도 pt 고정값으로 바뀐다. 행간을 배율 대신 pt 절대값으로 지정하는 경우가 많은 것도 이 때문이다.

인쇄(단위: pt)

---

인쇄 자간 단위, CSS em으로 환산하면

인쇄 표의 자간 수치는 웹 개발자에게 낯설게 보일 수 있다. 한컴 한글과 인디자인의 자간 단위는 폰트 크기의 1/1000(퍼밀, ‰)으로 표시된다. -50이면 폰트 크기의 5%를 좁힌다는 뜻이다.

CSS em 단위로 환산하면 이렇게 대응된다: 인쇄 본문의 -20~-40 ‰는 CSS 기준 -0.02em ~ -0.04em 수준이고, 대제목의 -50~-80 ‰는 -0.05em ~ -0.08em에 해당한다. 위 표의 웹 대제목 권장값(-0.02em ~ -0.03em)보다 인쇄 대제목이 더 좁게 조여지는 셈인데, 인쇄물은 300dpi 이상 고해상도에서 30~40cm 거리로 읽히기 때문에 획이 붙어 보이는 역효과가 훨씬 덜하다.

관람 거리와 해상도가 단위와 권장 범위의 차이로 이어지는 구조다. 인쇄물(30~40cm, 300dpi+), 모바일(25~35cm, 고밀도 픽셀), 데스크톱 모니터(60~90cm, 72~150dpi) — 이 세 조건이 다르기 때문에 매체별 범위가 갈라진다.

웹과 인쇄를 모두 다루는 디자이너라면, 자간 단위 변환 감각을 익혀두는 게 실무에서 꽤 유용하다. 인디자인에서 -30으로 잡던 감각을 CSS에서는 -0.03em으로 그대로 옮길 수 있다는 걸 알면 매체 전환 작업이 한결 수월해진다.

---

실전 CSS 출발점

아래는 웹 한글 본문의 실용적인 시작 코드다. 이 값을 고정 답이 아닌 출발점으로 쓰고, 선택한 폰트의 획 밀도에 따라 ±0.05~0.1 범위 내에서 조정한다.

/* 기본 본문 — 획 밀도 중간 수준 폰트(Pretendard, Noto Sans KR) 기준 */
body {
  font-size: 16px;
  line-height: 1.7;        /* 한글 본문 기본값 */
  letter-spacing: -0.01em; /* 한글 자간 약간 좁히기 */
}

h1, h2 {
  line-height: 1.25;
  letter-spacing: -0.02em;
}

figcaption, .caption {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

획이 빽빽한 서체(나눔고딕, 본고딕 계열)를 쓴다면 body의 line-height를 1.75~1.8로 한 단계 올리는 걸 출발점으로 삼는다. 반대로 Pretendard나 Noto Sans KR처럼 여백이 많은 서체는 1.65 정도에서도 충분히 읽히는 경우가 많다.

/* 획 밀도가 높은 서체(나눔고딕, 본고딕 계열) 보정 예시 */
body {
  font-size: 16px;
  line-height: 1.8;         /* 빽빽한 서체는 행간 여유 확보 */
  letter-spacing: -0.01em;
}

h1 {
  line-height: 1.2;
  letter-spacing: -0.03em;  /* 굵고 큰 글자일수록 자간을 더 당긴다 */
}

폰트를 고를 때 매체 적합성을 먼저 확인하는 게 순서다. 폰트비에서 각 폰트의 사용 범위(웹사이트·인쇄·영상 등)와 라이선스 안내 원문을 확인하면, 웹용인지 인쇄용인지를 폰트 상세 페이지에서 한눈에 파악할 수 있다. 웹폰트로 쓸 폰트라면 @font-face 코드 복사 기능도 바로 활용 가능하다.

폰트를 바꾼 뒤에는 CSS를 건드리기 전에 먼저 새 폰트의 획 밀도를 눈으로 확인한다. 글자가 틀을 빡빡하게 채우면 행간을 0.05~0.1 올리는 것부터 시작하고, 가볍고 여백이 많은 폰트라면 현재 값에서 유지하거나 약간 줄인다. 같은 수치인데 폰트만 바꿨더니 느낌이 확 달라지는 순간이 오면, 이 글이 왜 폰트 구조를 먼저 짚었는지 바로 이해가 될 거다.

참고자료

• W3C WCAG 2.1 — Understanding SC 1.4.12 Text Spacing (www.w3.org)
• W3C Requirements for Hangul Text Layout and Typography — KLREQ (www.w3.org)