디자인을 새로 맡기면 사장님들은 대개 색과 사진에만 눈이 간다. 그런데 손님이 화면에서 실제로 하는 일은 하나다. 글자를 읽는 것. 아무리 예쁜 사진을 깔아도, 본문 글자가 작고 다닥다닥 붙어 있으면 손님은 두 문단을 채 못 넘기고 눈이 뻑뻑해져 창을 닫는다. 타이포그래피는 취향의 문제가 아니라 '읽히느냐 마느냐'의 문제다. 작은 회사 웹사이트가 지켜야 할 다섯 가지를 정리했다.
1. 본문은 16px부터 시작한다
화면을 만드는 사람은 코드를 큰 모니터로 코앞에서 본다. 그래서 자꾸 글자를 줄이고 싶어진다. 작을수록 세련돼 보인다는 착각이다. 하지만 손님은 작은 휴대폰을, 그것도 팔을 뻗은 거리에서 본다.
본문 글자는 최소 16px이 기준이다. 그 아래로 내려가면 모바일 브라우저가 확대·축소를 강제하기도 하고, 나이가 조금 있는 손님은 아예 읽기를 포기한다. 부가 설명이나 각주도 14px 밑으로는 내리지 않는 것이 안전하다.
2. 줄간격과 줄길이로 '숨 쉴 공간'을 준다
글자 크기만큼 중요한 것이 글자 사이의 여백이다. 본문 줄간격(line-height)은 1.6~1.8이 읽기 편하다. 줄과 줄이 붙어 있으면 눈이 다음 줄 첫 글자를 못 찾고 헤맨다.
한 줄의 길이도 관리해야 한다. PC 화면에서 글이 끝에서 끝까지 꽉 차면 눈동자가 한 줄을 따라가느라 지친다. 한 줄에 한글 기준 25~40자 정도로 본문 폭을 제한하면 훨씬 편하게 읽힌다.
3. 글꼴은 두 벌이면 충분하다
멋을 낸다고 제목·본문·버튼에 저마다 다른 글꼴을 쓰면, 화면은 전단지처럼 어수선해지고 브랜드는 오히려 싸구려로 보인다. 원칙은 단순하다. 제목용 하나, 본문용 하나. 이 두 벌 안에서 크기와 굵기만 바꿔 변화를 준다.
많은 경우 잘 만든 본문 글꼴 하나로 제목까지 소화할 수 있다. 글꼴 수를 늘리기 전에, 굵기와 크기로 먼저 표현할 수 있는지부터 따져보는 편이 낫다.
4. 한글 웹폰트는 '무게'를 따진다
한글은 글자 수가 많아 웹폰트 파일이 영문보다 훨씬 무겁다. 예쁘다고 굵기별로 대여섯 종을 다 불러오면, 첫 화면이 뜨기도 전에 글자가 깜빡이거나 로딩이 늘어진다.
Pretendard처럼 웹에 최적화된 경량 한글 글꼴을 쓰거나, 실제로 화면에 쓰는 굵기(예: 400·700)만 골라 불러오는 것이 좋다. 필요하면 서브셋으로 자주 쓰는 글자만 담아 용량을 더 줄인다. font-display: swap을 지정하면 폰트가 늦게 와도 손님은 기본 글꼴로 먼저 글을 읽을 수 있다.
5. 위계로 손님이 갈 길을 낸다
좋은 타이포그래피는 손님에게 '무엇을 먼저, 무엇을 나중에 읽으라'고 길을 놓아준다. 큰 제목, 중간 소제목, 본문, 부가 설명이 크기와 굵기에서 뚜렷하게 차이가 나야 한다.
모든 글자가 비슷한 크기·굵기면 손님은 어디부터 봐야 할지 몰라 눈이 지친다. 반대로 단계마다 대비를 분명히 두면, 훑기만 해도 이 페이지가 무슨 이야기를 하는지 3초 만에 파악된다.
결국, 읽기 쉬운 화면이 신뢰를 만든다
손님은 글자가 편하게 읽히는 것을 '이 회사는 꼼꼼하다'로 받아들인다. 타이포그래피는 눈에 잘 안 띄지만, 안 지키면 반드시 티가 나는 기본기다. CYAN은 작은 회사 웹사이트를 만들 때 색과 사진만큼이나 글자가 읽히는가를 먼저 챙긴다. 화면이 화려한지보다, 손님이 끝까지 읽고 문의 버튼까지 닿는지가 훨씬 중요하기 때문이다.
