웹사이트에 들이는 공은 대개 색과 사진, 버튼 모양에 쏠립니다. 그런데 정작 손님이 화면에서 가장 오래 마주하는 건 글자입니다. 같은 문장이라도 어떻게 배치하느냐에 따라 술술 읽히기도 하고, 첫 줄에서 막혀 그대로 창이 닫히기도 합니다. 글꼴을 멋진 것으로 바꾸기 전에, 읽기의 기본부터 손보는 5가지 원칙을 정리했습니다.
1. 본문 글자는 16px 이상으로 키운다
디자이너의 큰 모니터에서 보기 좋은 크기와, 손님이 손에 쥔 휴대폰에서 읽기 편한 크기는 다릅니다. 본문 글자가 14px 이하로 작으면 어르신 손님은 돋보기를 찾고, 대부분의 손님은 무의식적으로 화면을 확대하다 지칩니다. 본문은 16px를 최소 기준으로 잡고, 모바일에서도 그 이하로 줄어들지 않게 합니다. 글자가 충분히 커야 비로소 글을 '읽을지 말지'가 아니라 '무슨 내용인지'를 고민하게 됩니다.
2. 줄 간격은 글자 크기의 1.5배 이상으로 벌린다
줄과 줄이 붙어 있으면 눈이 다음 줄을 찾지 못하고 같은 줄을 두 번 읽게 됩니다. 문단이 한 덩어리처럼 빽빽해 보이는 가장 큰 이유가 바로 좁은 줄 간격입니다. 본문 줄 간격(행간)은 글자 크기의 1.5~1.7배가 편안합니다. 16px 글자라면 줄 간격은 24~27px 안팎입니다. 줄 사이에 숨 쉴 틈이 생기면, 같은 분량의 글도 한결 가볍게 읽힙니다.
3. 한 줄에 들어가는 글자 수를 제한한다
화면이 넓다고 글을 가로로 끝까지 펼치면, 한 줄이 너무 길어 눈이 줄 끝에서 다음 줄 앞으로 돌아오다 길을 잃습니다. 한글은 한 줄에 25~40자 안팎이 읽기 좋습니다. 본문 영역의 최대 너비를 정해 두고(보통 600~720px), 그 안에서 글이 자연스럽게 줄바꿈되게 하면 됩니다. 줄이 짧아지면 신문 칼럼처럼 눈이 리듬을 타고 아래로 내려갑니다.
4. 글꼴은 두 종류를 넘기지 않는다
예쁜 글꼴을 발견할 때마다 하나씩 더하면, 화면은 금세 어수선해지고 신뢰감이 떨어집니다. 제목용 한 가지, 본문용 한 가지면 충분합니다. 사실 좋은 글꼴 하나로 제목은 굵게, 본문은 보통 굵기로 쓰는 것만으로도 위계는 충분히 만들어집니다. 글꼴 수를 줄일수록 화면은 정돈되고, 브랜드의 인상도 또렷해집니다.
5. 크기와 굵기의 대비로 '훑어보기'를 돕는다
손님은 글을 처음부터 끝까지 읽지 않습니다. 먼저 화면을 훑으며 자기에게 필요한 곳을 찾습니다. 제목과 본문, 강조와 일반 글이 크기·굵기에서 또렷이 차이 나야 이 훑어보기가 가능합니다. 제목은 본문보다 확실히 크고 굵게, 핵심 문구만 골라 강조하세요. 모든 것을 강조하면 아무것도 강조되지 않습니다. 위계가 분명할수록 손님은 3초 안에 '여기 내가 찾던 게 있다'고 판단합니다.
글자가 읽히면, 내용이 일을 시작합니다
타이포그래피는 멋을 부리는 일이 아니라, 정성껏 쓴 글이 손님에게 가닿게 하는 다리입니다. 크기를 키우고, 줄 간격을 벌리고, 줄 길이를 줄이는 작은 조정만으로도 같은 글이 전혀 다르게 읽힙니다. CYAN 에이전시는 작은 회사의 웹사이트를 만들 때 화려한 글꼴보다 먼저 '이 글이 휴대폰에서 편히 읽히는가'를 기준으로 삼습니다. 손님이 글을 끝까지 읽어야, 그 글이 비로소 문의로 이어지기 때문입니다.