모듈러 타입 스케일 생성기 — 타이포그래피 시스템

임의의 폰트 크기를 사용하면 디자인이 일관성 없어 보입니다. 수학적 비율에 기반한 모듈러 타입 스케일로 전문적인 타이포그래피 시스템을 만드세요.

모듈러 스케일이란?

기본 크기(보통 16px)에 일정 비율을 곱해 각 크기를 계산하는 방식입니다.

일반적인 비율

• Minor Third (1.2): 부드럽고 섬세한 위계
• Major Third (1.25): 균형 잡힌 선택
• Perfect Fourth (1.333): 강한 위계, 대부분에 적합
• Golden Ratio (1.618): 드라마틱한 위계

스케일 계산 예 (기준 16px, 비율 1.25)

• xs: 10.24px
• sm: 12.8px
• base: 16px
• md: 20px
• lg: 25px
• xl: 31.25px
• 2xl: 39.06px

CSS 변수로 스케일 구현

:root {
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.563rem;
  --text-xl: 1.953rem;
}