모듈러 스케일
Major Third(1.25), Perfect Fourth(1.333) — 수학적 비율로 글자 크기 체계를 만드는 방법.
h1은 몇 px? h2는? body는? 매번 감으로 정하면 화면마다 불일치가 생긴다. 모듈러 스케일은 하나의 비율 상수로 모든 크기를 자동 생성한다.
모듈러 스케일(Modular Scale)은 기본 크기(Base)에 일정한 비율(Ratio)을 반복 곱해서 크기 체계를 만드는 방법이다. 음악의 음계가 주파수의 수학적 비율로 조화를 이루듯, 글자 크기도 비율로 만들면 시각적 조화가 자동으로 형성된다.
| 스케일 이름 | 비율 | 특성 | 적합한 상황 |
|---|---|---|---|
| Minor Second | 1.067 | 미세한 차이 | 본문 위주, 변화 적음 |
| Major Second | 1.125 | 점진적 변화 | 블로그, 문서 |
| Minor Third | 1.200 | 부드러운 대비 | 모바일 앱 |
| Major Third | 1.250 | 균형 잡힌 대비 | 일반 웹사이트 (가장 보편적) |
| Perfect Fourth | 1.333 | 뚜렷한 위계 | 대시보드, 랜딩 페이지 |
| Golden Ratio | 1.618 | 극적 대비 | 포스터, 히어로 섹션 |
실전 예시: Base를 16px, Ratio를 Major Third(1.250)로 설정하면 이렇게 된다. body = 16px → h4 = 16 × 1.25 = 20px → h3 = 20 × 1.25 = 25px → h2 = 25 × 1.25 = 31.25px → h1 = 31.25 × 1.25 ≈ 39px. 단 하나의 규칙으로 전체 크기 체계가 결정된다.
모듈러 스케일의 진짜 힘은 CSS 변수와 결합할 때 나온다. `--text-base: 1rem`, `--text-lg: calc(var(--text-base) * 1.25)` 식으로 정의하면, Base 크기 하나만 바꿔도 전체 사이트의 타이포 크기가 비례적으로 조정된다.
스케일 선택 가이드 — 모바일 앱처럼 화면이 작으면 Minor Third(1.2) 이하의 좁은 스케일, 데스크톱 랜딩 페이지처럼 공간이 넓으면 Perfect Fourth(1.333) 이상의 넓은 스케일이 적합하다. type-scale.com에서 실시간으로 비교해볼 수 있다.