웹 타이포그래피는 이렇게 합니다 — 서체·위계로 격 만들기

왜 본문 서체부터 시스템 폰트를 고르나요?

화면에 글자가 한 박자 늦게 뜨거나, 떴다가 다른 폰트로 바뀌며 깜빡이는 경험을 해보셨을 겁니다. 멋진 웹폰트를 본문에 통째로 걸면 그 파일을 사용자가 내려받는 동안 글자가 비어 있거나 임시 폰트로 보입니다. 저희는 본문을 시스템 폰트로 깝니다. 사용자 기기에 이미 들어 있는 글꼴이라 내려받을 게 없고, 첫 화면이 바로 그려집니다.

실제로는 한글과 영문을 묶어 둡니다. 한글은 애플 SD 산돌고딕Neo·맑은 고딕·나눔고딕 계열을, 영문은 -apple-system·Segoe UI·Roboto를 한 줄에 늘어놓아 어느 기기에서나 단정한 고딕으로 보이게 합니다. 그래도 브랜드 인상을 좌우하는 큰 제목 한두 곳에는 웹폰트를 씁니다 — 단, 그 한두 곳에만. 속도와 정체성을 맞바꾸지 않고 둘 다 챙기는 선택입니다. 이 판단은 프런트엔드 파트의 작업 방식과 한 흐름으로 맞춥니다.

타입 위계는 어떻게 세우나요?

위계가 약한 화면은 어디부터 읽어야 할지 알 수 없습니다. 글자 크기만 키워서는 부족합니다. 저희는 네 가지를 함께 움직입니다. 크기로 큰 덩어리를 나누고, 굵기로 같은 크기 안에서도 강약을 주고, 색 대비로 제목과 보조 설명을 갈라놓고, 위아래 여백으로 단락의 소속을 보여줍니다.

제목은 크고 굵게 더 진한 색으로, 본문은 적정 크기에 보통 굵기로, 캡션이나 날짜 같은 보조 정보는 한 단계 작고 연한 색으로 둡니다. 단계는 4~6개로 묶습니다. 단계가 너무 많으면 차이가 흐려져 위계가 도리어 무너지기 때문입니다. 이렇게 정리한 크기·굵기 세트를 디자인 토큰으로 고정해, 페이지마다 들쭉날쭉하지 않게 합니다. 컴포넌트 단위로 이 규칙을 어떻게 묶는지는 UI 파트의 설계 방식에서 더 다룹니다.

말로만 ‘4~6단계’라고 하면 와닿지 않으니, 저희가 실제로 쓰는 위계 한 벌을 스펙으로 펼쳐 둡니다. 같은 고딕 한 종이라도 크기·굵기가 이렇게 갈립니다.

크기만 다른 게 아니라 굵기와 명암까지 같이 움직인 걸 보실 수 있습니다. 이 다섯 단계를 토큰으로 고정해 페이지마다 똑같이 적용합니다.

본문 가독성은 무슨 숫자로 잡나요?

가독성은 감이 아니라 수치로 관리합니다. 본문 글자 크기는 16px 이상 — 그보다 작으면 모바일에서 손가락 확대를 부릅니다. 행간(line-height)은 글자 크기의 1.6~1.8배로 둡니다. 줄 사이가 좁으면 글이 덩어리로 뭉치고, 너무 넓으면 한 문단이 흩어져 보입니다.

한 줄 길이도 정합니다. 한글 기준 한 줄 25~40자가 편합니다. 줄이 너무 길면 다음 줄 첫 글자를 찾느라 시선이 헤매고, 너무 짧으면 자주 끊겨 리듬이 깨집니다. 본문 글자색은 순수한 검정(#000)보다 살짝 진한 회색을 흰 배경에 올려 눈부심을 줄이되, 명도 대비는 WCAG 기준 4.5대 1 이상을 지킵니다. 연한 회색 본문은 멋있어 보여도 읽다 지치게 만듭니다.

한글 줄바꿈은 왜 따로 손보나요?

한글 사이트에서 가장 흔히 새는 디테일입니다. 브라우저는 기본적으로 한글을 글자 단위로 끊습니다. 그래서 '분양 사이트'가 좁은 칸에서 '분양 사'에서 줄이 넘어가 '이트'가 다음 줄로 떨어지는, 단어가 두 동강 나는 줄바꿈이 생깁니다. 본문에서는 그러려니 해도, 큰 제목에서 단어가 쪼개지면 한순간에 어설퍼 보입니다.

저희는 한글 페이지 전체에 word-break:keep-all을 기본값으로 둡니다. 그러면 띄어쓰기, 곧 어절 단위로 줄이 바뀌어 '분양'과 '사이트'가 각자 온전하게 나뉩니다. 단어가 통째로 움직이니 줄 끝이 들쭉날쭉해 보일 수 있는데, 그건 가운데 정렬을 피하고 왼쪽 정렬을 기본으로 두면 자연스럽게 정돈됩니다. 작은 한 줄이지만, 한글 타이포의 격은 여기서 갈립니다.

화면 크기마다 글자를 어떻게 키우나요?

예전 방식은 모바일·태블릿·데스크톱마다 글자 크기를 따로 정해, 특정 너비를 넘는 순간 글자가 툭 점프했습니다. 저희는 clamp()를 씁니다. clamp(최소값, 화면 비례 중간값, 최대값) 형태로 쓰면 작은 화면에서는 최소 크기까지 줄고, 큰 화면에서는 최대 크기까지 커지며, 그 사이는 화면 너비에 비례해 끊김 없이 변합니다.

예를 들어 제목에 clamp(28px, 5vw, 56px)를 주면 휴대폰에서는 28px로 단정하게, 와이드 모니터에서는 56px로 시원하게, 중간 화면에서는 그 사이 어딘가로 자연스럽게 자리 잡습니다. 브레이크포인트마다 폰트 크기를 따로 관리할 필요가 없고, 어느 기기에서 열어도 제목과 본문의 비율이 무너지지 않습니다. 이런 타입 규칙을 제작 첫 단계부터 심는 이유는 홈페이지 제작 과정에서 함께 설명합니다.

그래서 '격'은 어디서 만들어지나요?

고급스러워 보이는 사이트가 특별한 서체를 쓰는 경우는 의외로 드뭅니다. 같은 고딕체라도 위계가 또렷하고, 행간과 줄길이가 편하고, 한글이 어절 단위로 깔끔하게 끊기고, 어느 화면에서나 비율이 안정적이면 — 사용자는 이유를 콕 집지 못해도 '잘 만든 곳'이라고 느낍니다. 반대로 이 디테일이 무너지면 좋은 폰트를 써도 어딘가 엉성해 보입니다.

저희 디자인 파트는 그래서 화려한 장식보다 이 기본기를 먼저 맞춥니다. 일하는 방식 전반은 우리는 이렇게 합니다에서 확인하실 수 있고, 지금 사이트의 타이포가 격을 만들고 있는지 궁금하시다면 무료 진단으로 시작하시면 됩니다.