타이포그래피가 디자이너가 가장 먼저 틀리는 부분인 이유
대부분의 사람들은 타이포그래피가 글꼴을 고르는 일이라고 생각합니다. 그렇지 않습니다. 타이포그래피는 간격, 리듬, 위계에 관한 것입니다. 독자가 어디를 볼지 의식적으로 정하기 전에 시선을 이끄는 보이지 않는 구조입니다. 아름다운 글꼴이라도 행간이 나쁘거나, 트래킹이 맞지 않거나, 위계가 없으면 제대로 쓴 Times New Roman보다 전달력이 떨어집니다. 이 8가지 개념이 그 이유를 설명합니다.
8가지 기본
트래킹
단어나 텍스트 덩어리 전체에 적용하는 글자 간격. 대문자 라벨에서는 늘리고, 디스플레이용 헤드라인에서는 좁힙니다.
모두 대문자인 텍스트는 숨 쉴 수 있도록 +10~20%의 트래킹이 필요합니다. 소문자 본문은 거의 필요하지 않습니다.
커닝
특정한 두 글자 쌍 사이의 간격. ‘AV’, ‘To’, ‘WA’는 기본값으로는 너무 떨어져 있습니다. 좋은 커닝은 이런 보이지 않는 틈을 바로잡습니다.
자동 커닝이 대부분의 경우를 잘 처리합니다. 데모에서 꺼 보면 무엇을 보정하는지 정확히 느낄 수 있습니다.
행간
텍스트 줄과 줄 사이의 세로 공간. 너무 좁으면 글이 숨 막히고, 너무 넓으면 눈이 줄과 줄 사이의 흐름을 놓칩니다.
본문의 최적 범위는 글꼴 크기의 1.4~1.6배입니다. 디스플레이용 헤드라인은 1.0~1.2배 정도로 더 좁아도 됩니다.
글꼴 두께
획의 굵기로, 가는 것(100)부터 아주 굵은 것(900)까지 있습니다. 두께는 독자가 단어 하나를 의식적으로 읽기도 전에 위계를 만듭니다.
디자인 하나에 두께는 2가지로 제한하세요. 본문용 하나, 제목용 하나. 2가지를 넘으면 혼란스러워집니다.
세리프와 산세리프
세리프는 글자 끝에 작은 마무리 획이 있고, 산세리프는 없습니다. 종이에서의 긴 글 읽기에는 세리프가 도움이 되고, 화면의 작은 크기에서는 산세리프가 앞섭니다.
18px 미만의 웹 본문에서는 가독성 면에서 거의 항상 산세리프가 이깁니다.
텍스트 정렬
줄이 컨테이너 안에 놓이는 방식으로, 왼쪽, 가운데, 오른쪽, 양쪽 정렬이 있습니다. 거의 모든 본문에는 왼쪽 정렬이 맞습니다.
웹에서 본문을 양쪽 정렬하지 마세요. ‘리버’라고 불리는 고르지 않은 단어 간격이 생겨 읽는 흐름이 끊깁니다.
타입 스케일
제목 단계 사이의 크기 비율. 일관된 배율(1.25배, 1.414배, 1.618배)이 페이지 전체에 시각적 리듬과 조화를 만들어 냅니다.
비율 하나를 골라 일관되게 적용하세요. 제목 크기를 제멋대로 정하는 것이 아마추어 디자인에서 시각적 혼란의 가장 큰 단일 원인입니다.
대비
요소 사이의 시각적 차이로, 크기, 두께, 색, 스타일이 있습니다. 대비가 없으면 위계가 없고, 위계가 없으면 아무것도 읽히지 않습니다.
두 요소가 어느 정도 비슷해 보인다면 완전히 같게 하거나 대비를 확실하게 주세요. 어정쩡하면 실수처럼 보입니다.
읽기만 하지 말고, 느껴 보세요
위의 모든 개념에는 학습 페이지에 라이브 인터랙티브 데모가 있습니다. 트래킹과 행간 슬라이더를 끌어 보고, 세리프와 산세리프를 전환하고, 두께를 실시간으로 조절해 보세요. 타이포그래피는 읽을 때가 아니라 움직여 볼 때 이해됩니다.
Aa인터랙티브 레슨 열기 →이 원칙들을 여러분의 사이트에 적용해 줄 디자이너가 필요하신가요?
이야기해 봅시다 →About
Patrick Chen — Sublimearts.io를 만든 독립 개발자 겸 웹 디자이너. 모든 디자인 강의가 색채 이론에 2시간을 쓰면서 글꼴에는 10분만 쓰는 것이 거꾸로라고 느껴져서 타이포그래피 기초 레슨을 만들었습니다.