모듈러 스케일(Modular Scale) 서체 위계 계산기
HOT본문 기준 폰트 크기와 음악적 비율(1.250 Major Third 등)을 선택해 h1~h6 타이포그래피 스케일을 자동 계산
Responsive 728x90 / 320x100 Ad Slot
(CLS Prevention Active · Zero Shift)모듈러 스케일(Modular Scale) 타이포그래피 계산기
음악적/수학적 조화 비율을 기반으로 완벽한 서체 크기 위계를 도출합니다.
타이포그래피 계층 시각적 미리보기
:root {
--text-fine: 0.64rem; /* 10.2px */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.3px */
--text-3xl: 2.441rem; /* 39.1px */
--text-4xl: 3.052rem; /* 48.8px */
}Native In-Feed / High Viewability Ad Slot
(CLS Prevention Active · Zero Shift)수학적 등비수열과 조화로운 웹 타이포그래피 모듈러 스케일(Modular Scale) 아키텍처
웹 디자인 시스템에서 활자 크기(Font Size)를 임의의 직관이나 무작위 픽셀값(14px, 19px, 27px 등)으로 결정하면, 페이지 전체의 시각적 위계(Visual Hierarchy)가 붕괴되고 난잡한 읽기 경험을 초래합니다. 고대 건축과 서양 활판 인쇄술에서 유래한 모듈러 스케일(Modular Scale)은 하나의 기준 폰트 크기(Base Size)에 일정한 수학적·음악적 공비(Ratio)를 곱해 나가는 기하학적 등비수열 체계입니다.
피타고라스 순정률의 완전 4도(1.333, Perfect Fourth), 메이저 서드(1.250, Major Third), 황금비(1.618, Golden Ratio) 등 자연계와 음악에서 검증된 조화로운 비율을 적용하면, h1(대제목)부터 h6(소제목), 본문(Body), 그리고 캡션(Caption)에 이르는 활자 단계가 서로 유기적인 비례를 유지합니다. 이는 독자의 안구가 활자 사이를 이동할 때 시각적 피로도를 극적으로 낮추고 콘텐츠의 핵심 논점을 자연스럽게 인지하도록 돕습니다.
OrvoKit 모듈러 스케일 계산기는 기준 크기(16px, 1rem)와 다양한 음향학적 스케일 비율을 바탕으로 8~10단계 활자 계층을 실시간 계산합니다. 실제 블로그 아티클과 대시보드 위젯 프리뷰를 통해 텍스트 리듬을 즉시 시각적으로 검증할 수 있으며, 반응형 rem 단위, CSS 변수(--font-size-*), 그리고 Tailwind CSS 테마 확장 코드를 원클릭으로 추출할 수 있습니다.
등비수열(Geometric Progression)과 활자 위계 수학 공식
기준 활자 크기와 비율의 거듭제곱을 통해 감각적 어림짐작을 과학적 시스템으로 치환하는 타이포그래피 수학입니다.
본문($n=0$)을 기준으로 $n>0$은 상위 제목(h1~h5)으로 지수적 증가하며, $n<0$은 각주 및 캡션(-1, -2)으로 축소 분할됩니다.
👉 각 단계가 1.25배의 일관된 배수로 팽창하여 정돈되고 고급스러운 시각적 음악적 리듬을 확립합니다.
- 모듈러 스케일은 기준 크기($f_0$)에 일정한 비율($r$)을 거듭제곱하여 $f_n = f_0 imes r^n$ 공식을 통해 단계별 폰트 크기를 산출합니다.
- 피타고라스 음계의 순정률이나 피보나치 수열, 황금비처럼 자연계와 음악에서 발견되는 조화로운 비율을 적용해 눈이 편안한 계층 구조를 만듭니다.
- 반응형 웹에서 rem 단위를 기반으로 모바일과 데스크톱의 뷰포트에 맞춘 일관된 타이포그래피 리듬을 유지할 수 있습니다.
- 글자 크기가 커질수록 상대적 행간(Line-height)은 1.5에서 1.1~1.2 수준으로 좁혀야 시선 분산을 막고 제목 덩어리감을 형성합니다.
웹 타이포그래피 핵심 모듈러 스케일 비율 비교표
프로젝트 특성과 UI 밀도에 따른 공인 타이포그래피 비율 및 헤드라인 크기 비교 기준입니다.
| 음악적/수학적 명칭 | 공비(Ratio) | 제목 크기 확장감 | h1 크기 (16px 기준) | 최적 인터페이스 유형 | 시각적 분위기 및 감성 |
|---|---|---|---|---|---|
| Major Second (장2도) | 1.125 (9:8) | 매우 조밀하고 섬세함 | 25.63px (1.60rem) | SaaS 고밀도 대시보드, 스프레드시트 | 전문적, 데이터 중심, 컴팩트 |
| Minor Third (단3도) | 1.200 (6:5) | 균형 잡힌 점진적 변화 | 33.18px (2.07rem) | 기업 웹사이트, 전자상거래 쇼핑몰 | 단정함, 가독성 중심, 보편적 |
| Major Third (장3도) | 1.250 (5:4) | 선명하고 또렷한 위계 | 39.06px (2.44rem) | 블로그, 테크 뉴스, 매거진 본문 | 가장 추천되는 모던 웹 표준 비율 |
| Perfect Fourth (완전4도) | 1.333 (4:3) | 시원하고 대담한 대비 | 50.52px (3.16rem) | 마케팅 랜딩페이지, 포트폴리오 | 자신감 넘침, 시각적 주목도 극대화 |
| Augmented Fourth (증4도) | 1.414 (√2) | 극적인 크기 격차 | 64.00px (4.00rem) | 패션/럭셔리 브랜드, 브로슈어 | 아티스틱, 전시형, 강렬한 임팩트 |
| Golden Ratio (황금비) | 1.618 (Φ) | 웅장하고 압도적인 스케일 | 109.66px (6.85rem) | 대형 전시 히어로 배너, 예술 서적 | 기하학적 웅장함, 극단적 비대칭 |
* 일반적인 반응형 웹 아티클에서는 본문 가독성과 헤드라인 임팩트가 가장 조화로운 1.250 (Major Third) 또는 1.333 (Perfect Fourth)을 권장합니다.
High-Engagement In-Article Native Ad Slot
(CLS Prevention Active · Zero Shift)사용 방법
11. 기준 폰트 크기(Base Size) 설정
본문(Body Text)의 기준이 되는 글자 크기(예: 16px, 1rem)와 루트(html) 폰트 단위를 지정합니다.
22. 수학적/음악적 스케일 비율(Ratio) 선택
메이저 세컨드(1.125), 메이저 서드(1.250), 퍼펙트 포스(1.333), 황금비(1.618) 등 프로젝트 무드에 맞는 검증된 비율을 선택합니다.
33. 아티클 레이아웃 및 단계별 위계 미리보기
실제 블로그 글, 매거진 헤드라인, 메트릭 대시보드 텍스트가 단계별 크기와 행간(Line-height)으로 렌더링되는 모습을 시각적으로 확인합니다.
44. CSS 변수 및 Tailwind 타이포 토큰 복사
rem 단위와 px 단위가 정리된 CSS Custom Properties (--text-sm, --text-base, --text-4xl 등) 및 Tailwind 테마 객체를 복사합니다.
실제 디자인 시스템 구축 사례
글로벌 IT 기업들과 디자인 시스템에서 모듈러 스케일을 활용하는 영역입니다.
h1(대제목)부터 h4(소제목), 본문, 각주까지 한눈에 명확히 구분되는 읽기 편한 장문 활자 체계 구축
핵심 KPI 메트릭 숫자는 3단계 위 스케일(Major Third 2.44rem)로 시원하게 키우고 보조 라벨은 본문 스케일로 정돈
text-xs부터 text-5xl까지 프로젝트만의 독창적인 타이포 스케일을 tailwind.config.js 테마로 통일
CSS clamp() 함수와 모듈러 스케일을 결합하여 모바일 1.200 비율에서 데스크톱 1.333 비율로 유연하게 확대
💡 시니어 타이포그래피 디자이너의 실전 조판 지침
본문(16px)은 1.6~1.7의 여유로운 행간이 필요하지만, 대제목 h1(40px+)에 1.6 행간을 주면 위아래 줄이 분리되어 보입니다. 헤드라인은 1.1~1.25의 좁은 행간을 적용하세요.
데스크톱에서 아름다운 Perfect Fourth(1.333)나 Golden Ratio(1.618)는 390px 스마트폰 화면에서 제목이 4줄로 꺾여버립니다. 모바일 미디어 쿼리에서는 Major Third(1.250)로 스케일 비율을 한 단계 낮추세요.
폰트 크기를 고정 px로 선언하면 브라우저 설정에서 글자 크기를 키운 저시력자의 접근성이 무시됩니다. 반드시 html 기본 16px 기준 rem 단위를 산출해 적용하세요.
글자 크기가 커질수록 폰트의 시각적 자간이 넓어 보입니다. h1, h2 제목에는 `-0.02em`에서 `-0.03em` 정도의 음수 자간(Tracking)을 주어야 활자가 탄탄하게 뭉쳐 보입니다.
⚠️ 흔히 하는 실수 & 예방법
자주 묻는 질문 (FAQ)
사용자 및 전문가들이 가장 자주 묻는 핵심 질문과 명확한 해답입니다.
웹 스크린에서는 헤드라인의 텍스트 줄바꿈을 안정적으로 방어하면서도 본문과의 위계 구분이 뚜렷한 1.250 (Major Third)와 1.333 (Perfect Fourth) 비율이 전 세계적으로 가장 널리 권장됩니다.
Wide Responsive Banner
(CLS Prevention Active · Zero Shift)관련 도구 추천
황금비율(Golden Ratio, 1:1.618) 레이아웃 계산기
디자인 및 사진 구도용 황금비율(1:1.618) 가로·세로 분할 치수 및 본문/사이드바 폭 계산기
CSS Grid 템플릿 & 벤토(Bento) 레이아웃 빌더
행(Rows), 열(Columns), 간격(Gap)을 지정하고 셀을 병합해 반응형 CSS Grid 및 Tailwind 코드를 생성
CSS 마우스 커서(Cursor) 속성 미리보기 & 테스터
웹 표준 35가지 이상의 CSS cursor 속성(pointer, grab, zoom-in 등) 위에 마우스를 올려 즉시 체험하고 복사
색상 코드 실시간 변환기 및 조화 배색기
HEX, RGB, HSL, CMYK 상호 실시간 변환 및 보색, 유사색, 삼각배색 조화 팔레트 추천