[ch2] 타이포그래피

타이포그래피

• 사용자의 경험을 향상시키는 중요한 요소 중 하나.
• 컬러와 같이 UI 디자인에서 가장 기본이면서도 핵심적인 역할을 담당하면서 대부분을 차지한다.

OS별 시스템 폰트

• 위와 같은 이유로 각 OS에서는 최적화된 시스템 폰트를 사용한다.
• IOS, Android 시스템 폰트
  IOS : Apple SD Gothic Neo, SF PRO New York
  Android : Noto SanS Roboto
• 시스템 폰트가 가지는 장점.
  ▶ 국문, 영문, 일문, 한자 등 다국어를 지원.
  ▶ 다양한 사이즈와 굵기를 제공.
  ▶ 폰트 경량화로 용량이 라이트.
  ▶ 무료로 사용.
  ▶ 상업용으로 사용 가능.
  
  
• 웹 폰트 : 웹 페이지에서 사용 가능 폰트를 온라인에서 다운로드하여 쓸 수 있는 폰트.
  ▶ 사용자가 해당 폰트를 시스템에 설치하지 않아도 사용 가능한 덕분에, 모든 플랫폼과 브라우저에서 일관된 디자인 경험을 할 수 있다.
  ▶ 시스템 폰트와 동일한 장점을 가진다.

Serif vs Sans-Serif

• Serif : 글자 획의 시작이나 끝부분이 도출된 형태의 글씨체를 의미. 글자 획의 굵기가 가로와 세로가 다르고, 책이나 신문과 같은 인쇄물에서 주로 사용하고 있다. 한글 폰트에서는 명조나 바탕체가 이에 속한다.
  
  
• Sans-Serif : 글자 획의 끝부분이 돌출되지 않은 글씨체를 의미. Sans-Serif는 Serif가 없다는 뜻으로, 글자 획의 굵기가 일정하고 끝부분에 삐침이나 도출 없이 반듯한 형태이다. 한글 폰트에서는 고딕체가 이에 속한다.

폰트 사이즈

 

• 디자인 작업은 PC에서는 확대해서 작업하기 때문에 상대적으로 폰트가 크게 느껴지지만 실제 사이즈는 매우 작다. 
• 모바일 스크린 화면은 PC보다 작기 때문에 사용자의 움직임, 주변 조명과 같은 환경 요소들이 가독성에 영향을 주며, 그렇기에 사용자의 상황, 환경을 고려하여 폰트 사이즈를 설정한다.
• 또한, 모든 디자인은 해당 디바이스 스크린에서 폰트 크기와 컬러, 여백 등 모든 요소들이 최적화되어 잘 보이는지 확인이 필요하다.
• 용도별 폰트 사이즈 *10 이하의 폰트 사용을 하지 않는 것이 권장된다.

용도	폰트 사이즈
제목 Title	18~32
본문 Body	14~18
캡션,레이블 Caption. Label	10~12
최소 사이즈 Minimal size	IOS=11 / Android=12 / Web=14

 

시각정 계층 구조

• 텍스트의 사이즈, 두께, 컬러, 위치, 여백 등 요소를 활용하여 더 나은 사용자 경험을 도와준다.
  
  
• 타이포그래피 활용 방법
  ▶ 텍스트의 사이즈 변화 : 중요한 정보는 더 큰 텍스트를 사용한다.
  ▶ 텍스트의 두께 변화 : 헤딩, 제목, 주요 핵심 정보에는 더 굵은 텍스트를 사용.
  ▶ 텍스트의 컬러 변화 : 대비되는 컬러를 활용하여 텍스트의 가독성을 높일 수 있다.
  ▶ 자간과 행간 조정 : 텍스트 위치와 용도에 맞는 자간과 행간을 사용하여 가독성을 높일 수 있다.
  
  
• 명확한 계층
  계층 구조를 명확히 하여 텍스트의 가독성을 높이고 시선의 흐름을 위에서 아래로 자연스럽게 만든다.
  
  
• 타이틀 > 서브타이틀 > 본문을 활용하여 계층 구조를 만들 수 있다.
  ▶ 타이틀(제목)
  목적과 메세지를 명확히 전달해야 하기 때문에 폰트 사이즈, 두께, 컬러를 활용하여 가장 잘 보이도록 강조.
  위에서 아래로 시선을 유도하기 위해 본문과 서브 타이틀 상단으로 위치.
  ▶ 서브 타이틀(소제목)
  타이틀보다는 작은 사이즈로, 본문보다는 큰 사이즈로 제작한다.
  타이틀과 본문 사이에 위치하기 때문에 위아래 여백을 적절하게 설정하여 계층 구조를 만든다.
  ▶ 본문
  타이틀, 서브 타이틀 보다 사이즈는 작게 설정해야 한다.
  컬러도 타이틀 서브 타이틀 보다 강조되지 않게 한다.
    
• 주의점
  ▶  타이틀, 서브 타이틀, 본문 텍스트를 모두 강조하면 계층 구조가 무너지고 중요하게 전달해야 할 정보를 강조할 수 없다.
  ▶  폰트 사이즈는 확실하게 차이를 두는 것이 좋다. 보통은 1.5-2배의 차이를 둘 수 있다.
  ▶  과도한 컬러 사용은 복잡해 보일 수 있기에, 텍스트에 너무 과도한 컬러를 사용하지 않도록 주의한다.
  

일관된 폰트 스타일

• 하나의 제품과 서비스에는 일관된 폰트 스타일을 사용하는 것이 좋다.
• 폰트 종류
  ▶ 브랜드 이미지와 의미를 전달할 수 있는 폰트를 선택한다.
  ▶ 폰트 종류가 적을 수록 일관된 디자인을 할 수 있고 유지 보수에 용이하기에, 폰트 종류는 최소화하여 사용하는 것이 좋다.
  ▶ 폰트에 차이를 두고 싶다면 같은 폰트의 사이즈와 두께를 활용하는 방법이 있다.
  
• 폰트 사이즈
  ▶ 사용자가 읽기 편하도록 적절하게 크기 설정하는 것이 좋다.
  ▶ 하나의 화면 디자인에서는 폰트 크기는 목적에 맞게 최소화로 사용한다.
  ▶ 사용자가 정보를 편안하게 읽을 수 있도록 적절한 사이즈로 작업하는 것이 중요하며, 보통 본문 텍스트는 14~18 사이즈가 권장된다.
  ▶ 타이틀, 본문 목적에 맞는 사이즈로 작업하되, 너무 다양한 사이즈는 일관성 없고 복잡해 보이기에 주의한다.
  
• 폰트 컬러
  ▶ 목적에 맞게 적절한 컬러를 사용하고, 제품 UI 디자인 가이드 기준과 동일한 폰트 컬러를 적용하여 인관성을 유지한다.
  
  

여백과 정렬

• 자간과 행간
  ▶ 자간 : 글자와 글자 사이의 간격. 설정에 따라 가독성에 큰 영향을 줄 수 있어 꼭 필요한 경우에만 설정한다.
  글자가 커질수록 자간이 멀어져 보이기 때문에 자간을 줄이고, 글자가 작을 수록 식별이 어려워져서 자간을 늘리는게 좋다.
  
  ▶ 행간 : 줄과 줄 사이의 간격으로, 줄의 길이에 따라 행간을 설정하여 가독성을 높일 수 있다. 사용되는 용도에 따라 행간이 다르며, 보통 타이틀, 서브 타이틀에는 1.2-1.5배를 설정하고, 본문에는 1.6-2.0배를 설정한다.
  
  
• 타이틀, 서브 타이틀, 본문 여백 활용
  ▶ 본문의 행간 : 본문 행간의 여백이 가장 작으며, 글자 크기에 비례하여 행간을 설정한다.
  ▶ 서브 타이틀과 본문의 행간 : 본문과 서브 타이틀 글자 크기에 비례하여 행간을 설정한다.
  ▶ 서브 타이틀과 타이틀의 행간 : 서브 타이틀과 본문의 행간의 여백 보다 크며 본문과 서브타이틀의 글자 크기에 비례하여 행간을 설정한다.
  
  
•  브랜드 아이덴티티 : 브랜드 이미지를 떠오르게 하거나 전달하는 강력한 시각적 전달 요소.