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

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

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

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

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

그래서 한글은 라틴보다 한 단계 키워서 밀도를 벌어주는 게 관습이다. 실제로 한글 화면용으로 널리 쓰는 Pretendard 계열은 다른 서체보다 글자가 작게 그려져 있어서, 배포처에서도 기본 크기를 17px로 잡곤 한다. 라틴 문자를 한글의 약 105%로 키워 섞는 관습도 같은 맥락이다. 글자 구조가 다르니 같은 수치가 같은 크기로 보이지 않는다는 것.

한 가지는 정직하게 짚자. 웹 접근성 표준인 WCAG는 “본문은 몇 px 이상"이라는 절대 하한을 정하지 않는다. WCAG가 요구하는 건 크기 그 자체가 아니라, 사용자가 200%까지 확대해도 레이아웃이 깨지지 않는 것이다. 그러니 17px은 표준이 정해준 상수가 아니라, 업계가 오래 수렴해온 실무 권장값(본문 16px 하한, 장문 17~18px 권장)에 한글 획밀도 보정을 얹어 고른 값이다. 다만 절대 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자가 어떻게 나오는지가 그쪽 이야기다.