한글 웹 타이포그래피 (3) 글자 크기와 굵기, 그리고 본문 대비

이 시리즈에서 나는 서구 규칙을 한글에 그대로 붙이면 왜 어긋나는지 계속 따져왔다. 1편에서 한글의 네모틀과 획밀도를 이야기했고, 2편에서 본문은 고딕을 기본으로 쓰자고 정리했다. 이번엔 그 고딕 본문을 화면에 얼마나 크게, 얼마나 굵게 앉힐지, 그리고 배경과 얼마나 벌려놓을지를 정한다. 크기와 굵기와 대비, 이 세 가지만 다룬다. 줄 길이(measure)는 4편, 행간과 자간은 5편 소관이니 여기선 건드리지 않는다.

왜 한글은 라틴보다 한 단계 커야 하나

먼저 결론부터 박아두겠다. 이 블로그 본문은 17px(1.0625rem), 모바일 하한 16px이다.

라틴 알파벳으로 조판할 때 흔히 쓰는 16px을 한글에 그대로 가져오면 살짝 답답하다. 이유는 1편에서 말한 획밀도다. 같은 상자 안에 한글이 더 많은 획을 욱여넣는다. 예를 들어 라틴의 ‘o’는 획 하나로 닫힌 원이지만, 한글 ‘흙’은 같은 크기 상자 안에 ㅎ의 꼭지와 동그라미, ㅡ, 받침 ㄺ의 겹자음까지 들어간다. 같은 px이라도 한글이 더 빽빽하게 보이고, 그만큼 속공간이 좁아 글자 하나하나를 판독하는 데 시각적 여유가 부족하다.

그래서 한글은 라틴보다 한 단계 키워서 밀도를 벌어주기도 한다. 여기서 흔한 오해 하나를 짚고 가자. 한글 화면용으로 널리 쓰는 Pretendard가 다른 폰트보다 유난히 작게 그려져서 키워야 한다는 얘기가 도는데, 이건 사실이 아니다. Pretendard는 오히려 애플 시스템 폰트(Apple SD Gothic Neo)와 크기를 맞추도록 설계된 system-ui 대체 폰트다. 키우는 근거는 특정 폰트가 아니라, 한글이 같은 포인트에서 라틴보다 조금 작고 빽빽해 보인다는 일반적인 특성에 있다. 조판을 다루는 Typotheque나 모리사와도 같은 지적을 한다. 라틴을 섞을 때 라틴 쪽을 키워 균형을 맞추는 관습도 같은 맥락인데, 배율은 폰트마다 달라서 정해진 숫자가 있는 건 아니다. 예를 들어 본고딕(Source Han Sans)은 라틴을 원본의 115%로 키운다.

한 가지는 정직하게 짚자. 한글 본문은 17px라는 게 정해진 표준인 건 아니다. 실제로 데스크톱 웹과 안드로이드는 본문 16px가 흔하고, 앱의 보조 텍스트는 15px도 많다. 반대로 iOS 본문은 17pt이고, 네이버나 다음 모바일 웹도 본문을 17px 안팎으로 잡는다. 그러니까 15에서 17px가 맥락에 따라 공존하는 것이지 17px 하나가 관습인 게 아니다. 이 블로그는 장문 읽기를 기준으로 그중 편안한 쪽인 17px를 골랐다. 참고로 웹 접근성 표준인 WCAG도 본문 몇 px 이상이라는 절대 하한은 정하지 않는다. 요구하는 건 크기 자체가 아니라 사용자가 200%까지 확대해도 레이아웃이 안 깨지는 것이다. 그래서 크기는 절대 px보다 rem으로 선언해, 사용자가 브라우저 기본 글자 크기를 키우면 본문도 따라 커지게 하는 게 낫다.

:root {
  --font-size-base: 1.0625rem; /* 17px, 루트 16px 기준 */
}

.markdown {
  font-size: var(--font-size-base);
}

/* 모바일에서도 16px 밑으로 내리지 않는다 */
@media (max-width: 768px) {
  :root {
    --font-size-base: 1rem; /* 16px */
  }
}

실무 예시 하나. 디자인 시안을 데스크톱 24인치 모니터로만 확인하면 16px도 충분히 커 보인다. 그런데 같은 화면을 눕혀서 침대에서 폰으로 보면 그 16px이 확 좁아 보인다. 시안 검수는 반드시 실제 폰을 손에 들고, 팔을 뻗은 거리에서 본문을 읽어봐야 한다. 그 자세에서 획이 뭉개지지 않고 편하게 읽히는 최소값이 곧 본문 하한이다.

얇은 획은 화면에서 사라진다

본문은 regular(400), 강조는 medium(500)으로 간다. 얇은 획을 본문에 남발하지 않는다.

시안에서 thin(100)이나 light(300)은 우아해 보인다. 여백이 넉넉하고 세련된 인상을 준다. 문제는 그 인상이 고해상도 레티나 화면, 그것도 큰 크기에서만 성립한다는 것이다. 본문 크기(대략 16~18px)로 내려오고 저해상도 화면으로 가면, 얇은 획은 안티에일리어싱(anti-aliasing) 과정에서 흐려지고 끊겨 보인다. 렌더링 엔진이 픽셀 경계에 걸친 획을 회색조로 부드럽게 뭉개는데, 원래 획이 1px도 안 되게 얇으면 그 회색이 획의 대부분을 차지해버린다. 결과적으로 글자가 희미하게 날아가고, 획이 일정하지 않게 렌더링돼 자간이 들쭉날쭉해 보인다.

한글은 여기서 라틴보다 더 불리하다. 획이 많으니 얇은 획이 겹치는 지점(예: ‘뷁’ 같은 복잡한 글자, 겹받침, ㅐ와 ㅔ의 세로획 두 개)이 훨씬 자주 생기고, 그 좁은 틈이 안티에일리어싱으로 메워지면 글자가 통째로 뭉개진다. 그래서 한글 본문은 regular(400)를 바닥값으로 잡는 게 안전하다. 강조가 필요하면 굵기를 한 단계 올려 medium(500) 정도로 대비를 준다. 본문에서 bold(700)를 자주 쓰면 페이지가 얼룩덜룩해지니, 강조는 medium까지가 대개 무난하다.

한 가지 유혹을 경고하자면, -webkit-font-smoothing: antialiased로 획을 얇게 만들어 가볍고 세련된 느낌을 내는 트릭이 있다. 이건 획을 실제로 얇게 깎아버리는 효과라, 저해상도나 라이트 배경에서는 오히려 획이 부실해 보일 수 있다. 본문 가독성을 위해 굵기를 확보하려는 지금 방향과는 반대다. 손대지 않고 브라우저 기본 렌더링에 맡기는 편을 권한다.

.markdown {
  font-weight: 400; /* 본문은 regular */
}

.markdown strong,
.markdown b {
  font-weight: 500; /* 강조는 medium까지 */
}

순백은 배경에서 번진다

이제 배경과의 관계다. 다크모드에서 본문 색을 순백(#FFF)으로, 배경을 순검(#000)으로 두면 대비는 최대치로 벌어진다. 수치상 대비는 21:1까지 나온다. 그런데 이게 오히려 독이 된다.

어두운 배경 위 순백 글자는 글자 가장자리에서 빛이 새어 번지는 것처럼 보인다. 이 현상을 할레이션(halation)이라고 한다. 밝은 획과 완전히 검은 배경의 극단적 밝기 차가 눈 안에서 산란을 일으켜, 글자 주위에 옅은 후광이 생기고 획이 뭉개져 읽힌다. 특히 난시가 있는 사람에게 두드러지는데, 난시는 세 명 중 한 명꼴로 흔하다. 대비를 최대로 올린 선택이 상당수 독자에게는 오히려 읽기를 방해하는 셈이다.

그래서 다크모드에서는 두 값을 동시에 살짝 눌러준다. 배경은 순검 대신 #121212~#1E1E1E 사이의 딥 다크로, 본문은 순백 대신 밝기를 조금 낮춘 오프화이트(#E0E0E0~#F0F0F0)로. 이 조합이면 대비가 여전히 15:1 안팎으로 넉넉히 확보되면서 할레이션은 눈에 띄게 줄어든다. 이 블로그의 데 스틸 다크 토큰도 배경 #121212에 본문 #F0F0F0을 쓰는데, 정확히 이 원리를 따른 값이다.

라이트모드라고 방심할 건 아니다. 미색 배경에 옅은 회색 본문을 얹는 유행이 있는데, 이건 대비가 낮아 그 자체로 읽기 어렵다. 라이트든 다크든 지켜야 할 최소선은 하나다. 본문과 배경의 대비는 4.5:1 이상. 이건 WCAG 2.1이 본문 텍스트에 요구하는 최소 대비이고(큰 텍스트는 3:1), 다크모드라고 면제되지 않는다. 순백/순검처럼 대비를 무작정 최대로 올리는 것도, 회색끼리 붙여 대비를 뭉개는 것도 아닌, 4.5:1을 바닥으로 두고 할레이션을 피하는 구간을 찾는 게 목표다.

:root {
  --bg-body: #F5F0E1;   /* 라이트: 미색 배경 */
  --fg-body: #0A0A0A;   /* 라이트: 거의 검정. 순검보다 아주 살짝 무름 */
}

:root[data-theme="dark"] {
  --bg-body: #121212;   /* 순검(#000) 대신 딥 다크 */
  --fg-body: #F0F0F0;   /* 순백(#FFF) 대신 오프화이트 */
}

.markdown {
  background-color: var(--bg-body);
  color: var(--fg-body);
  /* 두 조합 모두 본문 대비 4.5:1을 넉넉히 넘긴다 */
}

실무 예시 하나 더. 시안에서 정한 색이 4.5:1을 넘는지는 눈으로 판단하지 말고 반드시 대비 검사기로 찍어봐야 한다. 특히 다크모드의 오프화이트는 밝기를 조금만 더 낮춰도 대비가 4.5:1 밑으로 훅 떨어질 수 있다. #121212 배경 기준으로 본문을 #6E6E6E쯤으로 낮추면 감성적으로는 차분해 보여도 대비가 부족해진다. 색을 느낌만으로 고른 뒤 수치로 검증하는 순서를 몸에 붙여두는 게 좋다.

이번 편에서 못박은 값

정리하면 이번 편의 결과물은 세 덩어리다.

:root {
  /* 크기: 라틴보다 한 단계 크게, rem으로 확대 대응 */
  --font-size-base: 1.0625rem; /* 17px, 모바일 하한 16px */

  /* 굵기: 본문 regular, 강조 medium까지 */
  --font-weight-body: 400;
  --font-weight-emphasis: 500;

  /* 대비: 라이트 */
  --bg-body: #F5F0E1;
  --fg-body: #0A0A0A;
}

:root[data-theme="dark"] {
  /* 대비: 다크. 순검·순백 대신 눌러서 할레이션 완화, 대비 4.5:1↑ */
  --bg-body: #121212;
  --fg-body: #F0F0F0;
}

크기(17px), 굵기(400/500), 다크 배경과 대비(4.5:1 이상)까지 여기서 정했다. 다음 4편에서는 이 크기를 전제로 한 줄에 몇 자를 담을지, 곧 measure와 줄끝 처리를 다룬다. 17px 기준으로 한글 약 40자가 어떻게 나오는지가 그쪽 이야기다.