UI타이포그래피 (현실적인 팁과 요령)

목차

1. 판독성
   
   x 높이 (x-height)

   Counters

   두께 (Weight)

   넓은 비율 (Wide proportion)

   자간 조절 (Letter spacing)
    

2. 가독성

   세리프 vs 산세리프 (Serif vs Sans Serif)

   행간 (Line height)

   텍스트 블록 넓이 (Text block width)

   색상 (Colors)

   여백 (White space)

   위계 (Hierarchy)

   분리 (Separators)

   반복과 리듬 (Repetition and rhythm)
    

미학 외에도 사용자가 존재한다는 것을 기억해야한다. 단지 고해상도의 주력상품을 위해서 디자인하는 것이 아니라 그 이상의 것을 하고 있을 것이다.

유연한 폰트를 사용하는게 좋다. 다양한 굵기와 다양한 특수 기호를 제공해야하고 레티나에서도 잘 나타나야한다. 이러한 점들을 유의하여 사용자가 글자를 읽을 때, 불편함을 겪지 않도록 하는 것이 굉장히 중요하다. 좋은 타이포그래피는 사용자에게 "명료하게" 보이지만 나쁜 타이포그래피는 화면에서 난리를 칠 것이다.

가독성을 좋게 만드는 요소들을 이해하면 UI에 쓸 글꼴을 선택할 때, 우리가 고려해야할 요소들에 대해 더 나은 종합적인 시각을 가질 수 있다.

x높이 (x-height)

우리가 읽는 서체의 95%는 소문자다. 대문자와 소문자 사이의 문자 비율이 더 클수록 판독성이 높아진다.
 

Counters

Weight

가장 적합한 문자 획 두께는 x-height의 약 18%다.

넓은 비율 (Wide proportion)

높이와 관련있는 글자의 넓이는 비율로 설명된다. 일반적으로 면적이 넓은 글자가 좁은 글자보다 판독성이 좋다.

자간조절(letter spacing )

문자간격을 계산하는 최고의 방법은 없지만, 대부분은 글자 크기를 키울수록, 필요한 문자 간격이 줄어든다. 서체가 너무 벌어지면, 수동으로 간격을 조절해야 한다.

UI디자인에서는 주로 헤더 (header) 에 적용된다.

2. 가독성

가독성은 전반적인 읽는 경험에 관한 것이다. 사용자가 얼마나 쉽게 텍스트 레이아웃을 훑어볼 수 있는지, 또 제목, 부제목, 문장과 단락을 구분하는 지에따라 가독성이 달라진다. 사용자가 더 많은 글을 읽도록 하기 위해서 시선을 끄는 서체를 만드는 것에 초점을 둔 것을 매크로 타이포그래피 (macro-typography)라고 한다. 이것은 더 좋은 읽기 경험을 위한 대비, 색상, 크기, 구성요소들, 작은 디테일의 예술이다.
 

세리프 vs 산세리프 (Serif vs Sans Serif)

과거부터 우리는 세리프 서체로 된 글을 더 쉽게 읽어왔다. 세리프는 오랫동안 인쇄물에서 사용되어왔고 긴 글을 더 잘 읽히게 했다. 세리프는 우리가 글을 읽을 때 시선의 흐름을 쉽고 자연스럽게 흘러가도록 해준다.

웹과 모바일에서는 다르다. 현재는 시각디자인적으로 더 간단한 문자 모양이 선호되고 있으며 게다가, 가독성이 좋은 산세리프체도 여러개가 있다.

웹, 특히 모바일에서 산세리프를 훨씬 더 많이 볼 수 있다. 뿐만아니라 화면은 인쇄물이 아니고 우리는 웹에서 긴 텍스트를 읽지 않는다. 특히 앱에서는 더더욱

모두 당신의 프로젝트와 사용자들이 그것을 어떻게 사용할지에 달렸다. Medium을 보면 긴 글을 읽는데 대부분의 시간을 보내기 때문에 세리프체를 쓴다. 좋은 디자인 접근법이다.

행간 (Line height)

라인 높이는 황금비율을 사용할 것을 적극 권장합니다.

글자 크기에 1.618를 곱하면 완벽한 라인 높이가 됩니다.
 

같이 쓸 수 있는 계산 사이트  — http://jsbin.com/todidu/1/

더 익숙해진다면, 직접 조정할 수 있을 것이다. 물론 이 규칙에도 예외는 있고, 필요하다면 사용하지 않아도 된다.

텍스트 블록 넓이 (Text block width)

얇은 얼음을 밟고있는 것 같다. 너무 넓은 텍스트 블록은 다음 줄을 찾기 어렵게 한다. 너무 선이 너무 좁으면 줄과 줄 사이를 건너 뛰느라 읽는 리듬이 깨질 것이다.

우리의 무의식은 다음 줄으로 넘어갈 때 자극된다 (자주 반복되지 않는한).

사용자가 글을 계속 읽게 하기 위해서 50-70개의 문자로 한 텍스트라인(줄)을 쓰는 것이 좋다.

색상 (Colors)

흔한 #CCC를 사용하는 것 보다 더 매력적이고 유니크할 것이다. 작은 디테일이 당신의 결과물을 더 보기 좋게 만들것이다.

여백 (White space)

엄청나게 많은 책과 멋진 출판물들이 있지만, 타이포그래피에서 이것 하나는 꼭 기억해야 한다.

여백의 기본 규칙은 visitors 가  한번에 볼 텍스트 양을 줄이는 것이다.

여백은 레이아웃의 흐름을 자연스럽게하고 사용자에게 너무 많은 내용으로 부담주지 않는다. 또, 우리의 시선이 어디로 향해야하는지 이끌고(안내하고), 콘텐츠의 질서, 정교함, 우아함을 만든다.

위계 (Hierarchy)

분리 (Separators)

절마다 컨텐츠를 나누는 좋은 방법은 separator를 이용하는 것이다. 가장 많이 사용하는 것은 심플한 선으로 미세한 도구지만 가독성에는 큰 역할을 한다.

다른 방법은 지금 인기있는 카드를 이용하는 것으로 관련없는 내용일 때 유용한 방법이다. 모바일에는 큰 섬네일이 좋고, 레이아웃을 더 잘 살펴볼 수 있게 한다.

반복과 리듬 (Repetition and rhythm)

UI 디자인 부분에서 시간이 가장 많이 소요되는 부분이다 (적어도 나한테는)

반복되는 요소는 통일감을 준다. 그 요소로는 배치, 글자크기, 색깔, 패딩과 마진의 값, 배경과 박스 그리고 디자이너가사용하는 규칙등이 있다. 예를 들어 나는 패딩과 마진 크기를 5로 주어 더 일관되어보이게 한다. (나의 규칙중에 하나이다).  반복은 리듬을 가지게 한다.

결론

타이포그래피를 배우는 것은 당신의 실력을 올리며 멋진 단어와 만족스러운 화면을 위한 환상적인 여행이다.  medium 글을 읽는 것만으로 실력이 오르는건 아니지만, 배우고 연습하면 향상될 수 있다. Sketch를 켜고 (포토샵 사용자들에게는 미안하지만)  기가막힌 작품을 만들자.

“예술의 위대함은 흔한 것을 찾는게 아니라 독특함을 찾는 것이다” — Isaac Basvenis Singer (1904–1991)

ps. 이번 토픽은 지난 글에 대한 Viki G 의 코멘트로부터 가져왔다