왜 타이포그래피가 중요한가
웹사이트를 처음 방문했을 때 가장 먼저 눈에 들어오는 것은 이미지가 아니라 텍스트입니다. 방문자는 평균 0.05초 만에 사이트의 첫인상을 형성하는데, 이 짧은 순간에 글꼴의 크기, 굵기, 간격이 "전문적인 곳" 또는 "아마추어 같은 곳"이라는 판단을 만들어냅니다. 컬러와 레이아웃이 분위기를 만든다면, 타이포그래피는 신뢰를 만듭니다.
웹폰트 선택의 기본 원칙
수천 가지 폰트 중에서 고르기 막막하다면 세 가지 질문부터 시작하세요.
- 브랜드 성격과 맞는가? 법률 사무소에 둥글둥글한 손글씨체는 어울리지 않고, 키즈 브랜드에 딱딱한 세리프체는 차갑게 느껴집니다. 업종과 타깃 고객의 기대에 맞는 서체를 먼저 좁혀야 합니다.
- 한글 지원이 충분한가? 영문 폰트는 선택지가 넓지만, 한글은 11,172자를 모두 포함해야 하므로 파일 크기가 크고 선택지도 제한적입니다. Google Fonts의 Noto Sans KR, Pretendard, Wanted Sans 등 서브셋 최적화가 잘 된 폰트를 우선 검토하세요.
- 가독성이 검증되었는가? 모바일 화면에서 본문 14~16px 크기로 긴 문장을 읽어보세요. 데스크톱에서 예뻐 보이던 폰트가 작은 화면에서는 뭉개지거나 답답해 보일 수 있습니다.
본문과 제목, 서체를 나눠야 할까
한 사이트에 폰트를 하나만 쓰면 통일감은 있지만 단조로워지고, 세 개 이상 쓰면 산만해집니다. 실무에서 가장 많이 쓰이는 조합은 제목용 1종 + 본문용 1종입니다. 예를 들어 제목에는 개성이 강한 산세리프를, 본문에는 가독성 높은 고딕체를 쓰는 식이죠. 두 폰트의 x-height(소문자 높이)가 비슷하면 크기가 달라도 시각적으로 자연스럽게 어울립니다.
줄간격과 자간, 숫자가 만드는 차이
폰트를 잘 골랐어도 줄간격(line-height)과 자간(letter-spacing) 설정을 놓치면 읽기 불편한 페이지가 됩니다. 한글 본문의 경우 줄간격은 글꼴 크기의 1.6~1.8배가 편안하고, 자간은 -0.01em~0.02em 사이가 적당합니다. 제목은 글자가 크기 때문에 줄간격을 1.2~1.3배로 좁히고, 자간도 약간 타이트하게(-0.02em) 잡으면 힘 있는 인상을 줄 수 있습니다. 이 수치들은 작아 보이지만, 적용 전후를 비교하면 페이지의 "숨 쉬는 느낌"이 확연히 달라집니다.
성능까지 생각하는 타이포그래피
아무리 좋은 서체도 로딩이 느리면 방문자가 깨진 기본 폰트를 먼저 보게 됩니다. 웹폰트 최적화의 핵심은 세 가지입니다. 첫째, WOFF2 포맷을 사용하세요. 같은 폰트라도 TTF 대비 30~50% 작습니다. 둘째, font-display: swap을 지정하면 폰트 로딩 중에도 텍스트가 먼저 보이므로 사용자 경험이 좋아집니다. 셋째, 한글 폰트는 유니코드 서브셋으로 필요한 글자만 잘라서 제공하면 파일 크기를 70% 이상 줄일 수 있습니다.
작은 디테일이 전체 인상을 바꾼다
타이포그래피는 화려한 애니메이션이나 3D 효과처럼 눈에 띄는 요소가 아닙니다. 하지만 방문자가 "이 사이트는 왠지 깔끔하고 믿음직하다"고 느끼는 이유의 상당 부분이 바로 글꼴, 크기, 간격의 조화에서 옵니다. CYAN에서 클라이언트 프로젝트를 진행할 때도 타이포그래피 시스템은 가장 먼저 잡는 기초 설계 중 하나입니다. 사소해 보이는 글꼴 선택 하나가 사이트 전체의 완성도를 좌우한다는 것을, 수많은 프로젝트를 거치며 체감하고 있습니다.