brunch

매거진 UX 디자인의 모든 것

라이킷 421 댓글 7

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Sep 25. 2016

폰트 적용 가이드 및 무료 영문 폰트 20 추천

UX 디자인 배우기 #40

Today UX 아티클

Samantha Zhang의 글 Findingthe Best Free Fonts for Numbers를 소개하고자 합니다.

이 글을 쓴 SamanthaZhang이 일하고 있는 Graphiq 사에서는 주로 데이터 표, 차트, 인포그래픽 등을 다룬다고 합니다. 데이터 시각화에 주로 헬베티카(Helvetica)체를 사용하긴 하지만, 숫자 폰트를 선택할 때 적용하는 가이드라인이 있다고 합니다. 이글에서는 그 가이드라인을 공유하고, 숫자에 어울리는 최고의 무료 폰트를 소개하고 있습니다.

숫자 폰트 선택 가이드라인

Liningand Tabular

좋은 숫자 폰트를 고르는 첫 번째 규칙은 ‘라이닝(lining)’과 ‘태뷸러(tabular)’라는 특징을 가진 폰트를 고르는 것이라고 합니다. 라이닝은 아래와 같이 윗줄과 아랫줄 사이에 모든 숫자가 다 들어간다는 뜻을 가진 타이포그래피 용어라고 합니다. 반대 개념은 ‘올드 스타일(oldstyle)’로 기준선 위아래로 숫자가 튀어나오는 서체라고 합니다.

위쪽 서체: Libre Baskerville, 아래쪽 서체: Merriweather

‘태뷸러’란 폭이 동일한 폰트를 뜻한다고 합니다. 즉 모든 숫자의 가로나비가 같은 겁니다. 각 숫자의 모양에 따라 너비가 달라지는 경우는 ‘프로포셔널(proportional)’라는 타이포그래피 용어를 쓴다고 합니다. 태뷸러 특징을 가진 서체로 숫자를 쓰면 프로포셔널 특징을 가진 서체를 쓰는 것보다 세로 정렬이 잘 맞아서 좋다고 합니다.

좌측 서체: Lato, 우측 서체: Work Sans

숫자 관련 기호 확인

두 번째 단계는 숫자 관련 기호를 확인하는 것이라고 합니다. 무료 폰트 중에 “$” 혹은 “%” 같은 숫자 관련 기호가 제대로 만들어지지 않은 경우도 많으니 반드시 확인해야 한다고 합니다.

Graphiq사에서는 꼭 “$123,456,789.00%”를 써서 폰트를 확인해본다고 합니다. 여러분의 데이터에서 자주 쓰는 기호가 있다면 그것도 포함해서 확인하는 것이 좋다고 합니다.

각 숫자 디자인 확인

마지막으로 폰트를 설정하기 전에 각 숫자 디자인을 다시 확인한다고 합니다. 1이 7처럼 보이지 않는지, 5가 6처럼 보이지 않는지 등을 확인한다고 합니다.

다음은 숫자가 헷갈리거나 이상하게 디자인된 사례라고 합니다.

위 사례는 특별한 경우로 숫자만을 위해 만든 폰트가 아닐 수 있지만, 각각을 확인해봐야 하는 중요한 사례라고 할 수 있다고 합니다.

좋은 폰트 추천

이 세 가지 원칙을 염두에 두고 구글 폰트 라이브러리를 전부 확인해보고, 각 카테고리 별로 최고의 숫자 폰트를 5개씩 선정했다고 합니다.

세리프체(Serif fonts)

Droid Serif

DroidSerif는 대표적이면서 좋은, 현대적인 세리프체로 숫자 역시 잘 디자인되었다고 합니다. 꾸며주는 역할은 못할 수 있어도, 보편적이면서 어떤 스크린에서도 굉장히 읽기 쉬운 서체라고 합니다.

Crimson Text

다음으로 가라몬드(Garamond)스타일의 세리프체인 Crimson Text 역시 좋은 선택이라고 합니다. 널리 사용되는 세리프체로 앞서 나왔던 라이닝과 태뷸러 속성을 잘 갖췄다고 합니다.

Semibold와 Bold는 너무 길어져서 조금씩 크기를 줄였다고 합니다.

Old Standard TT

클래식하면서 우아한 스타일을 원한다면 Old Standard TT 폰트가 좋을 것이라고 합니다. 달러 기호에 들어간 세로 두 줄과 “2”와 “7”의 곡선이 옛날 느낌을 준다고 합니다.

Kameron

Kameron은 앞에 나온 폰트들만큼 유명하진 않지만 멋진 숫자 폰트를 가졌고 대부분의 세리프체 보다 너비가 넓다는 특징이 있다고 합니다. 괜찮은 숫자 폰트로 알아 두면 좋을 거라고 합니다.

Copse

Copse도 마찬가지로 덜 알려진 세리프체이긴 하지만 몇 가지 독특한 특징을 가졌다고 합니다. 견고한 모양새에 클래식컬한 느낌을 주지만 매우 작은 폰트 사이즈에서도 잘 읽을 수 있다고 합니다.

산세리프체(San-serif Font)

산세리프체에도 좋은 시스템 UI 폰트가 많이 있다고 합니다. 숫자에 쓰면 가장 좋은 산세리프체 2가지와 특이한 스타일을 가진 산세리프체 3개를 소개한다고 합니다.

Open Sans

구글 폰트에서 가장 유명한 폰트이기도 한 Open Sans는 인터넷에서 어디서나 볼 수 있다고 합니다. 많은 사람들이 따분하고 헬베티카체의 클리셰처럼 보인다고 할 수도 있지만 Open Sans는 괜찮은 보편적 산세리프체라고 합니다.

Lato

Lato는 또 다른 널리 사용되는 산세리프 폰트라고 합니다. 앞서 말한 Open Sans와 매우 다른 스타일이지만, 알아보기 쉽고 모든 경우에 사용할 수 있다고 합니다.

Roboto Condensed

산세프리체숫자 폰트를 생각하면, 어떤 분은 강하고 압축적인 스타일의 Oswald체를 떠올릴 수도 있지만 안타깝게도 Oswald체는 세로 선이 안 맞는다고 합니다. Roboto Condensed가 그들이 찾은 최선의 대체 폰트라고 합니다.

Titillium Web

Titillium Web은 매우 독특한 스타일을 가졌다고 합니다. 거의 사각형에 가까우면서도 엄격한 느낌을 준다고 합니다. 냉철하고 딱딱한 진실을 전달하기 위한 스타일이 필요하다면 TitilliumWeb이 적절하다고 합니다.

VerelaRound

Verela Round는 방금 얘기한 Titillium Web과 정 반대라고 합니다. 둥글둥글하고 귀여운 서체로, 숫자를 좀 더 친근해 보이게 만들고 싶다거나 여러분이 속한 업계에 잘 어울린다면 괜찮은 선택이 될 거라고 합니다.

디스플레이용 폰트

데이터 표나 대시보드를 만든다면 보통 세리프체나 산세리프체가 유용하겠지만, 숫자가 크게 들어가는 인포그래픽이나 포스터를 만들 때는 강력한 존재감이나 개성을 가진 폰트도 필요하다고 합니다. 다음은 그럴 때 활용할 수 있는 폰트 리스트라고 합니다.

Graduate

Graduate는 멋진 대학교 스타일의 숫자가 특징이라고 합니다. 교육 관련 인포그래픽이나 대학교 풋볼 데이터, 혹은 강력함과 염격함을 담아 숫자를 쓰고 싶을 때 좋다고 합니다.

ChangeOne

ChangeOne은 강하고 두꺼운 태뷸러식 숫자를 가졌다고 합니다. 다른 굵은 산세리프체 보다 덜 포멀해서 엔터테인먼트 인포그래픽이나 포스터를 그릴 때 유용하다고 합니다.

Special Elite

손글씨 스타일의 SpecialElite는 숫자가 태뷸러식이라고 합니다. 향수를 자극하는 디자인이나 어떤 범죄로 살해당한 사람 수와 같은 비밀스러운 리스트를 만들 때 사용하면 좋다고 합니다. 매우 독특한 폰트여서 다양하게 사용될 수 있다고 합니다.

Stardos Stencil

멋진 스텐실 스타일의 폰트로, ‘힙스터(hipster)’스러운 것을 표현할 때 좋다고 합니다.

Iceland

Iceland는 네모 모양의 현대적이면서 기하학적인 폰트로 기술 데이터나 의학 데이터에 사용하면 좋다고 합니다. 좀 더 길이가 긴 걸 원한다면 같은 디자이너가 만든 Iceberg도 괜찮다고 합니다.

프로포셔널 폰트(Proportional fonts)

끝으로 아름다운 숫자 폰트를 몇 가지 더 소개한다고 합니다. 이 폰트들이 가진 유일한 문제는 앞서 말한 ‘태뷸러’식 폰트가 아닌 폰트라고 합니다. 세로 정렬을 크게 신경 쓰지 않는다면 이 역시 괜찮은 선택이 될 수 있다고 합니다.

Montserrat

구글 폰트 추천리스트에 Montserrat가 없는 건 상상할 수 없다고 합니다. 숫자가 매우 우아하게 디자인된 폰트라고 합니다.

Poppins

또 다른 널리 쓰이고 있는 산세리프체로, Poppins 역시 숫자가 잘 디자인되었다고 합니다. 다만 숫자“9”가 좀 이상하긴 하지만 전반적으로 훌륭하고 Montserrat보다 다양한 폰트 웨이트 버전이 있다고 합니다.

Bitter

Bitter는 타이틀로 쓰기 좋으면서 숫자가 잘 디자인된 폰트라고 합니다. 앞서 나온 Montserrat와 Poppins처럼 Bitter도 널리 쓰이며, 타이틀 폰트로 사용한다면 숫자도 써보라고 합니다.

Ultra

Ultra는 굵은 숫자 폰트로, 태뷸러 속성을 갖추기만 했다면 Change One 대신 이 폰트가 선택되었을 거라고 합니다. 포스터 제목같이 큰 숫자에 이용할 폰트를 찾고 있다면 Ultra는 선택하는 것이 좋다고 합니다.

FjallaOne

많은 사람들이 응축된 굵은 스타일의 숫자 폰트로, FF Din체의 무료 대체제로 Oswald를 많이 사용하고 있어서 Oswald를 리스트에 넣을지 말지 고민을 많이 했다고 합니다. 하지만 Oswald는 달러 표시와 숫자 “4”가 일관성이 없어서 뺐다고 합니다. 그래서 숫자가 좀 더 균형 잡힌 Fjalla One를 선택했다고 합니다.