한글 웹 타이포그래피의 중요성

크리에이티브밴드의 워드프레스 테마 디자인은 한 개의 단락을 균형있게 구성하는 것에서부터 시작됩니다. 하나의 단락을 이루는 글꼴(typeface), 글꼴 크기(font size), 글줄 사이(line height) 그리고 글줄 길이(line length)는 웹사이트의 가독성을 결정하는 타이포그래피의 핵심 요소이기 때문입니다.

글꼴 & 글꼴 크기

모던 브라우저들은 기본 글꼴 크기로 16px을 적용하고 있습니다. 크리에이티브 밴드의 모든 테마도 역시 이를 기준으로 삼고 있습니다.

글꼴의 크기는 어떤 글꼴을 선택하는 가에 따라서 달라질 수 있습니다. 로마자의 경우 x-height 값에 따라서 글꼴이 더 커보이거나 작아보일 수 있으며, 한글의 경우 글자 내부의 공간이 얼만큼 확보되어 있는가에 따라서 달라집니다. 적용하고자 하는 글꼴의 특성을 잘 파악할 필요가 있습니다.

전각 활자인 한글과는 다르게, 영문은 같은 크기라고 해도 해당 글꼴의 x-height 값에 따라서 체감 크기가 다르게 나타납니다. 따라서 한글 글꼴이 제공하는 영문을 그대로 사용하는 것이 안전합니다.

다만 크리에이티브 스크롤 테마는 영문 또는 숫자를 더욱 강조하기 위하여 별도의 글꼴을 적용하고 있습니다. Raleway를 적용하고 있는데 Old Style Figure 글꼴로 호불호는 갈리지만, 070-7778-9902 또는 32.89%와 같은 숫자의 가독성이 좋고 미려합니다. 뿐만 아니라 Way의 W와 같은 스타일은 꽤 매력적이기도 합니다.

Raleway의 대안으로는 Montserrat을 사용합니다. 특히 Reason의 R이 매력적입니다.

사실 본문용 글꼴로는 고딕 계열 보다는 명조 계열을 사용하는 것이 좋습니다. 명조 계열은 사용자의 시선이 글자를 따라서 자연스럽게 흐르기 때문에, 쉽게 피로해지지 않고 또 빠르게 읽을 수 있기 때문입니다.

하지만 여러 가지 이유로 한글 웹사이트에 명조 계열을 본문 글꼴로 선택하기에는 어려움이 있습니다. 이 부분은 추후에 다시 이야기하도록 하겠습니다.

글줄 사이

글줄 사이는 기본적으로 글줄과 글줄 사이에 등면적을 적용하는 것을 기본으로 합니다. 글줄과 글줄 사이의 공간은 글자면의 높이와 같아야 한다는 의미입니다. 하지만 이것이 실제로 글꼴의 px 값과 동일한 px 값을 글줄 사이에 적용한다는 것은 아닙니다.

영문의 경우 일반적으로 윗 글줄의 디센더 영역과 아랫 글줄의 어센더 영역을 합친 부분이 실질적인 글줄 사이에 해당합니다. 따라서 실제 글줄 사이 값은 글꼴과 같은 px일 필요가 없습니다. 이런 원리에 의해 계산되는 최적의 글줄 사이 값은 26px(16px × 1.625) 입니다.

하지만 동일한 값을 국문 텍스트에 적용하면 어떻게 보일까요?

한글은 네모꼴의 전각 활자¹이기 때문에 글자의 높이가 동일합니다. 따라서 같은 설정이라면 영문 본문에 비해 글줄 사이가 좁아지게 됩니다. 이는 영문 본문을 모두 대문자로 표시했을 때와 같습니다.

따라서 한글 단락의 글줄 사이는 앞서 계산한 값보다 조금 큰 수치를 적용하고 있습니다. 크리에이티브 스크롤 테마는 글줄 사이 값으로 1.75em(16px × 1.75 = 28px)를 사용하고 있습니다.

글줄 길이

글줄 길이는 3가지 기본 요소 중에서도 가장 중요합니다. 가독성에 직접적인 영향을 미치기 때문입니다. 또 레이아웃 디자인과도 관련이 깊습니다.

하지만 대부분의 웹사이트에서 제대로 설정하지 못하고 있는 부분이기도 합니다. 페이지 레이아웃을 먼저 디자인하고 그 레이아웃에 콘텐츠를 넣기 때문에 생기는 문제입니다.

본문의 글꼴 크기를 16px로 한다는 전제하에 글줄 길이는 570 ~ 680px 내에서 결정하고 있습니다. 전문적인 성격의 글인 경우에는 글줄 길이가 범위 내에서 최대한 긴 것이 좋습니다. 일반적인 가십성 콘텐츠 보다 문장의 길이가 길며, 잦은 줄바꿈은 문맥을 이해하는데 방해가 될 수 있기 때문입니다.

아래 사이트는 글줄 길이가 1200px이나 됩니다. 한 줄을 채 읽기도 전에 지루해집니다. 또한 줄바꿈을 하면서 읽다가 길을 잃기 쉽습니다.

다음 사이트는 새롭게 리뉴얼될 디자인 정글입니다. 현재 웹사이트에 리뉴얼 사이트 보기 링크를 제공하고 있는데, 역시 글줄 길이가 1080px이나 됩니다.

그나마 다행인 것은 글꼴의 크기(18px)와 글줄 사이(35px)가 비교적 합리적이라는 것입니다.

아마도 위 두 사이트 모두 모바일 디바이스를 통한 접속 비율이 높기 때문에 선택과 집중을 했을 것이라는 추측을 해봅니다. 모바일을 확인해보지 않았지만 말이죠.

황금 비율

지금까지 단락 구성을 위한 중요한 3가지 요소인 글꼴 크기, 글줄 사이, 글줄 길이에 대해서 알아보았습니다.

이들은 서로 밀접하게 연관되어 있습니다. 예를 들어 글꼴의 크기가 커진다면 글줄 사이도 커져야 한다거나, 글줄 길이가 길어진다면 글줄 사이도 늘어나야 합니다. 그렇다면 정확하게 얼마나 늘어나야할까요? 그리고 ‘적절하다’, ‘보기 좋다’ 등의 판단은 무슨 근거로 이루어지는 것일까요?

이 물음에 대한 답은 사실 매우 간단합니다. 그리고 우리 주변에서 너무나 쉽게 발견되는 것들이기도 합니다. 바로 ‘황금 비율’입니다.

타이포그래피의 목적은 구성 요소들을 심미적이고 규칙적으로 연관시키는 것입니다. 황금비율이 적용된 타이포그래피는 그래서 아름답고 효과적입니다. 이는 단지 웹사이트에 관한 이야기가 아닙니다. 책, 신문, 잡지 등 모든 영역에 적용된다고 할 수 있습니다.