웹사이트를 새로 단장하면서 멋진 영문 템플릿을 그대로 가져왔는데, 한국어 콘텐츠를 채워 넣자 어딘가 답답해 보인 적이 있다. 글자가 다 보이는데 읽고 싶지 않은 느낌, 한 단락만 지나도 눈이 피로해지는 느낌. 원인은 폰트 그 자체가 아니라 폰트 주변의 공기—자간과 행간, 글자 크기, 한 줄의 길이—에 있다.
한글은 모아쓰기를 하는 문자다. 영문이 가로로 줄지어 가는 활자라면, 한글은 사각형 안에 자음과 모음을 쌓아 올린 입체에 가깝다. 그래서 영문에 어울리는 좁은 자간과 빽빽한 행간을 그대로 옮기면 한글 본문은 답답해진다. 한글 사이트의 본문 타이포그래피에서 챙겨야 할 다섯 가지 원칙을 정리했다.
1. 본문 글자 크기는 16px 아래로 내리지 않는다
한글 본문은 모바일에서 16px, 데스크톱에서 17~18px이 기본이다. 영문 기준의 14~15px을 그대로 옮기면 한글은 더 작아 보이고, 시선이 줄을 따라가기 어려워진다. 특히 40대 이상이 주요 독자라면 17~18px에서 시작해야 본문이 자연스럽게 읽힌다. 캡션과 보조 정보 정도에만 13~14px을 쓰는 식으로 위계를 잡는다.
2. 행간은 글자 크기의 1.6~1.8배로 둔다
영문 본문은 line-height 1.4~1.5가 표준이지만, 한글은 위아래로 두툼한 글자가 많아 같은 값을 쓰면 줄이 붙어 보인다. 1.6에서 1.8 사이가 시선이 다음 줄로 부드럽게 넘어가는 구간이다. CSS에서는 단위 없이 line-height: 1.7 처럼 비율로 적어 두면 글자 크기를 바꿔도 비율이 그대로 유지된다.
3. 자간은 살짝 좁히되 본문에서 -1%를 넘기지 않는다
한글은 글자 자체에 여백을 품고 있어 영문처럼 자간을 양수로 벌릴 필요가 거의 없다. 본문은 letter-spacing 값을 -0.01em 정도로 살짝 줄여 답답함을 덜어 주고, 제목은 -0.02em에서 -0.03em까지 좁혀 시선을 모은다. 그 이상 줄이면 자음과 모음이 들러붙어 오히려 가독성이 떨어진다.
4. 본문 한 줄은 모바일 18~24자, 데스크톱 35~45자로 잡는다
한 줄이 너무 길면 다음 줄로 시선이 돌아오는 데 시간이 걸리고, 너무 짧으면 줄이 자주 끊겨 호흡이 깨진다. 한글은 영문보다 글자 폭이 넓기 때문에 영문 기준 60~75자가 아니라 35~45자가 데스크톱의 적정선이다. 본문 컨테이너 폭을 max-width 36em 안팎으로 묶어 두는 것만으로도 읽기 편한 사이트가 된다.
5. 한 폰트 가족 안에서 굵기와 크기로 위계를 잡는다
한글 본문에는 Pretendard, 본명조, Noto Sans KR, 나눔스퀘어 같은 폰트가 흔히 쓰인다. 본문은 font-weight 400 또는 500에서 시작하고, 강조에는 700을 쓴다. 본문과 제목에 서로 다른 한글 폰트를 섞으면 톤이 흐트러진다. 한 폰트 가족 안에서 굵기와 크기로 위계를 잡는 편이 한글 웹에서는 가장 안정적이다.
본문이 읽혀야 사이트의 모든 콘텐츠가 살아난다
한글 타이포그래피는 디자인의 장식 영역이 아니라, 사이트의 정보가 독자에게 가닿는 통로다. 본문이 답답하면 아무리 좋은 사진과 카피도 끝까지 읽히지 않는다. CYAN은 클라이언트의 한글 콘텐츠가 가장 잘 읽히는 자간과 행간, 폭을 한 줄씩 점검하면서 사이트를 만든다. 글자 사이의 공기가 그 사이트의 첫인상을 결정한다.