그래프 디자인 01 : 숫자
차트에 사용된 숫자 폰트 비교
차트의 구성은 크게 두 가지로 나뉜다. 하나는 데이터를 표현하는 그래프의 형태, 다른 하나는 폰트, 색, 배치 등 시각적인 요소들이다. 특히 폰트, 나아가 차트 안의 타이포그래피는 데이터를 독자에게 직접 전달하고 동시에 가독성, 심미성 등 시각적인 완성도를 결정짓는다. 아무리 데이터를 직관적으로 전달하는 좋은 형태와 균형 잡힌 색을 사용해도 폰트가 이상하면 그건 망한 차트다. 망하지 않기 위해서는 촘촘하게 계산돼 만들어진 좋은 예제를 보면서 고쳐나가야 한다.
그래서 이번에는 데이터 저널리즘으로 유명한 The upshot, Vox, FivethirtyEight에서 사용하는 폰트를 비교해봤다. 이렇게 선택한 이유는 각 미디어마다 디자인 특징이 확실하고, 특히 데이터 시각화나 차트 디자인이 일관적이기 때문이다. 물론 영문과 한글은 조합의 규칙이나 형태가 매우 다르기 때문에 외국 사례를 참고하기에는 한계가 있다. 그래서 숫자(0~9)만 나열해놓고 글자의 모양과 차트에 적용했을 때 모습을 비교하려고 한다.
먼저 각 미디어에서 사용하는 폰트는 이렇다고 한다.*
The Upshot, Vox, FiveThirtyEight에서 사용하는 폰트들The New York Times : NYT Karnak, NYT Franklin, NYT Cheltenham, NYT Stymie
Vox : Harriet, Balto, Alright Sans
FiveThirtyEight : Decima mono, Atlas
차트에는 이런 폰트를 사용했다.
The Upshot, Vox, FiveThirtyEight에서 차트에 사용한 폰트들이번엔 동시에 나열해봤다. Vox에서 사용한 Balto, FiveThirtyEight에서 사용한 Decima mono와 많이 쓰이는 Helvetica, DIN, 그리고 한글을 지원하는 본고딕을 비교했다. (The Upshot은 NYT 전용 폰트를 테스트할 수 있는 사이트를 찾을 수 없었다.**)
5개의 폰트를 0부터 9까지 비교했다
5개의 폰트를 모두 크기는 100pt, 굵기는 Bold로 맞췄다. (Balto는 다른 폰트에 비해 Bold가 많이 굵어서 Medium으로 설정했다.)
Balto는 0,3,5 등 숫자에서 둥근 곡선이 다른 숫자들에 비해 큰 편이고 문자의 가로폭도 넓은 편이다.
반면 Decima Mono는 가로폭이 훨씬 좁고 사람들이 흔히 생각하는 디지털 숫자의 느낌이 강하다.
본고딕은 2, 3, 5 등 숫자에서 굴곡진 부분의 굵기가 미세하게 달라진다.
숫자만 놓고 봤을 땐 개인적으로 Decima Mono나 DIN이 좋은데, 이 폰트들을 실제로 차트에 적용하면 어떤 느낌일까?
각 폰트를 차트에 적용했다. 상단은 영문, 하단은 한글로 제목을 썼다
동일한 차트에 크기 40pt, 가운데 정렬, 색은 회색 계열(#444444)로 설정했다. 상단에는 숫자에 사용한 폰트명을 영어로, 하단에는 한글로 기재했다. 영문 폰트가 한글을 지원하지 않아 한글은 본고딕으로 모두 폰트를 통일했다. 똑같은 디자인, 똑같은 폰트에 제목만 영문/한글로 했을 뿐인데 느낌이 많이 달라진다. (한글로 만들면 왜 외국 같은 느낌이 안 나는가에 대해 머리가 아팠던 게 나만 그런 건 아니겠지?)
결국 가장 많이 연구를 해야 하는 건 차트에서 한글 폰트를 어떻게 써야 하는 가다. 예제 이미지를 만들면서 느꼈지만, 그동안 나도 무감각하게 정해진 디자인 가이드라인에 맞춰서만 폰트를 사용해왔다. 분명 고딕 계열로 제목과 숫자를 썼을 때, 명조 계열로 제목을 쓰고 고딕 계열로 숫자를 썼을 때 느낌은 다 다를 텐데 말이다. 공부할 건 늘 많지만, 정말 공부할 게 많다.
[주석]
* 이 미디어들은 디자인 가이드를 대외적으로 공개하지는 않고 있다. 각 미디어에서 사용한 폰트는 검색으로 찾고 웹사이트에서 CSS에 기록된 폰트를 확인했다. 그렇지만 오류가 있을 수 있다.
** Vox에서 사용하는 Balto, FiveThirtyEight에서 사용하는 Decima Mono는 하단의 사이트에서 테스트할 수 있다.
Balto : https://typesupply.com/fonts/balto
Decima Mono : https://www.myfonts.com/fonts/tipografiaramis/decima-mono/
