디자이너가 꼭 지키는 5가지 타이포그래피 팁
글자의 획, 페어링, 색상, 자간, 정렬에 관하여
글자 디자이너 Scannerlicker의 <5 Typography Tips, From a Type Designer’s Point of View>를 번역한 글입니다. 글자와 문서를 다루는분들께 도움이 될 수 있도록 이 글을 소개하게 되었어요. 원작자와 논의하며 진행하였습니다.
[Scannerlicker 시리즈]
2. 디자이너가 꼭 지키는 5가지 타이포그래피 팁 (본글)
3. 베지어 곡선 제대로 그리는 법
4. 레터링, 획의 기술
5. 타이포그래피와 가독성
글자 디자이너의 5가지 타이포그래피 팁
#타이포그래피 #페어링 #획 #자간 #정렬
꽤 오랜만이에요!
오늘은 여러분들이 가치 있는 것을 만들어갈 수 있도록, 몇 가지 유용한 타이포그래피 팁 대해 소개하려고 해요. 이 것은 제가 어디에서도 찾아볼 수 없었거나, 있더라도 만족스럽지 않았던 정보들이에요. 덧붙이자면, 이 중 몇 가지는 제가 폰트를 만들며 매우 가까이에서 글자를 들여보다 알게 된 것들이기도 하답니다. 그럼, 제가 글자 편집증을 해소하며 배운 몇 가지의 팁을 공유합니다.
1. 작은 크기에서는 획 대비를 적게
관련된 사연을 소개할게요.
예전에 그래픽 디자인 그룹 We Came From Space에서 미팅을 기다릴 때, Non-Verbal Club의 디자이너 조안나 소브랄의 작업을 슬쩍 훔쳐보게 되었어요. 조안나는 뉴스를 디자인하고 있었는데, 본문 폰트로 인해 어려움을 겪고 있었습니다.
본문에 쓰인 폰트는 헤라클레스(Hercules)였고, 아주 작은 사이즈로 조판되어 있었어요.
글자의 획이 얇고 원고의 지면이 넓고 글줄 사이가 매우 촘촘해서, 8포인트 이하에서는 글자 획의 얇은 부분이 사라져 버릴 것 같았습니다. (폰트 사이즈는 7.5포인트였어요.)
잠시 후 저는 조안나에게 말했어요. "그 폰트의 획은 분명 이렇게 작은 사이즈로 쓰기 위해 디자인되지 않았을 거예요." 그리고 0.05포인트 정도의 아주 얇은 획이 글자 외곽에 추가되면 괜찮을 수 있겠다는 생각이 떠올랐어요. 실행해보니 정말로 그랬죠. 글자가 세로로 커지는 것을 상쇄하기 위해 자간을 아주 조금 넓혔어요.
폰트는 특정한 크기로 사용될 것을 상정하고 디자인*됩니다. (또는, 그래야 합니다.) 그리고 작게 쓰일 글자를 그릴 때에는 획 대비를 줄이는 것이 좋아요. 다른 방법도 있었겠지만, 우리는 빠르고 치사한 해결책을 찾고 있었으니까요.
이런 식으로 글자에 아주 가는 윤곽을 추가하면 사라질 위기에 처한 획을 살려낼 수 있습니다. 흰 공간이 조금 줄어들긴 하지만, 자간을 넓힘으로써 상쇄할 수 있어요.
* 역자 주
HTF Didot 폰트의 제목용(96pt)과 각주용(6pt) 디자인 (출처: Ilene Strizver, creativepro)특정한 크기로 사용할 것을 상정하고 폰트를 제작하는 것은 옵티컬 사이징이라는 개념을 뜻해요. 글꼴이 사용되는 환경을 고려해 각 크기에 적합한 형태로 설계된 폰트를 옵티컬 사이즈 폰트라고 합니다.
<Minion Pro> 폰트의 제목용(display) 폰트와 각주용 (caption) 폰트 (출처:adobe)예를 들어 어도비에서 제작한 <Minion Pro> 폰트의 경우, 제목용 폰트는 20포인트 이상의 사이즈에서 사용하기 적합하도록 획이 날렵하게 생긴 반면, 각주 폰트는 6~8포인트 크기로 사용되는 것을 기본으로 하여 속공간이 넓고, 획이 굵으며 대비가 적어요. 폰트를 고를 때는 이처럼 사용될 크기나 매체 등 환경을 고려하는 것이 좋습니다.
한글 폰트의 옵티컬 사이징 관련한 내용이 궁금하시다면, 유지원 디자이너님의 아티클 <작은 글자는 견명체가 좋은 까닭>을 읽어보시길 추천드릴게요. 해당 개념을 일상의 사례와 함께 쉽고 재미있게 이해할 수 있어요.
2. 페어링 할 때에는 글자의 무게를 신경 쓸 것
영문 폰트를 페어링*할 때,
X-하이트*가 같도록 크기를 조정하세요.
위와 같은 말을 들어보셨나요? 이 것은 좋은 충고이지만 불완전해요. 글자의 무게를 고려하지 않기 때문인데, 한 번 다른 관점에서 설명해볼게요.
*역자 주 : 페어링(Pairing)은 각기 다른 2~3개의 폰트를 함께 사용하는 것, x-하이트(w-height)는 소문자 x의 높이를 말합니다. 영문 폰트를 조화롭게 페어링 하기 위해 x-하이트의 높이를 같게 맞추는 방법이 널리 알려져 있어요.
획이 가늘어질수록 글자 크기는 착시로 인해 커 보이게 마련입니다. 이런 착시를 보정하기 위해서 같은 크기의 글자일 경우 예시와 같이 굵은 획의 글자를 가는 획의 글자보다 크게 디자인합니다.
마찬가지로, 각기 다른 두께의 글자를 페어링 할 때에는, 굵은 획의 글자가 약간 커져야 해야 해요.
Minion Pro 레귤러와 Futura 볼드로 예시를 들어 볼게요. 위의 경우에는 x-하이트가 완전히 같도록 페어링 했고, 아래의 경우에는 시각 착시를 보정했습니다. (*잠깐! 모바일로는 차이가 잘 보이지 않을 수 있어요. 컴퓨터를 켜서 확인하고 안심하세요.)
3. 검은 글자에 색을 첨가하기
제가 그래픽 디자이너로 일을 시작할 때, 숙련공들로 구성된 인쇄소에서 일할 수 있는 특권을 누릴 수 있었어요. 오래된 기계가 많이 있는 작은 인쇄소였지요.
인쇄소에는 좋은 사람들이 있었고, 저는 이 분들께 많은 것을 배웠어요. 이 분들은 제게 많은 걸 실험해볼 수 있도록 자유를 주었고 유익한 조언을 해주었어요. 제가 이 때 얻은 소중한 배움 중 하나는 종이의 색을 상쇄하기 위해 검은 글자에 색상을 약간 첨가하는 기술이었는데, 이 방식은 다른 매체에도 쉽게 적용할 수 있어요.
① 인쇄 환경에서
원리는 간단해요. 만약 종이의 배경이 푸른색을 띠고 있다면, 검은 글자에 따뜻한 색을 약간 첨가해보세요. 반대로 배경이 따뜻한 계열이라면, 글자에 푸른색을 첨가하세요. 간단하죠?
이 방법은 글자의 외곽을 또렷하게 하고, 색 대비에 의해 글자를 선명하게 보이도록 만들어 줘요. 여기서 여러 색의 잉크를 섞는 것이 아니라 전용 잉크를 사용해야 한다는 점을 유의하세요.
② 스크린 화면에서
같은 원칙이 스크린에서도 적용됩니다. 저는 절대 순수한 흰색이나 검은색을 쓰지 않아요. 이 방법에는 몇 가지 장점이 있지요.
— 흰 면이 날아가거나 검은 면이 타는 것을 방지한다
순수한 흰색과 검은색, 이 두 색상은 스크린 화면에서 공격적인 편이에요. 예전에 텔레비전 관련된 일을 할 때, 플라즈마부터 CRT, LED, OLED에 이르기까지 다양한 텔레비전의 색상을 테스트할 기회가 있었어요. 제가 가장 먼저 했던 것은 텔레비전이 백색과 흑색을 날리지 않고 표현할 수 있는지 시험해보는 것이었습니다.
— 디자인에 촉각성을 부여한다
모노톤에 약간의 색상을 첨가하면, 촉각적이고 자연스러운 느낌을 줄 수 있습니다.
— 글자가 선명해보인다
인쇄 환경과 마찬가지로, 글자의 외곽을 또렷하게 만듦으로써 선명함을 더합니다.
— 시야각이 증대된다
특히 LED와 OLED 모니터에서는, 모노톤에 색채를 넣으면 모니터의 시야각이 증대되어 더 넓은 각도에서 글자를 읽을 수 있습니다.
4. 글자 크기와 자간의 상관 관계
자간(글자 사이)은 신성의 영역이 아닙니다!
글자 디자이너는 글자의 자간과 커닝 값을 맞추는 데에 많은 시간을 할애해요. 가장 고된 시간이기도 해요. 하지만, 모든 상황에서 자간의 기본값을 조정하지 않고 사용해도 되는 것은 아니에요.
* 역자 주
커닝은 A, V, W 등 특정한 알파벳의 경우 다른 글자와 함께 쓰였을 때 간격이 유독 넓어지기 때문에 눈에 보이는 기준에 맞추어 시각 보정하는 것을 말합니다.
위의 예시에서 노란색 영역은 글자가 가지고 있는 고유한 넓이입니다. 왼쪽과 같이 글자를 기계적으로 배치하였을 때 간격이 매우 어색하지요. 하지만 오른쪽처럼 수동으로 글자 사이를 좁혀 커닝을 하면 훨씬 자연스러워집니다.
챕터 1에서 이야기했듯 폰트는 특정한 사이즈를 위해 디자인됩니다. 그리고 자간과 커닝 또한 글자가 쓰이는 크기에 따라 달라져야 해요. 글자 크기가 클수록 자간은 좁아져야 하고, 글자 크기가 작아질수록 자간은 넓어지는 것이 좋습니다.
여기에는 두 가지 이유가 있어요. 하나는 시지각에 대한 것, 또다른 하나는 기술적인 제약에 관한 것입니다.
— 시지각적 이유
글자 흰 공간의 물리적 넓이는 글자가 쓰이는 크기에 따라 달라져요. 글자가 클 때에는 실루엣을 인지하기가 쉽지만, 작을 경우에는 그렇지 않아요. 글자를 작게 쓴다면 자간을 넓혀 흰 면적을 늘려주는 것이 가독성에 도움이 됩니다. 글자가 클 때에는 흰 면적이 좁더라도 여전히 잘 읽히게 됩니다.
— 기술적인 제약
모든 사람의 시력 2.0인 것은 아니듯, 모든 프린터나 스크린의 성능이 완벽한 것은 아니에요. 기술적 제약은 자간에 문제를 야기해요. 특히 작은 글자에서 더 큰 문제가 됩니다. 타이포그래피를 다루는 사람은 해상도가 낮거나, 잉크가 퍼지는 등 좋지 않은 환경에서 글이 읽힐 경우를 염두에 두고 대처해야 해요. 이러한 환경은 글자를 블러 처리함으로써 미리 시험해볼 수 있어요. 한 번 예시를 볼까요?
5. 상황에 따른 문자 정렬 노하우
텍스트 블록을 구성하는 것은 쉬운 일이 아니에요. 기술적 제약뿐 아니라 매체, 해상도, 글자 크기, 행간, 문단, 마이크로 타이포그래피에 이르기까지 고려할 요소가 매우 많거든요. 따라서 문자 정렬은 문서의 목적과 상황 별로 달라져야 해요.
문자 정렬은 심미성이 아닌 정보 전달의 관점에서 보아야 합니다.
① 양끝정렬
이 방법은 문자 정렬 방식 중 가장 다목적적이고 경제적이기 때문에 책 디자인을 할 때 많이 쓰입니다. 그리고 가장 힘든 방식이기도 하지요. 양끝정렬은 매우 안정적인 형태이고, 한눈에 보아도 문장이 언제 시작하고 끝나는지 알 수 있다는 장점이 있어요.
문제는 양끝정렬에는 많은 시간과 노력, 지식이 필요하다는 점입니다. 그리고 이런 이유 때문에 몇몇 사람들이 초심자의 경우에는 양끝정렬을 하지 말라고 하는 것입니다.
양끝정렬에서 균일한 질감을 얻기 위해서는 자간이 벌어진 곳이 발생하지 않도록 줄바꿈에 신경 써야 합니다. 이 모든 것은 글자 하나하나를 세세히 들여다보고 조정해야 한다는 것을 의미해요.
제가 웹에서의 양끝정렬을 적극적으로 반대하는 이유는 이런 요소들을 통제할 수 없기 때문이에요. CSS에는 줄바꿈 기능이 있지만, 문서의 가로폭이 고정될지, 반응형이 될지는 알 수가 없지요. 그렇기 때문에 웹에서는 양끝정렬을 피하는 것이 보다 안전합니다.
② 왼쪽정렬과 오른쪽 흘리기
왼쪽정렬의 좋은 점은 오른쪽 흘림(단락 오른쪽 외곽의 들쭉날쭉한 흐름)만을 통제하면 된다는 점이에요. 때문에 적절한 곳에서 글줄을 끊는 줄바꿈만 신경 쓰면 됩니다. 또, 왼쪽정렬은 지면을 역동적으로 보이도록 해요.
하지만 위에서 볼 수 있듯 왼쪽정렬된 문장을 훑어볼 때 어디에서 단락이 끝나고 다음 단락이 시작되는지 알기 어려워요. 그래서 글을 읽는 사람은 다음 단락을 찾는 수고를 들여야 해요.
이에 대한 해결책은 아래와 같이 각 단락을 여백으로 구분하는 것입니다.
단락 사이를 줄바꿈으로 분리하면 계층을 확실하게 나눌 수 있어요. 이건 웹 환경에서는 보편적으로 사용하는 방법이 되었죠. 웹은 세로 공간의 제약이 없기 때문에 괜찮은 방법이에요. 하지만, 책과 같이 페이지나 줄 수 등 물리적 제약이 있는 상황에서는 문제가 될 수 있습니다. 위 이미지에서도 첫번째 단 마지막 단락의 뒷부분이 두번째 단의 윗부분에서 끝나는 것을 볼 수 있어요.
6. 마치며
이 팁들이 여러분에게 가치 있기를 바랄게요!
만약 도움이 되셨다면, 다른 친구들에게도 이 글을 공유해주세요. 페이지 구독도 추천드립니다 ;)
그럼, 포르투갈에서 건배!
* 원문 https://learn.scannerlicker.net/2015/07/13/5-typography-tips-from-a-type-designers-point-of-view/
* 매끄러운 흐름을 위해 의미를 해치지 않는 안에서 의역하였습니다. 오역 및 오탈자 수정 요청 등은 언제든지 환영하고 또 감사합니다.(holysilky@gmail.com)
역자 코멘트
제가 무척 좋아하는 폰트가 있어요. 안삼열 디자이너님의 폰트인 '310안삼열체'인데요, 순명조 계열의 완성도 높은 서체가 많지 않은 시기에 등장해 시각적 충격을 받은 기억이 있습니다. 많은 분들도 그랬던지, 서적의 제목, 포스터, 패키지 등에 활발하게 쓰이기 시작했어요. 그렇다면 이 폰트가 모든 상황에 쓰이기 적합할까요?
폰트를 만든 디자이너님은 '안삼열체는 여섯 줄의 글줄, 글줄 당 세 자, 총 자수는 열 다섯자 내외로 쓰일 때 보기 좋은 제목용 서체'라고 설명했어요. 하지만, 모든 디자인이 그렇듯 제작자의 의도와 다르게 사용되는 예시를 종종 볼 수 있습니다. 모 웹툰에서 안삼열체를 어두운 배경의 본문용(9pt 정도의 작은 크기)으로 사용된 것을 보고 놀란 적이 있어요. 웹툰의 특성상 모바일로 보게 되기 때문에 글자가 더 작게 표현되어 글자의 가로획이 거의 사라져 눈이 시릴 정도로 가독성이 떨어져 보였거든요. 안삼열체의 팬으로서 마음이 아팠어요.
이처럼 좋은 폰트라고 해서 모든 환경에 적합한 것은 아니에요. 본문에서 배운 특성을 고려한다면, 폰트를 목적에 맞게 정확하게 사용할 수 있을 것입니다. (화이팅!)
(좌)기본 화이트와 블랙 (우) 자연스러움을 위해 회색도를 조정또, 목적에 따라 검은색이 도드라지거나 자연스럽게 보여지도록 색상과 명도를 조정하는 방법은 여러 상황에서 유용하게 쓰일 수 있습니다. 반대로, 인쇄를 할 때 더 진한 검정을 쓰기 위해 푸른 잉크를 섞어 검은색을 쓰기도 한답니다. (C20 K100을 보통 많이 쓰고, 이 것을 리치 블랙이라고 해요.)
그렇다면 실제로 활용된 예시를 어디에서 볼 수 있냐구요? 바로 우리가 보고 있는 이 글자를 보세요! 브런치 본문의 활자 세팅은 블랙인 #000000이 아니라 회색이 살짝 가미된 #333333로 되어 있습니다. 가독성을 높이고 책을 읽는듯한 자연스러운 경험을 선사하기 위해서 회색도를 조정했다고 추측해요. 다음에 검은 색을 쓰게 된다면, 관습처럼 기본값을 쓰는 것이 아니라 '이 배경색과 컨텐츠에는 어떤 검정이 어울릴까?' 한번쯤 고민해 보시기를 추천 드릴게요. 컨텐츠의 완성도를 높이는 작은 디테일이 될거에요.
오늘의 글은 여기까지입니다.
그럼, 다음에 또 만나요!
silky
글자와 그림을 사랑하는 그래픽 디자이너. 브랜드, 타이포그래피, 현대 미술을 포함한 기호의 총체에 관심이 있으며, 몇 명의 디자이너와 함께 브랜딩 디자인 스튜디오를 운영하고 있습니다.
좋아요와 구독, 댓글은 저에게 기쁨을 주고 양질의 콘텐츠를 발행하는 데에도 큰 힘이 됩니다.
