반응형 타이포 시스템 설계기

1. 크기 체계 입력

화면 폭과 본문 크기는 기본 루트 16px일 때의 CSS 픽셀입니다. 비율과 행간은 단위가 없습니다.

범위를 조절하면 모든 단계가 갱신됩니다.

2. 크기 표

루트가 16px일 때 계산된 CSS 픽셀입니다. 지정 범위 밖에서는 clamp가 경계 크기를 유지합니다.

3. 읽기 미리보기

예시 화면 폭과 100–200% 루트 글씨 확대를 모의합니다. 최종 폰트와 실제 브라우저 확대에서는 줄바꿈이 달라질 수 있습니다.

4. CSS 토큰

CSS의 범위 경계에는 rem, 유동 항에는 vw를 씁니다. 글 영역에는 .type-system을, 각 요소에는 .type-* 단계 클래스를 적용하세요.

/* Assumes 1rem = 16px at the browser default; rem endpoints grow with the user root-font setting. */
:root {
  --type-small: clamp(0.888889rem, calc(0.860119rem + 0.143849vw), 0.989583rem);
  --type-body: clamp(1rem, calc(0.946429rem + 0.267857vw), 1.1875rem);
  --type-lead: clamp(1.125rem, calc(1.039286rem + 0.428571vw), 1.425rem);
  --type-heading3: clamp(1.265625rem, calc(1.138661rem + 0.634821vw), 1.71rem);
  --type-heading2: clamp(1.423828rem, calc(1.24435rem + 0.897388vw), 2.052rem);
  --type-heading1: clamp(1.601807rem, calc(1.355923rem + 1.229419vw), 2.4624rem);
}
.type-system {
  line-height: 1.55;
  max-width: 68ch;
}
.type-small { font-size: var(--type-small); }
.type-body { font-size: var(--type-body); }
.type-lead { font-size: var(--type-lead); }
.type-heading3 { font-size: var(--type-heading3); }
.type-heading2 { font-size: var(--type-heading2); }
.type-heading1 { font-size: var(--type-heading1); }