홈페이지에 들어온 손님은 문장을 감상하러 온 것이 아닙니다. '여기가 내가 찾던 곳이 맞나', '얼마인가', '어떻게 연락하나' 같은 답을 찾으러 왔습니다. 그런데 화면을 열자마자 작고 빽빽한 글자가 벽처럼 서 있으면, 손님은 그 벽을 넘어 답을 파낼 만큼 인내심이 많지 않습니다. 눈이 아프면 그냥 뒤로 가기를 누릅니다.
타이포그래피는 흔히 '예쁜 글꼴 고르기'로 오해받지만, 실무에서 훨씬 중요한 것은 글자를 읽기 쉽게 배치하는 일입니다. 글꼴은 그대로 두더라도 크기와 간격만 손보면 같은 페이지가 전혀 다르게 읽힙니다. 작은 회사 웹사이트가 지켜야 할 다섯 가지를 정리했습니다.
1. 본문은 16px 이상, 모바일에서도 줄이지 않는다
디자인 화면에서는 14px 글씨가 깔끔해 보이지만, 실제 손님의 절반 이상은 휴대폰으로 접속하고 그중 상당수는 노안이 시작된 40~60대입니다. 본문 글자는 최소 16px을 기준으로 삼고, 중요한 안내문은 17~18px까지 키워도 좋습니다.
흔한 실수는 모바일에서 '글자가 커 보인다'며 크기를 줄이는 것입니다. 화면이 작아질수록 글자는 오히려 유지하거나 키워야 읽힙니다. 화면 폭이 좁아지면 크기가 아니라 한 줄에 담기는 글자 수가 줄어드는 것이 정상입니다.
2. 줄 간격은 글자 크기의 1.6배 안팎으로 벌린다
가독성을 가장 크게 좌우하는 것은 글꼴이 아니라 줄 간격(line-height)입니다. 줄과 줄이 붙어 있으면 눈이 다음 줄을 찾다가 길을 잃고, 한 문단이 통째로 '글자 덩어리'로 보입니다.
본문은 글자 크기의 1.6~1.8배(CSS로는 line-height: 1.7 정도)를 권합니다. 특히 한글은 받침이 있어 알파벳보다 글자 높이가 크므로, 영문 기준보다 조금 더 넉넉하게 벌려야 숨이 트입니다. 제목처럼 짧은 문구는 1.2~1.3으로 좁혀 덩어리감을 주면 대비가 살아납니다.
3. 한 줄의 길이를 제한한다
넓은 화면에서 본문이 좌우 끝까지 꽉 차면, 한 줄이 너무 길어 눈이 다음 줄 첫머리로 돌아오다 지칩니다. 읽기 편한 한 줄 길이는 한글 기준 25~40자 정도입니다.
PC 화면에서 본문 영역의 최대 폭을 700~800px 안팎으로 묶어 두면, 글이 자연스럽게 읽기 좋은 폭으로 정돈됩니다. 정보를 한 화면에 최대한 넣으려고 본문을 화면 끝까지 늘리는 것은, 손님의 눈을 위해서라면 오히려 손해입니다.
4. 글자 크기의 단계로 위계를 만든다
손님은 문서를 처음부터 끝까지 읽지 않고 훑어봅니다. 제목만 눈으로 따라가다 필요한 대목에서 멈추죠. 그래서 제목과 본문의 크기 차이가 뚜렷해야 합니다.
큰 제목, 소제목, 본문, 부가 설명이 각각 명확히 다른 크기와 굵기를 가져야 손님이 구조를 한눈에 잡습니다. 흔한 실수는 강조하고 싶은 마음에 여기저기 굵게·빨갛게·크게를 남발하는 것인데, 다 강조하면 아무것도 강조되지 않습니다. 한 화면에 진짜 강조는 한두 곳이면 충분합니다.
5. 글자색과 배경의 대비를 확보한다
연한 회색 글씨가 흰 배경 위에 얹힌 화면은 세련돼 보이지만, 밝은 야외에서 휴대폰을 보는 손님에게는 거의 읽히지 않습니다. 본문 글자는 순검정까지는 아니어도 충분히 진한 색이어야 합니다.
웹 접근성 기준(WCAG)은 본문 글자와 배경의 명도 대비를 4.5대 1 이상으로 권합니다. 온라인 대비 검사 도구에 색상값 두 개를 넣으면 통과 여부를 바로 확인할 수 있으니, 디자인을 확정하기 전에 한 번 점검해 두면 좋습니다.
글꼴보다 배치가 먼저입니다
정리하면 좋은 타이포그래피는 특별한 글꼴에서 나오지 않습니다. 충분한 크기, 넉넉한 줄 간격, 알맞은 줄 길이, 뚜렷한 위계, 확실한 대비—이 다섯 가지만 지켜도 기본 글꼴 그대로 읽기 편한 화면이 됩니다. 오늘 만든 홈페이지를 휴대폰으로 열어 팔 하나 뻗은 거리에서 본문이 편히 읽히는지 확인해 보세요. 눈이 찡그려진다면 손볼 곳이 있는 것입니다.
CYAN 에이전시는 홈페이지를 만들 때 글꼴을 고르는 일보다 손님의 눈이 지치지 않고 원하는 답에 닿게 하는 일을 먼저 생각합니다. 예쁘기만 한 화면이 아니라, 끝까지 읽히고 그래서 문의로 이어지는 화면을 함께 설계해 드립니다.
