매장 명함에 쓰던 영문 글자체가 마음에 들어 사이트 제목에도 그대로 옮겼다. 그런데 한글 본문이 그 아래 깔리는 순간 화면이 어색해진다. 영문 제목은 세련됐는데 한글이 끼어들자 두 글자가 서로 따로 논다. 작은 회사 웹사이트에서 폰트는 단순한 디자인 취향이 아니다. 읽히는 속도, 신뢰의 인상, 페이지 로딩 시간까지 모두 폰트가 결정한다.
1. 한글이 먼저, 영문은 그 다음이다
해외 디자인 사이트를 보고 영문 폰트부터 고른 뒤 한글 폰트를 끼워 넣는 순서가 가장 흔한 실수다. 본문 99%가 한글인 사이트는 한글 가독성이 먼저다. Pretendard, Noto Sans KR, IBM Plex Sans KR 처럼 한·영을 함께 설계한 폰트를 본문에 깔고, 영문은 그 폰트의 라틴 글리프를 그대로 쓰면 줄간격과 자간이 자연스럽다. 영문 폰트를 따로 섞으면 한 줄 안에서 글자 크기가 들쭉날쭉해진다.
2. 본문은 한 가지 폰트로 통일한다
제목, 본문, 강조에 폰트를 다 다르게 쓰면 잡지처럼 보일 것 같지만, 실제 화면에서는 어수선해진다. 본문은 하나의 폰트 패밀리로 통일하고, 제목은 같은 폰트의 굵은 굵기(700~900)로 차이를 만든다. 다른 폰트를 섞고 싶다면 제목 1개, 본문 1개까지만 허용한다. 본문 폰트는 화면에서 16px 이상, 줄간격 1.6 정도가 한글 본문이 숨 쉬는 기본값이다.
3. 굵기와 명도로 위계를 만든다
같은 페이지에서 H1, H2, 본문, 캡션이 똑같은 굵기와 색으로 흘러가면 고객은 어디가 중요한지 알 수 없다. 제목은 700, 본문은 400, 보조 텍스트는 300~400에 옅은 회색으로 단계를 둬야 시선이 자연스럽게 흐른다. 굵기 단계가 둘밖에 없다면 색의 명도 차이로 위계를 보탠다. 본문 절반에 볼드를 걸어 강조하면, 강조가 아니라 노이즈가 된다.
4. 폰트 파일을 다이어트한다
한글 웹폰트 한 벌은 평균 2~5MB가 넘는다. Regular, Bold, Light를 전부 불러오면 사이트 첫 화면 로딩이 그만큼 늦어진다. woff2 포맷, 한글 서브셋, font-display: swap 세 가지를 지키면 로딩이 절반 이하로 줄어든다. 외부 CDN(Pretendard, Google Fonts)을 쓸 때도 필요한 굵기만 link 태그로 불러야 한다. 폰트 다이어트는 그대로 코어 웹 바이탈 점수와 이탈률에 직결된다.
5. 폰트 라이선스를 반드시 확인한다
'무료 폰트'라는 문구 하나만 보고 사이트에 박았다가, 몇 달 뒤 라이선스 침해 메일을 받는 사장님이 적지 않다. 웹폰트 임베딩 허용, 상업적 사용 허용, BI·로고 활용 허용 세 조건은 폰트마다 다르다. 본문 폰트는 SIL OFL 라이선스인 Pretendard, Noto Sans KR이 가장 안전하다. 유료 폰트(산돌, 윤디자인)는 사용 도메인과 트래픽에 따라 비용이 늘어날 수 있으니 계약 범위를 미리 확인해야 한다.
폰트는 디자인이 아니라 신뢰의 기본기다
고객은 '이 사이트의 폰트가 좋다'고 말하지 않는다. 다만 잘 읽히는 사이트에 더 오래 머물고, 어색한 사이트는 무의식적으로 떠난다. 한글이 먼저 읽히고, 한 폰트 안에서 위계가 잡히고, 파일이 가볍고, 라이선스가 깨끗하면 이미 90점이다. CYAN은 작은 회사 사이트를 만들 때 가장 먼저 폰트 시스템을 정한다. 글자체가 정돈되어야 그 위의 색, 여백, 컴포넌트가 비로소 제자리를 찾기 때문이다.