타이포그래피는 단순 폰트에 대한 것은 아니며, 폰트의 사이즈, 두께, 서체 종류 등을 조절하여 화면 내 위계질서를 시각적으로 나타내는 개념.
UI에서 크게 제목용(헤드라인)와 본문용(바디)으로 나뉘며, 웹이냐 앱이냐에 따라 해상도와 화면과의 거리 등의 환경 차이로 권장 사이즈가 다름.
인간이 눈으로 읽을 수 있는 나름의 최소 사이즈는 정해져 있어서 최대 크기보다 최소 크기가 더 중요함.
가독성과 가장 밀접하며 자간과 행간에 대한 기본 지식이 필요함.
자간
글자와 글자 사이의 간격을 말함. 기본적으로 자간을 약간 줄이는데, UI 툴에서는 px단위로 줄이게 됨. 꼭 필요한 경우가 아니라면 자간을 늘리지는 않음.
단, 디지털 환경에서는 인쇄물처럼 커닝 작업을 따로 하지 않음.
행간
글줄과 글줄 사이의 간격을 말함. 글줄이 짧은 경우와 긴 경우의 행간은 다르며, 제목인지 본문인지에 따라도 다름. 주로 제목용 문구에는 1.2~1.5배를 설정하며, 본문용 문구에는 1.6~2.0배를 설정함.
UI 내 사용 폰트
웹에서는 주로 Noto sans, Spoqa han sans neo 등 웹 폰트를 주로 사용하며, iOS는 주로 SF Pro Text, SF Pro Display를 사용하며, AOS는 Roboto, Noto sans를 주로 사용함. 디지털 상에서 표현하기 적합하며 가독성이 좋은 고딕체를 주로 사용함.
주의점
웹접근성에 대한 개념과 연관 있으며, 배경과의 대비가 약한 경우 가독성에 문제가 됨. 폰트에 사용되는 컬러를 흑백으로 변경시에도 WCAG 가독성 표준에 맞춰 대비 체크 필요함.
주로 서비스를 사용하는 유저의 연령대에 따라 폰트를 크게 하는 경우도 필요함.
관련 키워드
웹접근성, 디자인 시스템, SP 단위