왜 타이포그래피가 중요한가
웹사이트에서 사용자가 가장 많이 접하는 요소는 이미지가 아니라 텍스트입니다. 서비스 설명, 버튼 문구, 가격 안내까지 — 방문자가 의사결정을 내리는 거의 모든 순간에 글자가 관여합니다. 그런데 많은 사이트가 텍스트의 내용에만 신경 쓰고, 그것이 어떻게 보이는지는 간과합니다. 타이포그래피는 단순한 꾸밈이 아니라, 브랜드의 성격을 전달하고 사용자의 행동을 유도하는 핵심 설계 요소입니다.
서체 선택이 곧 브랜드 포지셔닝이다
세리프(명조) 계열 서체는 전통, 권위, 신뢰의 느낌을 줍니다. 법률 사무소나 금융 기관 사이트에서 세리프를 자주 볼 수 있는 이유입니다. 반면 산세리프(고딕) 계열은 현대적이고 깔끔한 인상을 주어 테크 기업이나 스타트업에 잘 어울립니다. 최근에는 Pretendard, SUIT 같은 한글 웹폰트가 등장하면서 한국어 사이트에서도 서체만으로 브랜드 개성을 표현할 수 있는 폭이 넓어졌습니다.
핵심은 서체를 2~3개 이내로 제한하는 것입니다. 제목용 서체 하나, 본문용 서체 하나면 충분합니다. 서체가 많아지면 시각적 일관성이 무너지고, 사용자는 무의식적으로 산만함을 느낍니다.
크기와 위계 — 눈이 자연스럽게 흐르게 하라
타이포그래피에서 가장 실용적인 원칙은 시각적 위계(Visual Hierarchy)입니다. 제목은 크고 굵게, 소제목은 중간, 본문은 읽기 편한 크기로 설정하면 사용자의 시선이 자연스럽게 중요한 정보를 먼저 훑게 됩니다.
실무에서 검증된 기본값은 본문 16~18px, 소제목 20~24px, 대제목 28~36px 정도입니다. 모바일에서는 본문 16px 미만으로 내려가면 가독성이 급격히 떨어지므로, 반응형 설계 시 최소 크기를 반드시 확인해야 합니다. 클램프(clamp) 함수를 활용하면 화면 크기에 따라 글자 크기가 자연스럽게 조절됩니다.
행간과 자간 — 보이지 않지만 결정적인 디테일
같은 서체, 같은 크기라도 행간(line-height)과 자간(letter-spacing)에 따라 가독성이 크게 달라집니다. 한글 본문의 경우 행간 1.6~1.8배가 가장 읽기 편하다는 것이 실무의 정설입니다. 영문은 1.4~1.6배가 적당합니다.
자간은 한글에서 특히 주의가 필요합니다. 영문 서체는 기본 자간이 잘 설계되어 있지만, 한글은 서체마다 편차가 커서 -0.01em에서 0.02em 사이에서 미세 조정하면 훨씬 세련된 느낌을 줄 수 있습니다. 특히 대제목에서 자간을 약간 좁히면 응집력 있는 인상을 만들 수 있습니다.
웹폰트 성능 — 아름다운 글꼴도 느리면 의미 없다
웹폰트는 추가 네트워크 요청을 발생시킵니다. Google Fonts를 사용하든 셀프 호스팅을 하든, font-display: swap 설정은 필수입니다. 이 한 줄이 폰트 로딩 중 텍스트가 보이지 않는 FOIT(Flash of Invisible Text) 현상을 방지합니다. 또한 사용하지 않는 글자를 제거하는 서브셋팅(subsetting)을 적용하면 폰트 파일 크기를 절반 이하로 줄일 수 있습니다. 한글은 글자 수가 많아 이 최적화의 효과가 특히 큽니다.
타이포그래피 체크리스트
프로젝트를 마무리할 때 다음 항목을 점검해 보세요. 서체가 브랜드 톤과 일치하는지, 위계가 명확하게 구분되는지, 모바일에서 본문이 16px 이상인지, 행간이 1.6배 이상인지, 웹폰트에 font-display: swap이 적용되어 있는지 확인합니다. 이 다섯 가지만 챙겨도 사이트의 전체적인 완성도가 눈에 띄게 달라집니다.
CYAN에서는 모든 프로젝트의 초기 설계 단계에서 서체 시스템을 먼저 정의합니다. 글꼴 하나를 고르는 일이 사소해 보일 수 있지만, 그 선택이 브랜드의 첫인상을 결정한다는 것을 수많은 프로젝트를 통해 확인했기 때문입니다.