Design Tools
타이포그래피 스케일 생성기
조화로운 타이포그래피 스케일을 생성합니다
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
xl
1.563rem
The quick brown fox jumps over the lazy dog
lg
1.25rem
The quick brown fox jumps over the lazy dog
base
1rem
The quick brown fox jumps over the lazy dog
sm
0.8rem
The quick brown fox jumps over the lazy dog
xs
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;
}
왜 타이포그래피 스케일 생성기을(를) 사용해야 할까요?
- ✓100% 무료 - 숨겨진 비용이나 유료 기능이 없습니다
- ✓회원가입 불필요 - 계정 생성 없이 바로 사용 가능합니다
- ✓개인정보 보호 - 모든 처리가 브라우저에서 이루어집니다. 데이터가 서버로 전송되지 않습니다
- ✓초고속 - 서버 지연 없이 즉시 결과를 확인하세요
사용 방법
- 위의 입력 영역에 텍스트를 입력하거나 붙여넣으세요
- 도구가 자동으로 입력을 처리합니다
- 결과를 복사하거나 파일로 다운로드하세요
주요 기능
- ✓Multiple scale ratios (golden, minor third, etc.)
- ✓Base size customization
- ✓Preview all heading levels
- ✓CSS, SCSS, and Tailwind export
- ✓Responsive scaling options
- ✓Line height recommendations
자주 묻는 질문
타이포그래피 스케일이란 무엇인가요?
타이포그래피 스케일은 수학적 비율에 기반한 조화롭게 관련된 폰트 크기의 시리즈입니다.