웹사이트를 열었을 때 고객의 눈에 가장 먼저, 그리고 가장 오래 닿는 것은 사진도 로고도 아닌 글자입니다. 화면을 채운 요소의 9할이 텍스트인데도, 많은 사장님은 색과 이미지에만 공을 들이고 글꼴은 '아무거나' 둡니다. 멋을 내려고 고른 장식적인 글꼴 때문에 정작 가격표 숫자와 소개 문장이 흐릿하게 묻히는 경우도 많습니다. 글꼴은 디자인의 장식이 아니라 정보 전달의 그릇입니다. 작은 회사 웹사이트가 신뢰감 있게 읽히도록 글꼴을 다루는 다섯 가지 원칙을 정리했습니다.
1. 글꼴은 두 종류를 넘기지 마라
초보자가 가장 많이 하는 실수가 페이지마다 다른 글꼴을 섞어 쓰는 것입니다. 글꼴이 많아질수록 화면은 산만해지고 브랜드는 어수선해 보입니다. 원칙은 단순합니다. 제목용 한 종, 본문용 한 종이면 충분합니다. 변화가 필요하면 글꼴을 바꾸는 대신 같은 글꼴의 굵기(굵게·보통·가늘게)와 크기로 차이를 줍니다. 한 가족(font family) 안에서 노는 것이 가장 안전하고 정돈돼 보입니다.
2. 본문은 '멋'이 아니라 '읽힘'이 먼저다
제목에는 개성을 줄 수 있어도, 본문은 무조건 가독성이 우선입니다. 실무에서 통하는 기준은 명확합니다. 본문 글자 크기는 모바일에서 최소 16px 이상, 줄 간격(행간)은 글자 크기의 1.6~1.8배를 줍니다. 한 줄이 너무 길면 눈이 다음 줄을 놓치므로, 한 줄은 한글 기준 25~40자 안쪽으로 끊는 것이 편안합니다. 멋있어 보이는 얇은 회색 글씨보다, 조금 투박해도 또렷하게 읽히는 글씨가 언제나 옳습니다.
3. 한글에 최적화된 웹폰트를 골라라
해외 디자인이 예뻐 보여 영문 글꼴을 그대로 가져오면, 한글이 깨지거나 어색하게 표시되는 일이 흔합니다. 한글은 영문보다 획이 많아 전용으로 설계된 글꼴이 훨씬 또렷합니다. 다행히 무료로 쓸 수 있는 좋은 한글 웹폰트가 많습니다. 프리텐다드(Pretendard), 노토 산스 KR, 본고딕 같은 산세리프(고딕) 계열은 화면에서 가독성이 뛰어나 작은 회사 사이트에 잘 맞습니다. 감성적인 브랜드라면 명조 계열을 제목에만 제한적으로 쓰는 것도 방법입니다.
4. 크기와 굵기로 '위계'를 만들어라
좋은 타이포그래피는 고객의 시선을 순서대로 안내합니다. 큰 제목 → 작은 소제목 → 본문으로 이어지는 명확한 단계가 있어야 고객이 한눈에 구조를 파악합니다. 모든 글자를 비슷한 크기로 평평하게 두면, 어디가 중요한지 알 수 없어 결국 아무것도 읽히지 않습니다. 강조는 색을 바꾸기보다 굵기를 키우는 것이 가장 깔끔합니다. 한 문단에서 빨강·파랑으로 여기저기 칠하는 강조는 오히려 신뢰감을 떨어뜨립니다.
5. 웹폰트도 결국 '속도'다
예쁜 글꼴을 욕심내 굵기를 여러 개 불러오면, 폰트 파일이 무거워져 첫 화면이 느리게 뜹니다. 글자가 로딩되기 전 빈 화면이 깜빡이면 고객은 떠납니다. 실제로 쓰는 굵기만(보통·굵게 정도) 골라서 불러오고, font-display: swap 설정으로 폰트가 늦어도 시스템 기본 글꼴이 먼저 보이게 해 두면 안전합니다. '예쁨'과 '빠름' 사이에서 작은 회사는 빠름 쪽에 무게를 두는 편이 전환에 유리합니다.
글꼴은 말투다
같은 문장도 어떤 글꼴에 담기느냐에 따라 단정하게도, 촌스럽게도 읽힙니다. 글꼴은 브랜드가 고객에게 건네는 '말투'인 셈입니다. 위 다섯 가지만 지켜도 평범한 사이트가 한결 정돈되고 믿음직해 보입니다. CYAN은 작은 회사 웹사이트를 만들 때 색과 사진만큼이나 글꼴과 본문 가독성을 꼼꼼히 다듬습니다. 화면 속 글자가 또렷하게 읽힐 때, 고객은 그 회사도 일을 꼼꼼하게 한다고 느끼기 때문입니다.