Modular scale, 1948 르 코르뷔지에 Modulor

한 줄로

수학적 비율(예: 1.25, 1.5, 1.618)을 따라 폰트 크기와 간격을 정하는 시스템입니다. 1948년 스위스 건축가 르 코르뷔지에의 Modulor가 출발점입니다.

어디서 왔나

1948년, 스위스 출신 건축가 르 코르뷔지에(Le Corbusier)가 책 Le Modulor를 출간했습니다. 인체 비율(특히 황금비)을 기반으로 한 비례 시스템입니다. 건축물의 모든 치수를 이 비율의 배수로 정했습니다.

이 발상이 디자인의 폰트 크기 시스템으로 옮겨왔습니다. 무작위로 폰트 크기를 정하는 대신, 일정한 비율로 늘어나는 스케일을 씁니다.

예시

비율 1.25 (Major Third): 12px, 15, 19, 24, 30, 37, 47px.

비율 1.5 (Perfect Fifth): 12px, 18, 27, 41, 61px.

비율 1.618 (Golden Ratio): 12px, 19, 31, 50, 81px.

왜 작동하나

수학적으로 일관된 비율은 시각적 리듬을 만듭니다. 옆 크기와 명확히 다르고, 위계가 자연스럽습니다. 무작위 크기는 어색합니다.

Tailwind의 기본 스케일

Tailwind CSS의 폰트 스케일(text-xs ~ text-9xl)은 사실상 modular scale입니다.

xs: 12px / sm: 14px / base: 16px / lg: 18px / xl: 20px / 2xl: 24px / 3xl: 30px.

대략 1.125~1.25 비율입니다.

바이브 메이커가 챙길 한 가지

본인 디자인 시스템에 5~7개의 폰트 크기를 modular scale로 정의해 두면 일관성이 자동 보장됩니다. typescale.com에서 비율을 시각화해서 비교해 볼 수 있습니다.

관련

Golden ratio · Rule of thirds · Typography