타이포그래피 스케일 정하기 — 모듈러 스케일 실전

타이포그래피 스케일이 없으면 제목 24px, 부제목 20px, 본문 16px처럼 감으로 정한 크기가 화면마다 조금씩 달라져 나중에 손댈 곳이 한두 군데가 아니게 됩니다. 숫자를 감으로 고르는 대신 일정한 비율로 늘어나는 체계를 쓰면 이 문제가 구조적으로 해결됩니다. 스케일 하나만 정해두면 이후에 등장하는 모든 크기 결정이 그 안에서 자동으로 풀립니다.

1. 모듈러 스케일이란 무엇인가

모듈러 스케일은 기준 크기, 보통 본문 16px에 일정한 배율을 곱해가며 상위 단계 크기를 만드는 방식입니다. 배율이 클수록 제목과 본문의 크기 차이가 뚜렷해집니다.

실무에 적용하는 순서

단계가 너무 많으면 디자이너가 매번 어떤 크기를 써야 할지 고민하게 되어 스케일을 만든 의미가 사라집니다. 6~8단계 정도로 제한하는 것이 핵심입니다.

2. 줄 높이, 자간, 그리고 굵기

크기만 스케일로 관리하고 줄 높이를 각자 감으로 정하면 여전히 화면마다 느낌이 달라집니다. 큰 글자일수록 줄 높이 배수를 낮추고, 작은 글자일수록 배수를 높이는 방식으로 짝을 지어 함께 토큰화해야 합니다. 자간도 제목은 살짝 좁게, 작은 텍스트는 살짝 넓게 주는 규칙을 세워두면 스케일 전체의 완성도가 올라갑니다.

가변 폰트를 쓰는 경우 굵기도 스케일과 함께 설계해야 합니다. 제목에 굵은 폰트를 무조건 쓰기보다, 크기와 굵기의 조합을 미리 정해두면 브랜드 톤이 일관되게 유지됩니다. 손글씨 느낌의 브랜드 타이포그래피를 검토 중이라면 타이포그래피 2026 — 브랜드가 손글씨를 선택하는 이유에서 다룬 것처럼 본문용 스케일과 브랜드 표현용 폰트를 분리해서 관리하는 것도 방법입니다. 값 관리는 디자인 토큰 구조를 그대로 따르면 됩니다.

3. 왜 스케일이 감보다 나은가

스케일을 쓰지 않는 팀에서 반복적으로 나오는 실수는 제목과 부제목의 크기 차이가 화면마다 미묘하게 달라지는 것이다. 어떤 화면에서는 24px과 18px 조합을, 다른 화면에서는 22px과 17px 조합을 쓰는 식으로 각기 다른 비율이 섞이면, 사용자는 명확히 설명하기 어려운 위화감을 느끼게 된다. 크기를 감으로 정하는 방식의 진짜 문제는 그 감이 사람마다, 화면마다 다르다는 데 있다. 한 디자이너는 부제목을 20px로, 다른 디자이너는 21px로 고르는 식의 미세한 차이가 화면 수십 개에 쌓이면 전체적으로 정돈되지 않은 인상을 준다. 모듈러 스케일은 이런 개인차를 원천적으로 없앤다. 배율이라는 하나의 규칙만 정해두면, 그 이후의 모든 크기는 계산으로 도출되는 값이지 취향으로 고르는 값이 아니게 된다.

흔한 오해는 스케일을 “타이포그래피를 딱딱하게 만드는 제약”으로 여기는 것이다. 실제로는 반대에 가깝다. 크기 하나하나를 매번 새로 고민하는 대신 배율 안에서 자유롭게 조합할 수 있기 때문에, 디자이너는 크기 결정에 쓰던 시간을 레이아웃이나 콘텐츠 위계 같은 더 중요한 판단에 쓸 수 있다. 스케일은 창의성을 제한하는 것이 아니라, 반복되는 결정을 줄여 다른 곳에 집중할 여유를 만들어주는 장치다.

• 본문 기준 크기와 배율을 정하기
• 6에서 8단계로 제한해서 h1부터 caption까지 정의하기
• 크기별 줄 높이와 자간을 짝지어 토큰화하기
• 가변 폰트 굵기 조합을 스케일과 함께 정의하기
• 실제 화면에 적용해 가독성 재확인하기

모듈러 스케일은 컬러나 간격 값을 정할 때 쓰는 방식과 같은 원리를 공유한다. 하나의 규칙을 정해두고 그 안에서 값을 도출하는 접근은, 결국 디자인 시스템 전반에서 반복되는 사고방식이다. 타이포그래피에서 이 방식이 익숙해지면, 간격이나 컬러 명도 단계를 설계할 때도 같은 논리를 그대로 적용할 수 있다.

4. 마치며

타이포그래피 스케일은 몇 개의 숫자를 미리 정해두는 작은 작업처럼 보이지만, 화면 전체의 위계와 리듬을 결정하는 뼈대입니다. 다음 화면을 만들 때 크기를 감으로 정하고 있다면, 지금이 스케일을 세워둘 좋은 시점입니다.