타이포그래피 폰트 크기 비율, 모듈러 스케일로 정하기
제목은 32px, 부제목은 20px, 본문은 14px처럼 폰트 크기를 하나씩 감으로 골라본 적이 있다면, 화면 크기를 조금만 조정해도 크기 사이의 위계가 흐트러지는 경험을 해봤을 겁니다.
크기를 더하기(등차)가 아니라 하나의 고정된 비율을 거듭제곱하는 곱하기(등비) 방식으로 정하면, 어느 단계에서든 이웃한 크기끼리의 상대적인 비율이 항상 동일하게 유지됩니다. 이 방식을 **모듈러 스케일(Modular Scale)**이라고 부릅니다.
요약 ① 모듈러 스케일 공식:
크기 = 기준 크기 × 비율^단계. 기준 크기(Base)와 비율(Ratio) 하나만 정하면 나머지 모든 크기 단계가 자동으로 도출됩니다. ② 등차(+4px씩 더하기)로 크기를 늘리면 작은 글자 사이에서는 상대 차이가 과하고 큰 글자 사이에서는 미미해지지만, 등비(모듈러 스케일)는 모든 단계에서 상대 비율이 똑같이 유지됩니다. ③ 기준 크기와 비율만 고르면 9단계 크기가 즉시 계산되고, 그대로 붙여 쓸 수 있는 CSS 변수 코드와 Tailwind 설정 코드까지 함께 생성됩니다.
감으로 정한 폰트 크기가 자꾸 어색해 보이는 이유
본문 14px에서 시작해 18px, 22px, 26px, 30px처럼 매 단계 +4px씩 더하는 방식(등차)을 흔히 씁니다. 이 경우 14px→18px는 28.6% 커지지만, 26px→30px는 15.4%밖에 커지지 않습니다.
같은 +4px인데도 작은 글자 구간에서는 상대적으로 크게 뛰고, 큰 글자 구간에서는 상대적으로 조금만 뜁니다. 크기가 커질수록 절대 차이(px)는 그대로인데 상대 차이(%)는 점점 줄어드는 구조적인 문제입니다.
그 결과 헤드라인 단계끼리는 차이가 잘 구분되지 않고, 캡션·본문처럼 작은 글자 단계끼리는 차이가 과하게 벌어지는 불균형이 생깁니다. 단계가 늘어날수록 이 어긋남은 더 커집니다.
공식으로 폰트 단계 직접 계산하기
도구 없이도 계산기와 공식만 있으면 모듈러 스케일을 직접 만들 수 있습니다.
1단계 — 기준 크기 정하기
보통 웹 브라우저의 기본 루트 글자 크기인 16px을 기준(Base)으로 둡니다. 기준 크기를 16px로 두면 1rem = 16px 관계가 그대로 유지되어 계산이 단순해집니다.
2단계 — 비율 하나 정하기
비율(Ratio)은 각 단계마다 곱해지는 배수입니다. 흔히 쓰이는 비율값에는 음악 이론의 음정 이름을 빌린 관용적인 명칭이 붙어 있습니다.
- 1.067 (Minor Second), 1.125 (Major Second) — 비율이 작아 단계 간 차이가 촘촘합니다.
- 1.2 (Minor Third), 1.25 (Major Third), 1.333 (Perfect Fourth) — 본문·UI에서 자주 쓰이는 중간 범위입니다.
- 1.5 (Perfect Fifth), 1.618 (Golden Ratio), 2.0 (Double) — 비율이 커서 단계 간 차이가 크게 벌어집니다.
비율이 작을수록 단계가 촘촘해 세밀한 위계 표현에 유리하고, 비율이 클수록 단계 간 대비가 커져 소수의 단계만으로도 크기 차이가 뚜렷하게 드러납니다. 어떤 비율이 맞는지는 화면에 몇 단계의 크기가 동시에 필요한지에 따라 갈리는 문제라 정답이 정해져 있지는 않습니다.
3단계 — 공식 적용하기
기준을 16px, 비율을 1.25(Major Third)로 정했을 때 단계별 크기는 다음과 같이 구해집니다. 여기서 단계 0은 항상 기준 크기와 같습니다(비율의 0제곱은 1이기 때문입니다).
- 단계 0:
16 × 1.25⁰ = 16px(1rem) - 단계 1:
16 × 1.25¹ = 20px(1.25rem) - 단계 2:
16 × 1.25² = 25px(1.5625rem) - 단계 3:
16 × 1.25³ = 31.25px(1.953rem) - 단계 -1:
16 × 1.25⁻¹ = 12.8px(0.8rem)
이 값들을 직접 검산해 보면, 단계 0→1도 25% 증가, 단계 2→3도 정확히 25% 증가로 어느 구간이든 상대 비율이 동일합니다. 이것이 등차 방식과의 핵심 차이입니다.
이 계산을 -2단계부터 +6단계까지 9단계 전부 손으로 거듭제곱해서 뽑아내려면 번거롭습니다. 저희 도구로 확인해 보세요.
무료 · 가입 불필요 · 기준 크기와 비율만 고르면 9단계 CSS·Tailwind 코드 자동 생성
도구 사용법은 다음과 같습니다.
- 기준 글꼴 크기(px) 입력란에 기준 크기를 넣습니다(기본값 16).
- 비율 선택 드롭다운에서 9종의 비율 중 하나를 고릅니다.
- 미리보기 문구에 원하는 문장을 넣으면, 아래 스케일 미리보기에 -2단계부터 +6단계까지 9단계 크기로 같은 문구가 실시간으로 렌더링됩니다.
- 우측·하단의 CSS Variables와 Tailwind Config 박스에 각 단계의 rem 값이 코드로 정리되어 나오며, 복사 버튼으로 바로 붙여넣을 수 있습니다.
자주 막히는 지점
| 상황 | 원인 | 확인할 점 |
|---|---|---|
| 미리보기 글자 크기가 계산된 px 라벨과 실제로 달라 보임 | rem 값은 브라우저의 루트(<html>) font-size를 기준으로 렌더링되는데, 도구의 px 라벨은 입력한 기준 크기를 그대로 곱해서 표시함 | 실제 프로젝트에 CSS 변수를 적용할 때는 html 요소의 font-size를 도구에 입력한 기준 크기와 동일하게 맞춰야 rem 계산값과 실제 렌더링이 일치함 |
| 어떤 비율을 골라야 할지 판단이 안 섬 | 비율이 클수록 단계 간 차이가 크고, 작을수록 촘촘함 | 화면에 동시에 필요한 크기 단계 수가 많으면 작은 비율, 적으면 큰 비율부터 비교해 보기 |
| Tailwind 설정을 그대로 붙였더니 기존 설정과 충돌 | 생성되는 키 이름이 xs/sm/base/lg/xl/2xl/3xl/4xl/5xl로 Tailwind 기본 fontSize 키와 동일함 | theme.extend.fontSize에 병합하면 기존 기본값을 덮어쓰게 되므로, 통째로 교체할지 별도 키로 추가할지 프로젝트 설정에서 확인 |
정리
폰트 크기를 감으로 하나씩 고르는 대신 기준 크기 하나와 비율 하나만 정하면, 등비 공식(비율의 거듭제곱)으로 모든 단계의 크기가 일관된 상대 비율을 유지한 채 자동으로 도출됩니다. 계산 자체는 거듭제곱 공식만 알면 손으로도 가능하지만, -2단계부터 +6단계까지 9단계를 전부 검산하고 CSS·Tailwind 코드로 옮겨 적는 작업은 도구를 쓰면 훨씬 빠릅니다.
무료 · 가입 불필요 · 기준 크기와 비율만 고르면 9단계 CSS·Tailwind 코드 자동 생성
자주 묻는 질문
rem 대신 px로 고정해서 써도 되나요?
도구가 만들어주는 CSS 변수는 rem 단위이며, 참고용 px 값이 주석으로 함께 표기됩니다. rem을 쓰면 사용자가 브라우저에서 글자 크기를 확대하는 접근성 설정을 적용했을 때 전체 스케일이 함께 비례해서 커지지만, px로 고정하면 이 반응이 사라집니다. 어느 쪽을 선택할지는 프로젝트의 접근성 정책에 따라 달라지는 부분입니다.
비율 이름(Major Third, Golden Ratio 등)은 어디서 온 건가요?
도구에 표시되는 이름은 음악 이론의 음정 명칭을 빌려온 관용적인 라벨입니다. 실제 계산에 쓰이는 값은 1.25나 1.618 같은 숫자 자체이고, 이름은 여러 비율을 구분해서 부르기 위한 표기일 뿐 계산 방식에 영향을 주지 않습니다.
단계 -1, -2는 어디에 쓰나요?
단계 0이 기준 크기이므로, 음수 단계는 기준보다 작은 크기를 뜻합니다. 캡션, 각주, 보조 라벨처럼 본문보다 한두 단계 작은 글자가 필요할 때 -1(SM)이나 -2(XS) 단계 값을 그대로 가져다 쓸 수 있습니다.