같은 폰트를 쓰는데 제목과 본문이 같아 보이는 이유

블로그나 카드뉴스 작업을 하다 보면 한 번쯤 이런 상황이 온다. 같은 패밀리에서 제목은 굵은 걸로, 본문은 일반 굵기로 맞춰놨는데— 막상 완성된 화면을 보면 뭔가 밋밋하다. 폰트 굵기 계층이 잡혔다기보다 그냥 비슷한 두께가 두 번 쓰인 느낌. "다른 굵기를 분명히 썼는데 왜 이래?" 싶은 그 찝찝함은 틀린 굵기를 고른 게 아니라 두 굵기 사이의 단차 비율이 너무 좁은 데서 온다.

굵기 이름이 아니라 단차 비율이 계층을 만든다

타이포그래피 가이드 대부분이 "제목은 Bold, 본문은 Regular"를 공식처럼 소개한다. 틀린 말은 아니다. 그런데 이 공식이 작동하는 건 어떤 패밀리의 Bold와 Regular냐에 따라 완전히 달라진다.

폰트 굵기는 100(Thin)부터 900(Black)까지 숫자로 표현한다. Regular는 400, Bold는 700이다. 이 조합이 계층을 잘 드러내는 건 이름 때문이 아니라 두 값의 차이, 즉 단차가 300이기 때문이다. 반면 제목에 Medium(500), 본문에 Regular(400)를 배치하면 단차가 100으로 줄어든다. 획 굵기 차이가 너무 미미해서 나란히 두면 거의 같은 무게로 보인다.

결국 핵심은 이름이 아니라 숫자다. "Bold=제목, Regular=본문"이 아니라 단차 비율이 얼마냐가 실제 계층을 결정한다.

단차 비율로 보면 뭐가 달라지나

단차 비율 관점으로 굵기 조합을 보면 기존 이름 기반 비교와 전혀 다른 풍경이 보인다.

400→700 조합(단차 300)은 대부분의 폰트에서 계층이 선명하게 보인다. 300→700 조합(단차 400)은 대비가 더 강해진다. 여백이 넉넉한 레이아웃에서 제목을 가볍게 가져가고 싶을 때 Light 계열을 제목으로 역발상하는 디자이너도 있다. 단차 400이 충분히 확보되니 그런 시도가 성립한다.

반면 400→500(단차 100)이나 500→600(단차 100)은 나란히 두면 차이가 보이지만, 실제 레이아웃에서 제목과 본문이 문단 단위로 떨어지면 사실상 사라진다. 공간이 생기는 순간 100짜리 단차는 눈이 인식하지 못한다.

실질적인 계층 대비를 내려면 최소 200~300 이상의 단차가 필요하다. 이 기준선이 폰트를 고를 때, 굵기를 배치할 때 일관되게 작동하는 기준이 된다.

패밀리마다 단차를 낼 수 있는 범위가 다르다

어떤 단차를 구현할 수 있는지는 내가 쓰는 폰트 패밀리가 몇 단계를 지원하느냐에 달려 있다.

Pretendard는 100부터 900까지 9단계(Thin/ExtraLight/Light/Regular/Medium/SemiBold/Bold/ExtraBold/Black)를 모두 갖추고 있다. Noto Sans KR도 100~900 9단계를 지원한다. 이 두 패밀리는 선택지가 넉넉해서 제목·본문·캡션을 700·400·300처럼 단차 300씩 간격을 두고 배치할 수 있다.

반면 나눔고딕은 Light·Regular·Bold·ExtraBold 4단계뿐이다. step 수가 적으니 "제목은 Bold, 캡션은 Light"로 가면 본문이 끼어들 자리가 Regular 하나뿐이다. 이 경우 본문을 Regular로 고정하면 3단 계층이 자연스럽게 만들어진다. 다만 CSS에서 font-weight:700을 쓸 때 ExtraBold가 올라오는 경우가 있어 실제 렌더링을 확인하며 쓰는 게 좋다.

step이 두 단계뿐인 구형 폰트(Regular·Bold만 있는)라면 굵기만으로 3단 계층을 내기가 아예 어렵다. 그럴 땐 크기나 색상 명도로 캡션을 구분한다.

자신이 쓰려는 폰트가 몇 단계를 지원하는지 확인하려면 폰트비에서 폰트 이름을 검색해 상세 페이지를 열어보면 된다. 지원 weight 목록이 사용 범위·라이선스와 함께 한눈에 나온다. ✦

단차 비율 기준으로 굵기를 고르는 순서

막연하게 굵기 이름을 고르기보다 단차 비율을 기준으로 순서를 정해두면 실수가 줄어든다.

먼저 본문 굵기를 고른다. 가독성 기준에서 본문은 400(Regular)이 기본이다. Light(300)를 쓸 수도 있지만 작은 글씨에서 흐려 보이는 경우가 있어 신중하게 선택해야 한다.

다음으로 제목은 본문 굵기에서 단차 200~300 이상을 확보한다. 본문이 400이면 제목은 최소 600(SemiBold)에서 700(Bold)이 적당하다. 본문이 300이면 제목은 600 이상으로 잡아야 단차 300이 나온다.

마지막으로 캡션·날짜·출처 같은 보조 텍스트는 본문보다 한 단계 얇게 두거나, 같은 굵기에 색상 명도를 낮춰 구분한다. 패밀리가 지원하는 step 안에서 단차를 최대한 벌리는 방향이 기본이고, 단계가 남지 않으면 색상으로 보완한다.

Pretendard로 예를 들면 제목 700·본문 400·캡션 300 조합이 안정적이다. 제목을 800까지 올려도 좋다. 어느 경우든 본문과 제목 사이 단차가 300 이상이 되면 계층이 선명하게 읽힌다.

Medium이 있어서 썼는데 왜 밋밋한가

Medium(500)이 있으니 제목에 써봤는데 왜 이상하냐는 질문을 꽤 자주 듣는다. 단차 관점으로 보면 금방 이해된다. Regular(400)와 Medium(500)의 단차는 100이다. 나란히 두면 조금 달라 보이지만 눈을 가늘게 뜨고 봐야 알 수준이고, 레이아웃에서 두 텍스트가 몇 줄씩 떨어지면 차이는 거의 인식되지 않는다.

Medium의 역할은 '제목과 본문 사이 중간 위계'다. 소제목, 리스트 레이블, 버튼 텍스트처럼 본문보다 살짝 강조하고 싶지만 제목만큼 튀게 하긴 싫을 때 쓴다. 제목 자리를 Medium으로 채우려 하면 단차가 100이 돼 계층이 사라진다.

같은 폰트를 쓰더라도 폰트 굵기 계층을 어떻게 구성하느냐가 화면 위계를 만들거나 죽인다. 단차 200~300 이상을 기준선으로 기억해두고, 폰트비에서 쓰려는 폰트의 weight 목록을 먼저 확인하는 것만으로 '왜 밋밋하지?' 고민의 절반은 해결된다.