서체 하나 고르는 데, 반나절을 씁니다.

입사 두 해째 어느 회의에서, 저는 제목 글자 크기를 두고 한 시간을 썼습니다. 정확히는 1px이었습니다. 33px이냐 34px이냐. 다들 “그게 뭐가 달라요”라고 했지만, 제 눈엔 33px에서 제목이 본문 옆에 묻혀 보였습니다. 34px로 올리고 굵기를 한 단계 더 주니, 그제야 화면을 열자마자 ‘여기를 먼저 봐’가 읽혔습니다. 그날 이후로 저는 글자를 ‘모양’이 아니라 ‘읽는 순서를 정하는 장치’로 봅니다.

그래서, 직접 움직여 보세요

말로 설명하는 것보다 한 번 만져보는 게 빠릅니다. 아래 슬라이더로 크기·굵기·자간·행간을 바꿔 보세요. 같은 문장이 어떻게 다르게 ‘읽히는지’ 바로 느껴집니다.

위계: 무엇을 먼저 읽게 만들 것인가

화면을 열었을 때 사람의 눈은 가장 크고 굵은 글자로 먼저 갑니다. 그러니 위계는 ‘크기 대비’와 ‘굵기 대비’ 두 손잡이로 만듭니다. 본문이 16px이면 소제목은 20~24px, 큰 제목은 32px 이상으로 단계를 띄웁니다. 위 슬라이더에서 굵기를 300으로 내려 보세요. 크기가 같아도 제목 같은 무게가 사라집니다. 반대로 800까지 올리면, 작은 크기에서도 ‘여기가 제목이구나’가 읽힙니다. 위계는 글꼴 종류가 아니라 이 대비에서 나옵니다.

제가 본문 16px을 기준으로 잡는 위계의 ‘기본 한 벌’입니다 — 크기와 굵기를 짝지어 단계를 띄웁니다.

웹폰트 0 — 위 네 단계 모두 기기에 이미 깔린 시스템 폰트만으로 위계가 섭니다.

가독성: 끝까지 읽히게 만드는 세 가지

읽기 편함은 멋과 다른 문제입니다. 첫째, 줄 길이. 본문 한 줄은 한글 기준 45~75자가 편합니다. 너무 길면 다음 줄 첫 글자를 놓치고, 너무 짧으면 시선이 계속 줄을 바꿔 피곤합니다. 저는 본문 영역에 max-width를 ch 단위로 잡아 글자 수 기준으로 줄을 고정합니다. 둘째, 행간. 본문 행간은 글자 크기의 1.6~1.8배가 편합니다. 위 슬라이더의 행간을 100까지 내려 보세요. 줄이 서로 붙어 답답해집니다. 셋째, 자간. 큰 제목은 자간을 살짝 좁혀(-2 정도) 단단해 보이게 하고, 작은 본문은 0에 가깝게 둡니다. 제목에서 통하는 좁은 자간을 본문에 그대로 쓰면 오히려 빽빽해집니다.

한글 줄바꿈: 단어를 두 동강 내지 마세요

웹 기본값은 글자가 화면 끝에 닿으면 단어 중간이라도 줄을 바꿉니다. 영어는 그래도 괜찮지만, 한글은 한 어절이 두 줄로 쪼개지면 읽기 흐름이 뚝 끊깁니다. 그래서 저는 한글 사이트에 word-break:keep-all을 기본으로 줍니다. 그러면 띄어쓰기(어절) 단위로 줄이 바뀌어, 단어가 통째로 한 줄 안에 남습니다. 특히 제목처럼 한 덩어리로 보여야 할 곳에서 이 한 줄이 인상을 크게 바꿉니다.

속도: 웹폰트 0으로도 충분합니다

예쁜 글꼴을 쓰려고 웹폰트를 부르면, 사용자는 그 파일을 내려받아야 글자를 봅니다. 그 사이 글자가 안 보이거나(텅 빈 화면), 기본 글꼴로 떴다가 늦게 바뀌며 깜빡입니다(레이아웃이 출렁입니다). 저는 가능하면 시스템 폰트(기기에 이미 깔린 글꼴)만 씁니다. 내려받을 파일이 없으니 글자가 즉시 뜨고, 깜빡임도 없습니다. 위 데모도 시스템 폰트 하나로 위계와 리듬을 다 만들었습니다. 브랜드상 꼭 필요할 때만 한 종을 골라 무게를 줄여 씁니다.

가변 타이포: 화면 크기에 따라 글자도 숨 쉽니다

PC에서 딱 맞는 제목 크기가 모바일에선 화면을 뚫고 나갑니다. 그렇다고 단계마다 일일이 크기를 바꿔 적으면 코드가 지저분해집니다. 저는 CSS clamp()로 ‘최소–선호–최대’ 크기를 한 줄에 적습니다. 그러면 화면이 작을 땐 작게, 클 땐 크게, 그 사이는 부드럽게 자동으로 따라옵니다. 사용자는 어떤 기기에서도 적당한 크기로 글을 읽고, 저는 줄 하나로 관리합니다.

본문 대비: 회색이 멋있다는 함정

연한 회색 본문은 화면에선 세련돼 보입니다. 하지만 밝은 곳에서, 또는 시력이 약한 분에게는 글자가 배경에 묻혀 읽히지 않습니다. 저는 본문 글자색과 배경색의 명도 차이를 충분히 둡니다(본문 기준 명도 대비 4.5:1 이상). 멋을 위해 대비를 깎는 순간, 글은 ‘보이긴 하는데 안 읽히는’ 상태가 됩니다. 타이포의 마지막 점검은 늘 ‘이게 실제로 읽히나’입니다.

타이포는 혼자 살 수 없습니다 — 다른 담당자와의 연결

글자를 아무리 잘 다뤄도, 그 글자가 담을 문장이 약하면 타이포는 살지 않습니다. 좋은 헤드라인이 있어야 큰 글자가 빛납니다 — 카피를 어떻게 쓰는지는 헤드라인 담당자의 노트에 적었습니다. 그리고 제가 시스템 폰트를 고집하는 진짜 이유, 즉 웹폰트 대신 시스템 폰트로 성능을 지키는 이야기는 속도 담당자의 노트와 한 몸입니다. 마지막으로 아무리 위계를 잘 짜도 색 대비가 약하면 본문은 안 읽힙니다 — 색이 가독성을 어떻게 좌우하는지는 색 담당자의 노트에서 다룹니다. 타이포는 카피·성능·색과 함께 갈 때만 제값을 합니다.