웹사이트의 인상을 결정짓는 요소를 하나만 꼽으라면, 저는 망설임 없이 타이포그래피를 고릅니다. 컬러나 일러스트는 취향이지만, 글자 위계는 정보 전달의 뼈대입니다. 그런데 영문 가이드를 그대로 옮겨 적용하다 보면 한글 사이트가 어딘가 답답해 보이는 순간이 있습니다. 이유는 단순합니다. 한글은 영문과 다른 형태를 가졌고, 다른 규칙이 필요합니다.
1. 한글은 영문보다 작아 보인다 — 본문 크기의 시작점
같은 16px이라도 한글은 영문보다 시각적으로 작게 인식됩니다. 영문은 알파벳의 소문자가 x-height에 맞춰 가로로 길게 흐르지만, 한글은 정사각형 안에 자모가 빼곡히 채워지기 때문입니다. 그래서 한글 본문은 17~18px을 기본으로 두는 편이 훨씬 안정적입니다. 모바일에서도 16px 이하로 떨어뜨리지 마세요. 시니어 사용자가 많은 사이트라면 19px도 충분히 고려할 만합니다.
2. 위계는 크기가 아니라 '비율'로 만든다
제목을 32px, 본문을 16px로 두는 식의 임의 배치는 위계가 아니라 단순한 차이입니다. 타이포 시스템은 스케일(비율)로 짜야 일관됩니다. 흔히 쓰는 비율은 다음과 같습니다.
- 1.25 (Major Third): 정보 밀도가 높은 사이트, 대시보드, 블로그에 적합
- 1.333 (Perfect Fourth): 일반적인 기업 사이트와 서비스 소개 페이지의 표준
- 1.5 (Perfect Fifth): 헤드라인을 강하게 보여주고 싶은 브랜드 사이트, 랜딩 페이지
본문 17px에 1.333 비율이면 22.6px → 30.1px → 40.1px → 53.5px로 H4부터 H1까지 자연스럽게 이어집니다. 처음에는 어색해도, 비율로 짠 시스템은 디자이너가 바뀌어도 무너지지 않습니다.
3. 줄 간격이 가독성의 70%를 결정한다
한글 본문에서 가장 자주 만나는 실수가 line-height 1.4 이하입니다. 영문 가이드에서 자주 보이는 1.4~1.5 권장값은 한글에는 너무 빡빡합니다. 한글은 받침이 자주 등장해 글줄의 시각적 높이가 일정하지 않기 때문에 더 넉넉한 호흡이 필요합니다. 본문은 1.6~1.8, 긴 글이라면 1.75를 기본값으로 두세요. 반대로 큰 제목은 1.2~1.3까지 좁혀야 무게감이 살아납니다. '본문은 넉넉하게, 제목은 단단하게'가 한 줄 요약입니다.
4. 자간(letter-spacing)은 한글에서 마이너스로 시작한다
대부분의 한글 웹폰트는 기본 자간이 살짝 넓게 디자인되어 있습니다. 그래서 본문은 -0.01em ~ -0.02em 정도 살짝 좁히는 편이 정돈되어 보입니다. 큰 제목일수록 더 좁혀, 32px 이상의 헤드라인은 -0.03em까지 내려가도 어색하지 않습니다. 단, Pretendard와 SUIT 같은 최근 폰트는 자체 metric이 잘 짜여 있어 0em 그대로가 가장 깔끔할 때도 많습니다. 폰트마다 한 번씩 시각 보정을 거쳐야 합니다.
5. 한 줄에 몇 글자가 적당한가 — 가독 폭의 황금비
본문 컬럼이 너무 넓으면 다음 줄을 찾는 시선의 부담이 커집니다. 한글은 보통 한 줄에 35~45자가 가장 편안한 가독 폭으로 알려져 있습니다. CSS에서는 max-width: 38em; 정도로 제한하면 17px 본문에서 자연스럽게 이 범위에 들어옵니다. 모바일에서는 화면 폭에 맞추되, 좌우 여백을 최소 16px 이상 두어 글이 화면에 닿지 않도록 해주세요.
실무에서 꼭 점검해야 할 한 가지
가장 마지막으로 점검해야 할 것은 모바일에서의 위계 붕괴입니다. 데스크톱에서 H1과 H2의 차이가 명확하던 사이트도, 모바일로 오면 H1이 너무 커져 한 줄이 두 줄, 세 줄로 흘러내리며 위계가 무너지는 경우가 흔합니다. clamp() 함수를 활용해 화면 폭에 따라 부드럽게 줄어들게 하거나, 모바일 전용 스케일(예: 1.25)을 별도로 두는 방법이 효과적입니다.
타이포그래피는 디자이너의 취향이 아니라, 정보 전달의 시스템입니다.
한글 웹사이트의 격은 결국 글자에서 결정됩니다. 본문 크기 1px, 줄 간격 0.1, 자간 0.01em의 차이가 모이면 사용자는 그 사이트를 '읽기 편한 곳'으로 기억하게 됩니다. 반대로 위계 없는 글자들은 정보를 전달하기도 전에 신뢰를 잃습니다.
저희 CYAN 에이전시는 모든 웹사이트 프로젝트의 첫 단계에서 타이포 시스템을 설계합니다. 본문 크기, 스케일, line-height, 자간, 가독 폭까지 토큰으로 정의해 두면 페이지가 늘어나도 디자인이 흔들리지 않습니다. 글자 위계가 흔들려서 사이트 전체가 어딘가 어색해 보인다면, 한 번쯤 점검을 받아보시길 권합니다.