brunch

You can make anything
by writing

- C.S.Lewis -

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

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

UX 디자인 배우기 #40

안녕하세요. UX 컨설턴트 전민수입니다.  

지난 20년간 UI/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를 선택했다고 합니다. 




감사합니다. 




추천 UI/UX 설계 교육 


1) UI/UX 트랜드 조사 방법에 대해 학습한다

2) 성공적인 모바일 UI/UX 설계를 위한 UX 방법론에 대해 학습한다

3) 경쟁사 및 자사 서비스를 분석하는 방법에 대해 학습한다

4) Task 분석 및 이해관계자 인터뷰 방법에 대해 학습한다

5) 모바일 화면 설계를 위한 사용자 리서치 방법을 학습한다

6) 퍼소나 설계 방법에 대해 학습한다

7) UI/UX 컨셉 설정 및 기능 정의 방법에 대해 학습한다

8) 프로토타입 설계 및 테스트 방법에 대해 학습한다

9) 모바일 화면 설계에 대한 사용자 테스트 방법을 학습한다

10) UI/UX 가이드 작성 방법에 대해 학습한다




1) 사용자가 자신이 원하는 과업을 간단하게 마무리할 수 있는 정도에 대한 UX 가이드 원칙을 학습한다 

2) 시스템의 현재 상태를 시각적으로 명확하게 나타내는 UX 가이드 원칙을 학습한다

3) 사람들이 오류를 저지를 수 있는 가능성을 미연에 제거하거나 줄여 줌으로써 실수를 범하는 것을 사전에 방지하는 UX 가이드 원칙을 학습한다

4) 오류가 발생하였다면 시스템은 즉시 사용자에게 이를 알려줘야 하는 UX 가이드 원칙을 학습한다

5) 오류가 발생했다는 사실을 사용자가 되도록 빨리 인식하고, 빠른 시간 안에 조치를 취할 수 있게 도와줘야 하는 UX 가이드 원칙을 학습한다

6) 시스템의 내부 상태가 변화했을 때 그 변화된 상태를 사용자가 감지할 수 있게 해 주는 UX 가이드 원칙을 학습한다 

7) 주요 정보는 사용자의 눈에 잘 띄어야 하며, 간결하게 전달해야 하는 UX 가이드 원칙을 학습한다

8) 전달된 정보는 누구나 쉽게 이해할 수 있도록 구성해야 하는 UX 가이드 원칙을 학습한다.

9) 사용자가 보기에 정보가 제공되는 순서나 구조가 논리적이라고 생각할 수 있도록 구성해야 하는 UX 가이드 원칙을 학습한다

10) 사용자가 이전에 한 행위를 별도로 기억하지 않아도 시스템에서 사용자가 기억할 수 있도록 도와줘야 하는 UX 가이드 원칙을 학습한다

11) 사용자가 이전에 한 행위를 별도로 기억하지 않아도 시스템에서 사용자가 기억할 수 있도록 도와줘야 하는 UX 가이드 원칙을 학습한다

12) 사용자가 자신이 원하는 대로 시스템과 상호작용할 수 있도록 해주는 UX 가이드 원칙을 학습한다

13) 시스템이 주도권을 갖고 상호작용하는 UX 가이드 원칙을 학습한다

14) 사용자 자신이 처한 상황에 따라 가장 적절한 방법을 선택할 수 있도록 하는 UX 가이드 원칙을 학습한다

15) 사용자가 한꺼번에 두 개 이상의 작업을 동시에 수행할 수 있도록 하는 UX 가이드 원칙을 학습한다

16) 사람들이 실제 생활에서 가지고 있었던 경험을 바탕으로 시스템을 사용하는 UX 가이드 원칙을 학습한다

17) 사용자가 자신이 과거에 시스템과 상호작용한 경험에 비추어 자기가 어떤 행동을 하면 그 결과가 어떻게 되리라는 것을 예측 할 수 있는 UX 가이드 원칙을 학습한다

18) 명령어나 메뉴, UI 등 일관된 스타일에 대한 UX 가이드 원칙을 학습한다 

매거진의 이전글 북마크가 꼭 필요한 UI 가이드라인 45개 소개

매거진 선택

키워드 선택 0 / 3 0
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
;