타이포그래피는 디자인의 뼈대입니다. 아무리 화려한 색상과 이미지가 있어도, 텍스트의 가독성이 떨어지면 사용자 경험은 무너집니다. UI 디자이너라면 반드시 알아야 할 타이포그래피의 핵심 개념을 실무 수치와 함께 정리합니다.
행간(Line Height) — 가독성의 핵심
행간은 텍스트 블록의 가독성을 결정하는 가장 중요한 요소입니다. Google web.dev의 타이포그래피 가이드에 따르면 본문 텍스트의 권장 행간은 폰트 크기의 1.4~1.8배입니다. 16px 본문이라면 행간은 23~29px이 적절합니다. 너무 좁으면 답답하고, 너무 넓으면 텍스트 블록의 연결감이 끊깁니다.
- 제목(Heading): 1.1~1.3 — 짧은 텍스트이므로 타이트하게
- 소제목(Subheading): 1.3~1.5
- 본문(Body): 1.5~1.8 — 가장 넓게 설정
- 캡션/라벨: 1.2~1.4
자간(Letter Spacing) — 분위기를 결정한다
자간은 주로 분위기 조절에 사용됩니다. 일반적인 본문 텍스트는 자간 0 또는 약간 좁게 설정하고, 대문자 레이블이나 캡션은 자간을 넓게(0.05~0.15em) 설정하면 가독성이 높아집니다. 제목에 자간을 좁게 설정(-0.02em 정도)하면 고급스럽고 압축된 느낌을 줍니다.
텍스트 위계(Type Scale) 설계
디자인 시스템의 타이포그래피는 일관된 스케일을 기반으로 설계해야 합니다. Major Third(1.25 배율)나 Perfect Fourth(1.333 배율)를 사용하면 수학적으로 균형 잡힌 텍스트 위계를 만들 수 있습니다. 예를 들어 기본 16px에 Perfect Fourth 배율을 적용하면 12 → 16 → 21 → 28 → 37 → 50px의 스케일이 만들어집니다.
모바일 타이포그래피 주의사항
Smashing Magazine의 모바일 웹 타이포그래피 가이드는 모바일 최소 폰트 크기를 16px 이상으로 권장합니다. 16px 미만의 입력 필드 폰트는 iOS에서 자동 줌인을 유발합니다. 또한 한 줄당 적정 글자 수는 45~75자로, 너무 길면 줄 이동 피로도가 높아집니다.