읽히는 타이포 시스템은 ‘예쁜 글자’가 아니라 타입 스케일(리듬)·폰트 선택(속도)·본문 대비(접근성)가 하나의 토큰 시스템으로 묶인 상태입니다. 한 시스템이 모든 페이지의 위계와 가독성을 같은 규칙으로 만들어, 어느 화면을 열어도 같은 리듬으로 읽히게 합니다.
요약
- 타입 스케일은 크기를 ‘임의로 찍지’ 않고 비율 하나로 묶어 전 페이지 위계를 통일한다.
- 폰트는 속도와 직결된다 — 시스템폰트는 다운로드 0, 브랜드 글꼴은 꼭 필요한 자리에만.
- 본문 대비는 측정값이다 — 4.5:1(본문)·3:1(큰 글자)을 넘겨야 실제로 읽힌다.
- 한글은 word-break:keep-all로 어절 단위 줄바꿈, 줄간격 1.6~1.75, 줄 길이 약 40ch.
한 클라이언트가 “글이 왜 이렇게 안 읽히죠?”라고 물은 적이 있습니다. 폰트도 트렌디했고, 색도 브랜드에 맞았습니다. 그런데 제목 크기가 페이지마다 미묘하게 달랐고, 본문은 연회색 글자에 회색 배경이었습니다. 문제는 ‘하나’가 아니었습니다. 스케일이 흔들렸고, 대비가 무너졌고, 둘이 서로를 보지 않고 따로 결정돼 있었습니다. 그날 저는 타이포를 ‘세 사람이 같은 표를 보고 결정하는 시스템’으로 다루기 시작했습니다.
타입 스케일은 왜 ‘비율’이어야 하나요?
크기를 손이 가는 대로 찍으면 22px·23px·24px 같은 비슷한 값이 쌓입니다. 사람 눈은 이 미세한 어긋남을 ‘설명할 수 없는 불편함’으로 느낍니다. 그래서 저는 제목부터 본문까지를 하나의 비율로 묶습니다. 슬라이더를 직접 움직여 보세요 — 비율 하나가 전체 위계를 어떻게 다시 잡는지 바로 보입니다.
비율 하나로 위계가 잡힙니다
비율 슬라이더를 움직이면 제목~본문 크기가 한 규칙으로 다시 계산됩니다.
비율이 작으면, 크면 무엇이 달라지나요?
1.2 근처에 두면 제목과 본문이 가깝게 붙어 ‘읽는 화면’이 됩니다. 약관·소개·블로그처럼 글이 많은 페이지에 좋습니다. 1.4~1.5로 키우면 제목이 본문을 압도해 ‘보는 화면’이 됩니다. 랜딩 히어로처럼 한 문장으로 시선을 잡는 자리에 씁니다. 핵심은, 같은 비율을 사이트 전체에서 쓰기 때문에 페이지가 바뀌어도 ‘같은 손이 만든 화면’으로 느껴진다는 점입니다.
폰트는 디자인 문제인가요, 속도 문제인가요?
둘 다입니다. 다만 실무에서 더 자주 발목을 잡는 건 속도 쪽입니다. 웹폰트를 무겁게 얹으면 첫 화면에서 글자가 ‘번쩍’ 바뀌거나(FOUT/FOIT), 글꼴이 내려오기 전까지 빈 화면이 보입니다. 그래서 저는 본문은 시스템폰트 스택을 기본으로 둡니다. 기기에 이미 깔린 Apple SD Gothic Neo·맑은 고딕 같은 한글 글꼴을 쓰면 다운로드가 0이라 첫 화면이 즉시 그려집니다. 브랜드 정체성이 꼭 필요한 로고·히어로 헤드라인 같은 자리에만 웹폰트를 제한적으로 씁니다. ‘멋’과 ‘빠름’ 중 하나를 버리는 게 아니라, 자리마다 다르게 결정하는 일입니다.
같은 크기인데 왜 어떤 글자는 안 읽히나요?
대비 때문입니다. 스케일이 크기를 잡고 폰트가 모양을 그려도, 글자색과 배경의 명도 차이가 부족하면 읽히지 않습니다. 디자이너 모니터에선 멀쩡해 보여도 햇빛 아래 휴대폰이나 저시력 사용자에겐 글자가 사라집니다. 그래서 저는 색을 고르면 반드시 대비를 ‘측정’합니다. 직접 해보세요 — 두 색을 골라보면 합격 여부가 즉시 나옵니다.
이 색 조합, 읽을 수 있나요?
글자색·배경색을 골라보세요. WCAG 대비 비율과 통과 여부가 즉시 나옵니다.
// 본문은 4.5:1, 큰 글자는 3:1 이상이 기준입니다.
이 검사기는 WCAG의 상대 명도 공식 그대로 계산합니다. 본문이라면 4.5:1, 24px 이상이거나 굵은 19px 이상의 큰 글자라면 3:1을 넘겨야 합니다. 흥미로운 건 스케일과 대비가 맞물린다는 점입니다 — 큰 글자는 기준이 3:1로 완화되니, 스케일에서 ‘큰 글자’로 분류된 제목은 본문보다 대비 여유가 생깁니다. 그래서 스케일·폰트·대비를 따로 보면 안 됩니다.
한글 타이포에서 꼭 챙기는 건 무엇인가요?
비율 규칙은 그대로 쓰되, 한글 본문은 16~17px에 줄간격을 1.6~1.75로 넉넉히 줍니다. 영문 기준으로 짠 줄간격을 그대로 쓰면 한글은 답답합니다. 거기에 word-break:keep-all로 어절 단위 줄바꿈을 더하면 단어가 줄 끝에서 어색하게 잘리지 않습니다. 줄 길이도 스케일의 일부입니다 — 본문 폭을 한글 35~45자(약 40ch)로 잡아야 다음 줄로 눈이 자연스럽게 돌아옵니다.
그래서 ‘한 시스템’이 무엇을 바꾸나요?
스케일·폰트·대비를 각각 토큰(변수)으로 고정하면, 클라이언트가 “전체적으로 좀 더 임팩트 있게요”라고 했을 때 손볼 곳이 한 군데입니다. 비율 변수 하나, 폰트 스택 하나, 대비 기준 하나. 이 셋이 전 페이지에 같은 규칙으로 적용되기 때문에 어느 화면을 열어도 같은 리듬으로 읽히고, 수정도 한 번에 끝납니다. 일관성은 솜씨가 아니라 ‘시스템’에서 나옵니다.
이 작품에 들어간 기술
이 글의 두 위젯과 주제는 Findable이 실제로 쓰는 작업의 일부입니다. 더 깊은 실무 노트는 아래 실존 문서에서 볼 수 있습니다.
- 타입 스케일 — 타입 스케일 담당자의 모듈러 스케일 노트, 웹 타이포그래피 가이드
- 폰트 선택 — 시스템폰트 스택 노트, 가변 폰트 노트
- 본문 대비 — 컬러 담당자의 명도 대비 노트, 접근성, 모두를 위한 화면
이 타이포 시스템을 담당별로 분해하면, 셋이 어떻게 한 시스템으로 묶이는지 보입니다.
| 담당 | 이 모듈에서 한 일 |
|---|---|
| 타입 스케일 | 비율 슬라이더 하나로 제목~본문 크기를 한 규칙으로 다시 계산해 위계를 통일 |
| 폰트 선택 | 본문은 시스템폰트 스택(다운로드 0)으로 첫 화면을 즉시 그리고 웹폰트는 자리 한정 |
| 본문 대비 | WCAG 상대 명도 공식으로 4.5:1·3:1 통과를 즉시 검사해 실제로 읽히는지 보장 |
| 한글 조판 | word-break:keep-all 어절 줄바꿈, 줄간격 1.6~1.75, 줄 길이 약 40ch를 맞춤 |
그래서 이 한 시스템에 실제로 들어간 기술은 다음과 같습니다.
| 항목 | 제각각 폰트 크기 | 타입 시스템 |
|---|---|---|
| 가독성 | 크기·대비 들쭉날쭉 → 일부 안 읽힘 | 스케일·대비 기준 통과로 읽힘 보장 |
| 일관성 | 페이지마다 위계가 어긋남 | 한 비율로 전 페이지 같은 리듬 |
| 신뢰 | ‘대충 만든 곳’ 인상 → 이탈 | 정돈된 화면이 첫인상 신뢰를 만듦 |
| 수정 | 곳곳을 일일이 손봄 | 토큰 한 곳만 바꾸면 전체 반영 |
타입 스케일은 왜 임의로 크기를 정하지 않고 비율로 묶나요?
웹폰트 대신 시스템폰트를 쓰면 디자인이 떨어지지 않나요?
본문 명도 대비 4.5:1은 왜 지켜야 하나요?
한글 사이트에서 줄바꿈은 어떻게 처리하나요?
타입 스케일·폰트·대비를 따로 정하면 안 되나요?
타입 스케일 담당자의 모듈러 스케일 노트
비율 하나로 잡는 위계.
시스템폰트 스택 노트
다운로드 0으로 빠른 첫 화면.
컬러 담당자의 명도 대비 노트
색이 안 보여도 읽히는 화면.
이 글의 모듈러 스케일 슬라이더와 명도 대비 검사기는 이 페이지에서 실제로 동작하는 코드입니다(대비는 WCAG 상대 명도 공식 그대로 계산, 외부 라이브러리 0). 가독성·신뢰 관련 서술은 일반 원칙이며 특정 성과를 보장하지 않습니다. 날조된 사례·수치는 사용하지 않았습니다.