디자인 도구

타이포그래피 스케일 생성기

조화로운 타이포그래피 스케일을 생성합니다

지금 바로 사용하기

무료 사용회원가입 없음브라우저에서 즉시 처리

기본 크기16px

스케일 비율

폰트 패밀리

단위

샘플 텍스트

미리보기

6xl

4.768rem

The quick brown fox jumps over the lazy dog

5xl

3.815rem

The quick brown fox jumps over the lazy dog

4xl

3.052rem

The quick brown fox jumps over the lazy dog

3xl

2.441rem

The quick brown fox jumps over the lazy dog

2xl

1.953rem

The quick brown fox jumps over the lazy dog

1.563rem

The quick brown fox jumps over the lazy dog

1.25rem

The quick brown fox jumps over the lazy dog

base

1rem

The quick brown fox jumps over the lazy dog

0.8rem

The quick brown fox jumps over the lazy dog

0.64rem

The quick brown fox jumps over the lazy dog

스케일 테이블

이름	크기	행간	자간	굵기
xs	0.64rem	1.6	normal	400
sm	0.8rem	1.55	normal	400
base	1rem	1.5	normal	400
lg	1.25rem	1.45	-0.01em	400
xl	1.563rem	1.4	-0.01em	600
2xl	1.953rem	1.35	-0.02em	600
3xl	2.441rem	1.3	-0.02em	700
4xl	3.052rem	1.25	-0.02em	700
5xl	3.815rem	1.2	-0.02em	700
6xl	4.768rem	1.15	-0.02em	700

:root {
  /* Base size: 16px, Scale ratio: 1.25 */

  --font-size-xs: 0.64rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.563rem;
  --font-size-2xl: 1.953rem;
  --font-size-3xl: 2.441rem;
  --font-size-4xl: 3.052rem;
  --font-size-5xl: 3.815rem;
  --font-size-6xl: 4.768rem;

  /* Font family */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Typography classes */
.text-xs {
  font-size: var(--font-size-xs);
  line-height: 1.6;
}

.text-sm {
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.text-base {
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.text-lg {
  font-size: var(--font-size-lg);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.text-xl {
  font-size: var(--font-size-xl);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.text-2xl {
  font-size: var(--font-size-2xl);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.text-3xl {
  font-size: var(--font-size-3xl);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.text-4xl {
  font-size: var(--font-size-4xl);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.text-5xl {
  font-size: var(--font-size-5xl);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.text-6xl {
  font-size: var(--font-size-6xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
}