십분만에 배우는 한글 타이포그래피를 쓰며
이 글은 십분만에 배우는 한글 타이포그래피를 쓰게 된 경위와 중간 연구를 설명하는 글입니다. 본 글을 먼저 읽고 읽어주세요.
최근 Butterick’s Practical Typography라는 책을 접했습니다. 그 중에서 십분만에 배우는 타이포그래피라는 장을 정말 재미있게 읽었습니다. 일부 발췌 번역해 보겠습니다. 번역에 대하여 저자의 허락을 얻었음을 밝힙니다.
문서의 타이포그래피는 본문이 어떻게 보이냐에 크게 좌우됩니다. 이유는 단순히 본문의 양이 나머지의 양에 비해 많기 때문입니다. 그러니 문서 작업 시 항상 본문이 좋게 보이게 하는 것을 먼저 하십시오. 나머지는 그 후 걱정해도 됩니다.
본문이 어떻게 보이는지는 다음 네 가지 요소에 의해 크게 정해집니다.
글꼴의 크기. 인쇄물에서는 가장 편안한 본문 글꼴 크기는 10~12 포인트입니다. 웹에서는 15~25 픽셀 사이입니다. 모든 글꼴이 주어진 크기에 동일하게 커 보이지는 않으니, 필요에 따라 조절해야 함을 유의하세요.
행간. 줄 사이의 수직 거리를 뜻합니다. 이는 글꼴 크기의 120~145%여야 합니다. 워드프로세서에서는 “exact” 행간 설정을 사용하면 됩니다. 기본 single-line 설정은 너무 빡빡하고 1.5-line 설정은 너무 느슨합니다. 웹에서는 CSS의
line-height설정을 사용하면 됩니다.행장. 글 덩어리의 수평 길이를 뜻합니다. 줄 길이는 줄 당 평균 45~90 글자가 들어갈 정도, 혹은 소문자 알파벳을 두세번 반복하는 정도가 되어야 합니다. 예를 들면 다음처럼요.
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcd
인쇄물에서는 이것은 여백이 전통적인 1인치보다는 넓어야 함을 의미합니다. 웹에서는 이것은 보통 브라우저 창 밖으로 글이 넘치지 않도록 하는 것을 뜻합니다.
글꼴. 타이포그래피에 있어 가장 빠르고 쉽고 가시적인 성과를 내는 방법은 컴퓨터에 공짜로 딸려 나오는 기본 글꼴을 사용하지 않고 전문 글꼴을 사용하는 겁니다. 예를 들면 제가 만든 Equity, Concourse, 아니면 글꼴 추천에 있는 다른 글꼴들이죠. 전문 글꼴은 전문 디자이너를 직접 고용하지 않고서도 그 혜택을 받을 수 있도록 해 줍니다.
기본 글꼴로도 충분히 좋은 타이포그래피를 얻을 수 있습니다. 다만 현명하게 고르세요. 그리고 결코 Times Roman이나 Arial을 사용하지 마세요. 이 글꼴들은 타이포그래피에 별 관심 없이 대충 작업하는 사람들만 선호합니다. 타이포그래퍼들은 결코 이 글꼴들을 좋아하지 않습니다. 독자분들도 같은 생각일 겁니다.
한글에도 그대로 적용할 수 있을까?
정말 간단하고 명쾌한 규칙들입니다. 한글에도 그대로 적용할 수 있을까요? 조사를 해 본 결과 이 규칙들은 알파벳 기반의 타이포그래피에 최적화된 규칙이며, 한글을 위해선 약간의 수정이 필요함을 깨달았습니다. 현재 한글 문화권에서 사용되는 대부분의 한글 글꼴은 네모꼴입니다. 글자의 크기가 동일한 대신, 글자의 밀도에 있어서 글자마다 큰 차이가 있습니다. 알파벳에 비해 한글은 조밀한 글자는 밀도가 높은 편이고요. 알파벳이 소문자의 어센더와 디센더를 통해 공간의 채움과 비움의 조화로 가독성을 높이며 시각적 운율성을 주는 점은 한글에서는 조금 심심한 부분입니다.
한글 인쇄물의 경우
인쇄물의 경우는 어떠한지 궁금하여 열린책들 편집 메뉴얼과 한국고전번역원 한국문집번역총서 출판디자인 제작 매뉴얼을 찾아보았습니다.
| 설정 | 열린책들 판형1 | 한국고전번역원 |
|---|---|---|
| 크기 | 10pt (약 13px) | 10.5pt (약 14px) |
| 행간 | 17pt (1.7) | 20.8pt (약 2.0) |
| 행장 | 85mm (약 31자) | 105mm (약 33자2) |
| 글꼴 | SM신명조 | 신명 신명조 |
| 자간 | -18% | -7% |
넓은 행간이 눈에 띄는데, 알파벳 소문자가 행간의 일부분만 차지하는 것과 다르게 한글은 주워진 줄에 꽉 차는 느낌이 듭니다. 그런 이유로 알파벳보다 좀 더 넉넉한 행간을 주게 된 것 아닌가 생각합니다. 또한 둘 다 자간을 임의로 줄이는 것이 눈에 띕니다. 제가 배우기론 본문용 글꼴의 경우 자간은 이미 전문가들이 최적화를 해 놓은 것이기에 크게 건드리지 않는 것이 정석이라 들었는데 조금 의외였습니다.
한글 웹의 경우
그러면 한글 웹 타이포그래피는 어떠한 규칙을 가져야 할까요? 아직까지 위와 같이 명쾌하게 정리된 규칙은 찾지 못했기에, 위의 두 가지 결과를 조합하여 적절한 값을 찾아내기로 하였습니다. 하지만 이를 논하기 전에 웹에서의 한글 글꼴의 특징 몇 가지를 설명해야 할 필요가 있습니다.
전문 글꼴 사용의 어려움
한글 글꼴은 제작 비용이 비싸고 용량도 큰 편이라 개인이 전문 글꼴를 구매하여 사용하는 것은 적합하지 않다고 생각합니다. 다만 여러 회사에서 무료 라이센스로 푼 좋은 한글 글꼴들이 하나 둘 생겨나고 있고, CDN을 통해 배포되는 웹글꼴를 사용하는 방법으로 자주 사용되는 글꼴에 한해선 용량에 대한 부담이 상대적으로 줄어들어 고려해 볼 수 있는 글꼴의 갯수가 점점 늘어나고 있는 상황입니다. 자세한 것은 구글 early access 한글 글꼴 리스트를 참조해 보세요.
렌더링, 그리고 레티나 디스플레이
글꼴과 글꼴 크기의 선택에 대해서 또 한 가지 중요한 문제가 있는데, 바로 글꼴 렌더링입니다. 한글 사용자의 대부분이 윈도우즈를 운영체제로 사용하고 있는데, 기존의 굴림, 돋움, 바탕, 궁서는 20px 이하에서는 비트맵으로 표현됩니다. 이 경우 사용할 수 있는 글꼴 크기는 그 비트맵 글꼴의 가독성이 높은 몇몇 픽셀에 한정되게 됩니다. 또한 2006년 윈도우즈 비스타부터 들어온 맑은 고딕 같은 클리어타입 이외의 글꼴들은 에일리어싱이 적용이 되기에 부옇게 번져 보이는 문제가 있고, 부분적으로 조밀한 한글 네모꼴 문자의 특성에 의해 글꼴 렌더링은 한글 웹 타이포그래피가 알파벳 사용권보다 훨씬 제한적인 선택권을 부여하는 문제가 있습니다. 한글 웹 컨텐츠의 대부분이 명조체를 거의 사용하지 않고 고딕체 일색인 것도 이와 큰 관련이 있습니다. 더 자세한 글은 아름다운 한글, 제대로 보자를 참조해 보세요.
하지만 모바일을 통해 훨씬 조밀한 해상도를 가진 기기가 속속 들어오고 있으며, 모니터의 해상도 역시 예전에 비해 훨씬. 앞으로. 제 경우는 데스크탑, 랩탑, 그리고 모바일 모두 레티나 디스플레이를 사용하고 있기에 글꼴의 에일리어싱 문제도 가독성에 큰 문제가 되지 않습니다. 대부분의 사용자들 역시 모바일의 경우 이 문제에서 자유로우리라 생각합니다. 제가 만든 위의 규칙은 모니터와 랩탑에도 레티나 디스플레이가 빠르게 보급되리라는 가정 하에 글꼴 렌더링에 의한 제약은 크게 고려하지 않았음을 말씀드리고 싶습니다.
결론
위의 논의들을 종합한 저의 결론은 다음과 같습니다.
- 크기: 14px~16px
- 행간: 1.7~2.0
- 행장: 30자~40자
- 글꼴: 나눔명조, 나눔고딕, Google Font에서 제공하는 배포 글꼴들