타이포그래피 (Typography)
별칭: typography · 타이포그래피 · 글자 스타일 · 글자 크기 · 행간
글꼴, 크기, 굵기, 줄간격, 계층을 조절해 글을 읽기 좋게 만드는 설계.
타이포그래피는 폰트 하나만 고르는 일이 아니라 제목, 본문, 설명, 버튼 글자가 어떤 크기와 굵기, 줄간격을 가질지 정하는 것이다. 정보가 많은 웹앱에서는 화면을 스캔하기 쉽게 만드는 핵심 기준이다.
정의
타이포그래피는 글꼴, 글자 크기, 굵기, 줄간격, 자간, 제목과 본문의 계층을 설계해 정보를 읽기 좋게 만드는 작업이다. 웹에서는 font-size, font-weight, line-height, font-family 같은 CSS 속성과 연결된다.
왜 중요한가
웹앱은 사용자가 빠르게 읽고 판단해야 한다. 제목과 본문이 같은 크기이거나, 설명이 너무 작거나, 줄간격이 좁으면 정보 구조가 보이지 않는다. 좋은 타이포그래피는 화면을 화려하게 만들기보다 무엇이 중요한지 빠르게 구분하게 한다.
Semiclass에서의 의미
생활정보 보드에서는 카드 제목, 유형 배지, 주소, 설명, 저장 버튼, 상세 패널 제목이 각자 다른 역할을 가진다. 디자인 룬 단계에서 타이포그래피 기준을 정하면 이후 데이터가 늘어나도 화면이 무너지지 않는다.
주의할 점
초보자는 글자 크기를 화면 폭에 맞춰 과하게 줄이거나 키우기 쉽다. 모바일에서는 작은 글자를 더 작게 만들기보다 정보 우선순위를 정리하고 줄바꿈과 간격을 조정해야 한다. 긴 한글 단어가 버튼이나 카드 밖으로 밀리지 않는지도 확인해야 한다.