타이포그래피 — 화면 글의 8할
웹 화면의 대부분은 결국 글자다. 그래서 타이포만 바로잡아도 화면의 8할이 좋아진다. 외울 숫자는 몇 개 안 된다.
| 항목 | 기준 | 왜 |
|---|---|---|
| 본문 크기 | 16px 이상 | 모바일에서 16px 미만이면 iOS가 입력칸을 확대해 버린다. 눈도 힘들다. |
| 행 길이 | 한 줄 45~75자(한글 25~40자) | 줄이 길면 다음 줄을 찾다 길을 잃고, 짧으면 눈이 널뛴다. |
| 행간 | 본문 1.5~1.8, 제목 1.1~1.3 | 글줄 사이가 좁으면 벽, 넓으면 낱장으로 흩어진다. |
| 글꼴 수 | 1~2종, 웨이트로 변주 | 이 블로그는 Pretendard 하나를 여러 굵기로 굴린다. |
| 자간 | 큰 제목은 살짝 좁히고(-2~-3%), 작은 대문자 라벨은 벌린다(+20~30%) | 크기가 커지면 글자 사이가 시각적으로 벌어져 보인다. |
한글은 라틴 문자보다 글자 폭이 넓고 네모틀이라 같은 픽셀에서 더 빽빽해 보인다. 그래서 한글 본문은 행간을 후하게(1.7 안팎) 주는 게 안전하다. 이 블로그 본문도 1.7 을 넘게 잡았다.
행간 1.15 · 줄 꽉 참
글줄 사이가 좁으면 문단이 벽으로 보인다. 다음 줄을 찾다가 같은 줄을 두 번 읽고, 눈이 금방 지친다. 같은 내용인데도 읽기 싫어지는 건 대부분 이 간격 때문이다.
행간 1.7 · 한 줄 25~40자
글줄 사이가 숨을 쉬면 같은 글도 술술 읽힌다. 줄 길이를 조금 줄이면 다음 줄 찾기도 쉬워진다.
타이포 점검은 세 질문이다 — 글자가 충분히 큰가, 줄이 너무 길지 않은가, 줄 사이가 숨 쉬는가.