홈페이지를 새로 단장할 때 사장님들이 가장 오래 고민하는 건 대개 색과 사진입니다. 그런데 정작 손님이 화면에서 마주하는 시간의 대부분은 '글자를 읽는 시간'입니다. 아무리 근사한 디자인이라도 본문이 빽빽하고 읽기 불편하면, 손님은 소개글 두 줄을 넘기지 못하고 창을 닫습니다. 타이포그래피는 멋을 부리는 기술이 아니라, 손님이 우리 이야기를 끝까지 읽게 만드는 설계입니다. 작은 회사 웹사이트가 지켜야 할 다섯 가지 원칙을 정리했습니다.
1. 본문 글자는 16px부터 시작한다
디자인 시안을 큰 모니터로만 확인하면 글자가 충분히 커 보이지만, 손님 열에 일곱은 손바닥만 한 휴대폰으로 들어옵니다. 본문 글자 크기는 최소 16px을 기준으로 잡아야 손가락으로 화면을 벌리지 않고도 읽힙니다. 12~13px의 작은 글씨는 '정보가 많아 보이는' 착시를 줄 뿐, 실제로는 읽기를 포기하게 만듭니다. 나이 든 손님이 많은 업종이라면 17~18px까지 올리는 편이 안전합니다.
2. 줄 간격과 한 줄 길이로 '숨 쉴 틈'을 만든다
같은 글이라도 줄과 줄이 붙어 있으면 눈이 다음 줄을 놓치고, 한 줄이 너무 길면 시선이 되돌아올 자리를 잃습니다. 두 가지만 기억하면 됩니다.
- 줄 간격(행간)은 글자 크기의 1.6배 안팎이 편안합니다. 16px 본문이라면 26px 정도입니다.
- 한 줄 길이는 한글 기준 25~40자에서 가장 잘 읽힙니다. 넓은 화면에서 본문이 끝까지 늘어나지 않도록 폭을 제한하세요.
3. 글꼴은 두 종류를 넘기지 않는다
글꼴을 많이 쓸수록 세련되어 보일 것 같지만, 실제로는 화면이 산만해지고 브랜드의 인상이 흐려집니다. 제목용 한 벌, 본문용 한 벌이면 충분합니다. 오히려 하나의 글꼴에서 굵기(Regular·Bold)만 나눠 써도 깔끔한 위계가 잡힙니다. 본문에는 화면에서 검증된 고딕 계열(예: 프리텐다드, 노토 산스)을 쓰는 편이 가독성 면에서 안전합니다.
웹폰트는 '무게'도 함께 본다
예쁜 웹폰트를 여러 굵기로 잔뜩 불러오면 페이지 로딩이 느려집니다. 실제로 쓰는 굵기만 골라 불러오고, 글꼴이 뜨기 전 잠깐 기본 글씨로 먼저 보여 주는 설정(font-display)을 해 두면 손님이 흰 화면을 기다리지 않습니다.
4. 대비를 확보해 '연한 회색' 함정을 피한다
흰 배경 위 연한 회색 글씨는 시안에서는 감각적으로 보여도, 밝은 야외나 오래된 화면에서는 거의 읽히지 않습니다. 본문 글자는 배경과 충분한 명도 대비를 확보해야 합니다. 멋을 위해 회색을 쓰고 싶다면 안내 문구 같은 보조 텍스트에만 제한적으로 쓰고, 정작 읽어야 할 본문은 진한 색으로 또렷하게 두세요.
5. 크기 차이로 '훑어 읽기'를 돕는다
손님은 글을 처음부터 정독하지 않습니다. 제목과 소제목을 먼저 훑어보며 '내게 필요한 내용인지'를 판단하죠. 그래서 제목·소제목·본문의 크기 차이를 분명하게 벌려야 합니다. 크기가 엇비슷하면 어디가 중요한지 알 수 없어 눈이 길을 잃습니다. 제목은 확실히 크게, 본문은 편안하게, 보조 설명은 한 단계 작게 — 이 세 층위만 지켜도 페이지가 저절로 정돈됩니다.
읽히는 글자가 결국 문의로 이어진다
타이포그래피는 눈에 띄지 않아야 잘된 설계입니다. 손님이 '글씨가 참 예쁘다'가 아니라 '읽다 보니 어느새 문의 버튼 앞이더라'가 되게 하는 것, 그게 목표입니다. CYAN 에이전시는 작은 회사 웹사이트를 만들 때 색과 사진만큼이나 글자 하나하나의 크기와 간격을 손봅니다. 우리 홈페이지의 소개글이 두 줄을 넘기지 못하고 있다면, 글꼴부터 다시 살펴볼 때입니다.
