아티클

타이포그래피 다시보기

율디자인| 2022.05.13

원문 바로가기

본 포스팅은 해외 디자인 아티클을 번역하며, 추가 정보와 링크를 덧붙인 글입니다.


타이포그래피 다시보기

좋은 서체는 심혈을 기울인 스타일로 훌륭한 패밀리(한 벌)이 있지만, 일부 좋은 타이포그래피는 본래는 관계있지 않은 서체들의 관계 속에서 예상치 못하게 이루어지곤 한다. 이 글에서는 디자인을 매력적이고 창조적으로 만드는 타이포그래피 조합에 대한 다섯 가지 방법을 소개한다.



1. 뻔한 것을 피해라

위: Archer + Sentinel / 아래: Gotham + Verlag


다른 웨이트의 서체를 사용하는 경우, 비슷하지만 구분할 수 있는 다른 서체를 적용하면 디자인에 드라마틱한 효과를 줄 수 있다. Sentinel과 Archer는 기원이 매우 다른 두 가지의 슬립 세리프 서체인데 —하나는 19세기 ‘Antique’이며, 다른 하나는 21세기에 발명된 완전한 원형의 ‘볼 터미널’이 특징이다— 이들을 함께 사용하면 은근히 잘 조합되어 시각적 흥미를 더해준다. 산세리프 서체 중에서Verlag와 Gotham은 디테일한 부분이 대조적이고 날카롭게 구성되어 독특한 느낌이 뚜렷한 서체인데, Verlag의 (A, N, W에서의) 뾰족한 꼭지점은 Gotham의 곧은 세로획과 두드러지게 대조된다.


*볼 터미널: 로마자 서체 끄트머리의 둥근 부분


팁: 서체의 웨이트와 크기를 둘 다 바꾸면 이 두 조합의 차이를 강조할 수 있으며, 디자인의 독특한 특징을 이끌어낼 수 있다. 이들을 함께 사용하면, Sentinel은 특히 신중해보이고, Archer는 특히 해맑아보인다: Verlag는 더욱 우아하고, Gotham은 직설적인 성격이 배가 된다.




2. 실용적인 조합을 만들어라

왼: Mercury Text + Ideal Sans SSm / 오른: Whitney + Operator, Operator Mono


디자이너에게 비슷하면서도 내용을 구별적으로 보여주는, 서로 어울리는 서체 두 가지를 고르는 일보다 친숙한 작업은 없을 것이다. 인쇄물이든 디지털이든 텍스트가 많은 작업물은 종종 정보 종류에 따라 대조 및 강조하는 용도로 두 가지 다른 서체가 필요하다. Mercury Text 같은 x높이가 큰 서체는Ideal Sans처럼 비슷한 비율을 가진 산세리프 서체와 잘 어울린다. 인쇄물을 작업하더라도 ScreenSmart 서체를 사용해보라: 넉넉한 핏과 (속공간이 넓어) 탁 트인 듯한 느낌이 있어, 글자가 작건 어떤 사이즈건 간에 읽을 수 있다.) 그리고 세리프를 산세리프와 대척점으로 여기는 관례는 따르지 마라: 만약 본문 서체가 Whitney 같은 자주 사용되는 산세리프라면, 대조적인 서체로는 더욱 다채로운 산세리프 서체를 시도해보라. 예를 들면 Operator같은 서체 말이다. Operator의 깔끔한 커브와 간명한 제스처(형태)는 Whitney의 진지한 분위기에 멋지고 흥미로운 대조적 분위기를 더하며, 고정폭 서체 Operator Mono는 눈에 띄게 다른 시각적 리듬을 보여주어 대조적인 텍스트로 유용하다.

*x높이(x-height)
*속공간(counter)


*x높이(x-height): 소문자 x의 높이. 한 벌의 서체 안에서 소문자를 비롯한 로마자 크기의 기준의 기준이 된다. x높이가 클수록 속공간이 넓어져 글자 시원해보이는 경향이 있는데, 이는 폰트의 디자인에 따라 달라질 수 있다.

*속공간(counter): 글자의 획으로 둘러싸인 흰 공간. 타이포그래피에서는 글자가 무슨 색이든 획을 ‘검은 공간’, 나머지 비어있는 공간을 ‘흰 공간’이라 부른다.

*고정폭: 글꼴의 사이즈 및 글꼴이 집합된 문장이 항상 일정한 고정된 폭을 유지하도록 설계된 것. 고정폭 서체는 모노타입(Mono Type)이라고 불리기도 한다. (출처: wikipedia)


가변폭 서체 Operator와 고정폭 서체 Operator Mono]

*가변폭: 각 글자마다 고유의 가로폭을 가진 폰트. 로마자의 경우, “I”와 “W”의 가로폭은 다르기 마련이다. 한글 서체도 가변폭, 고정폭이 있다.


팁: Operator Mono 같은 고정폭 서체는 컴퓨터 프로그램이 빠르게 식별하도록 한다. 그러나 텍스트 단락 중간부의 원고에 코드 조각을 강조해야 할 경우, 사촌뻘 되는 가변폭 서체 Operator로 바꿔 보라. Operator는 Operator Mono와 기본적인 디자인은 같은 반면, 볼드체로 처리한 키워드는 코드로 강력하게 인식된다. 그러나 서체가 원래 가지고 있는 넓고 좁은 시각적 리듬감은 텍스트를 더욱 읽기 편하게 만들기도 한다.




3. 미묘하게 대조적인 느낌을 줘라

위: Gotham + Vitesse / 아래: Sentinel + Quarto


가끔 아주 매력적인 조합은 바로 눈에 띄지 않는 조합이다. Gotham과 Vitesse는 분명히 다른 서체이지만 —하나는 원형에 기반한 산세리프, 다른 하나는 둥근 사각형에 기반한 슬랩— 둘 다 기하학적으로 드라마틱하며, 아주 비슷한 무게감을 줄 수 있다. 하지만 서체들은 좋은 조합으로서 꼭 균일한 무게감을 가질 필요는 없는데, 다른 사이즈로 사용될 때는 특히나 그렇다.Quarto의 줄기는 작은 Sentinel과 비교되어 거의 두 배로 굵어보이며(무거워 보이며), 헤어라인(아주 얇은 획)은 폭이 5분의 1쯤 되어보이는데, 독자가 이들을 하나의 사이즈로 보았을 때는 이러한 차이가 사라진다.


팁: 비슷한 핏으로 상반되는 두 서체를 보여주는 것은, 그들의 차이를 좁히는 데 도움이 된다. 위 두 예시는 글자 사이 간격과 리듬감을 동질하게 보여줄 의도로 각 서체의 자간을 신중하게 고려한 것인데, 이는 다른 서체 조합도 마찬가지다.


*트래킹(tracking): 자간



4. 우아한 듀엣을 만들어라

왼: Chronicle Hairline + Landmark / 오른: Vitesse + Gotham


뾰족한 획의 산세리프 또는 예민할 정도로 가느다란(웨이트로 따지면 헤어라인, 라이트) 세리프 서체는 오랜 시간동안 패션, 럭셔리 타이포그래피에서 주로 사용되었다. 많은 종류의 헤어라인 웨이트는 서로 잘 어울리는데, 특히 우아하고 정밀한 모티프(무늬)가 더해질 때 더욱 그러하다. 여기 Landmark의 ‘허리가 낮아보이는 느낌’은 A, R, K에서 잘 나타나는데, 장식주의 시대의 우아함을 나타내며, 산뜻하고 고른 균형감을 가진 Chronicle Hairline는 멋진 대위법을 이룬다.


*대위법: 건축, 문학, 영화 따위에서 두 개의 대위적 양식이나 주제 따위를 결합시켜 작품을 만드는 기법 *폰트의 웨이트(굵기)를 지칭하는 단계는 보통 hairline-ultra light-light-normal-medium-semi bold-bold-extra bold-heavy-black으로 나뉘는데, 서체마다 차이가 있다.


팁:헤어라인 폰트로 작업할 때, 알맞은 폰트 사이즈를 먼저 결정해라: 몇몇은 큰 사이즈에서 그 힘을 발휘하고, 다른 몇몇은 오직 가장 큰 디스플레이(장식용) 폰트에 적합하게 사용된다. Chronicle같은 세리프 서체를 평가할 땐 H의 크로스바나 Y의 가는 줄기 같은 헤어라인 획의 웨이트뿐만 아니라, 세리프의 웨이트도 고려해야 한다. 세리프는 종종 헤어라인보다 상당히 가늘며, 이런 민감한 제스처들을 표현하는 데 서체가 얼마나 작아져도 되는지 고려해야 한다.


*로마자 부위별 명칭 - 폰트를 디자인할 때, 글자 특징이 골고루 포함된 Handglovery라는 단어 조합을 그려본다.



5. 뜻밖의 잘 어울리는 조합을 제시하라

왼: Tungsten Compressed + St. Augustin Civilité / 오른: Acropolis + Surveyor

일부 휘황찬란한 서체 조합 — 내가 좋아하는 것들이다— 은 함께 쓰일 거라 예상치 못한 서체가 같이 사용된 경우이다. 왼쪽 사례에서, 회색 플란넬 정장 같은 Tungsten Compressed는 검붉은 실크 더블릿 같은 St. Augustin Civilité와 함께 사용되었는데, 좋은 보기의 강렬한 16세기 서체이다. Tungsten의 딱딱함과 과거 영웅을 연상시키는 Civilité의 대비는 놀라운 조합을 만들어내며 이 서체의 대조되는 부분은 각각의 엄격한 수직성과 짜릿한 수평성을 강조한다. 오른쪽 사례에서는 오직 직선으로만 이루어져 색다른 느낌의 Acropolis Italic서체가 직선 하나 없는 에너제틱한 Surveyor Display Italic와 만났다. 경사각과 기울어진 정도는 그들을 더욱 응집시킨다: 둘 다 전형적인 이탤릭체보다 상당히 기울어져 있다.

*더블릿: (14~17세기에 남성들이 입던 짧고 꼭 끼는 상의)

플란넬 정장 vs 실크 더블릿


팁: 다른 서체에 비해 자유로운 범위의 사이즈로 독특한 서체를 유지하는 것은, 디자인에서 그 역할을 더욱 구별적이고, 명확하고 어길 수 없는 것으로 만든다.



번역 후기

로마자 타이포그래피 조합에 관한 다섯 가지 팁을 소개한다. Doubletake는 직역하면 '다시하는 것'인데 서체를 다시 보며, 신선한 조합을 만들어낸다는 의미에서 "다시보기"라 번역했다. 선뜻 보면 어울리지 않을 것 같은 두 서체를 사이즈, 폭, 위계 등을 잘 조정하여 결합하면 멋진 섞어짜기를 할 수 있다.

ball terminal, x-hight, counter, tracking 등 폰트 관련 명칭을 모르면 다소 난해하게 느껴질 수 있는 글이다. 각 글자의 조형 특징은 사용되는 크기, 분량, 조합에 따라 다르게 느껴지므로 타이포그래피를 잘 운용하기 위해서는 많은 연습이 필요하다.


번역하며 유의했던 단어

좋아요 6
공유하기

율디자인

디자인 교사. 디자인을 처음 시작하는 학생들에게 의지를 심어주는 일을 합니다. 배움에 대한 열정으로 대학원을 다니고, 스타트업에서 근무했습니다.
목록으로

TOP