폰트 2개로 끝내는 타이포그래피: 본문·제목 조합과 크기 스케일 정하기

폰트는 많이 쓸수록 어려워진다

1인 빌더가 제품을 만들 때 타이포그래피까지 깊게 파고들기는 어렵습니다. 그래서 처음에는 폰트 2개만 정하는 편이 실용적입니다. 하나는 본문용, 하나는 제목용입니다. 버튼, 메뉴, 카드 설명, 도움말까지 모두 이 두 폰트 안에서 해결하면 화면이 덜 흔들리고 CSS도 단순해집니다.

좋은 타이포그래피의 목표는 “멋있어 보이기”보다 “읽고 판단하기 쉽게 만들기”에 가깝습니다. 특히 SaaS, 생산성 도구, 개발자용 제품은 긴 설명보다 가격, 기능, 상태, 오류 메시지를 빠르게 읽는 일이 많습니다. 폰트 선택도 이 흐름에 맞춰야 합니다.

본문 폰트는 개성보다 가독성

본문 폰트는 오래 읽어도 피로가 적어야 합니다. 한글은 획이 많고 글자 폭이 촘촘하기 때문에 얇은 굵기만 제공하는 폰트나 장식성이 강한 폰트는 피하는 편이 좋습니다.

체크할 기준은 세 가지입니다.

• 작은 크기에서도 ‘가’, ‘을’, ‘했’ 같은 복잡한 글자가 뭉개지지 않는가
• Regular, Medium, Bold 정도의 굵기를 안정적으로 제공하는가
• 상업적 웹서비스에 사용할 수 있는 라이선스인가

초기 제품에서는 본문 기본값을 16px 전후로 두고, 줄간격은 글자 크기의 1.5배 안팎에서 시작해 보세요. 모바일에서는 본문이 작아 보이면 신뢰감도 같이 떨어집니다. 화면에 더 많은 정보를 넣고 싶어도 본문 크기를 지나치게 줄이는 방식은 보통 역효과가 납니다.

제목 폰트는 차이를 만들되 튀지 않게

제목 폰트는 제품의 인상을 만듭니다. 다만 본문과 너무 다른 성격이면 작은 서비스에서도 편집 디자인처럼 과장되어 보일 수 있습니다. 가장 안정적인 조합은 같은 계열 안에서 역할만 나누는 방식입니다. 예를 들어 본문은 차분한 고딕, 제목은 같은 고딕 계열의 굵은 웨이트를 쓰는 식입니다.

조금 더 브랜드감을 주고 싶다면 제목에만 폭이 좁거나 획 대비가 있는 폰트를 사용할 수 있습니다. 대신 버튼, 폼 라벨, 에러 메시지에는 본문 폰트를 유지하는 편이 좋습니다. 읽고 행동해야 하는 영역은 개성보다 명료함이 우선입니다.

간단한 규칙은 이렇습니다.

크기 스케일은 5단계면 충분하다

폰트를 정했다면 다음은 크기입니다. 매번 감으로 17px, 19px, 23px를 추가하면 화면마다 리듬이 달라집니다. 처음에는 5단계만 두세요.

• xs: 보조 설명, 메타 정보
• sm: 라벨, 작은 버튼
• base: 본문, 입력값
• lg: 카드 제목, 섹션 리드
• xl: 페이지 제목, 랜딩 헤드라인

비율은 대략 1.2~1.25배 간격에서 시작하면 무난합니다. 예를 들어 14 / 16 / 20 / 24 / 32처럼 잡을 수 있습니다. 중요한 것은 숫자 자체보다 새 크기를 함부로 만들지 않는 습관입니다. 디자인이 어색할 때는 새 크기를 추가하기보다 굵기, 색 대비, 여백을 먼저 조정해 보세요.

웹폰트 로딩은 성능의 일부다

폰트 파일은 생각보다 사용자 경험에 영향을 줍니다. 특히 한글 폰트는 파일이 커지기 쉬워서 여러 폰트와 여러 굵기를 동시에 불러오면 첫 화면 렌더링이 느려질 수 있습니다.

실전에서는 다음 원칙을 추천합니다.

• 처음에는 폰트 2개, 굵기 2~3개로 제한한다
• 쓰지 않는 굵기는 불러오지 않는다
• 가능하면 font-display: swap을 사용한다
• 라이선스 문서를 프로젝트에 기록해 둔다

브랜드 페이지라면 제목 폰트 로딩이 조금 늦어도 감수할 수 있지만, 도구형 앱의 대시보드라면 기본 시스템 폰트도 충분히 좋은 선택입니다. 사용자가 매일 보는 화면일수록 빠르고 안정적인 쪽이 낫습니다.

오늘 바로 정하는 방법

폰트 선택을 오래 끌지 않으려면 작은 샘플 페이지를 하나 만드세요. 실제 제품 문장으로 비교해야 합니다. “멋진 더미 문장”이 아니라 회원가입 안내, 빈 상태 메시지, 가격 카드, 오류 메시지를 넣어 봐야 판단이 됩니다.

결정 순서는 단순합니다.

1. 본문 폰트 후보 2개를 고른다.
2. 실제 UI 문장으로 16px 본문을 비교한다.
3. 제목은 본문과 같은 폰트의 Bold부터 시도한다.
4. 부족할 때만 제목 전용 폰트를 추가한다.
5. 크기 토큰 5개를 정하고 CSS 변수로 고정한다.

처음부터 완벽한 타이포그래피 시스템을 만들 필요는 없습니다. 다만 폰트와 크기 규칙을 초기에 작게라도 정해 두면, 페이지가 늘어날수록 효과가 커집니다. 혼자 만드는 제품일수록 선택지를 줄이는 설계가 속도를 만듭니다.