Design Tools
Generator Skala Tipografi
Buat skala tipografi harmonis
16px
Pratinjau
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
Tabel Skala
| Nama | Ukuran | Tinggi Baris | Jarak Huruf | Ketebalan |
|---|---|---|---|---|
| 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;
}
Mengapa menggunakan Generator Skala Tipografi?
- ✓100% Gratis - Tidak ada biaya tersembunyi atau fitur premium
- ✓Tanpa Daftar - Gunakan langsung tanpa membuat akun
- ✓Privasi Utama - Semua pemrosesan terjadi di browser Anda. Data Anda tidak pernah meninggalkan perangkat
- ✓Sangat Cepat - Hasil instan tanpa penundaan server
Cara Menggunakan
- Masukkan atau tempel teks Anda di area input di atas
- Alat akan memproses input Anda secara otomatis
- Salin hasilnya atau unduh sebagai file
Fitur
- ✓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
Pertanyaan yang Sering Diajukan
What is a typography scale?
A typography scale is a series of harmoniously related font sizes based on a mathematical ratio.