Generator Skala Tipografi

Apa itu Generator Skala Tipografi?

Generator Skala Tipografi mengubah ukuran dasar dan rasio modular menjadi skala tipe yang lengkap dan konsisten secara matematis, dengan sebanyak apa pun langkah judul yang lebih besar dan langkah keterangan yang lebih kecil sesuai kebutuhan. Selain ukuran font mentah, ia menurunkan tinggi baris dan spasi huruf yang serasi untuk setiap langkah, ditambah ekspresi fluida clamp() opsional yang menginterpolasi antara viewport mobile dan desktop menggunakan rasio mobile terpisah. Desainer dan pengembang front-end memakainya untuk menyusun token tipe sebuah design system, menjaga ukuran tetap konsisten, dan menempel CSS, Sass, Tailwind, atau JSON siap pakai. Ketik rasio kustom apa pun atau pilih yang klasik, atur ukuran dasar dan satuan (px atau rem), pratinjau dalam font-family Anda sendiri, lalu salin format yang dibutuhkan.

Cara menggunakan Generator Skala Tipografi

1. Ketik rasio kustom apa pun di bidang rasio, atau pilih yang klasik seperti Kuart Sempurna (1.333) dari menu drop-down preset di pengaturan.
2. Atur ukuran dasar; ini menjadi ukuran teks isi dan jangkar skala.
3. Di pengaturan, pilih berapa banyak langkah yang lebih besar dan lebih kecil untuk dihasilkan; langkah yang lebih kecil berada di bawah dasar untuk keterangan dan cetakan kecil.
4. Setel tinggi baris dasar dan yang rapat serta spasi huruf pada ukuran besar, dan masukkan font-family untuk memratinjau skala dalam tipografi Anda sendiri.
5. Untuk tipografi responsif, atur lebar viewport minimum dan maksimum serta rasio mobile untuk membangun skala fluida clamp().
6. Ganti format keluaran antara variabel CSS, clamp() fluida, Sass, konfigurasi Tailwind, dan JSON, lalu salin kode atau ukuran satu langkah tertentu.

Contoh

rasio 1.333, dasar 16px, 5 naik / 1 turun

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

dasar 16px, rasio 1.333, rasio mobile 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

skala apa pun, ekspor Tailwind

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

Pertanyaan yang sering diajukan

Bisakah saya memakai rasio kustom, bukan hanya preset?

Bisa. Ketik angka apa pun di bidang rasio, seperti 1.2, 1.5, 1.618, atau nilai non-standar seperti 1.45. Menu drop-down preset di pengaturan hanyalah pintasan yang mengisi bidang yang sama, dan memilih nilai yang tidak cocok dengan preset cukup menampilkan Kustom.

Bagaimana langkah yang lebih kecil (negatif) bekerja?

Skala berjangkar pada ukuran dasar (langkah 0). Langkah yang lebih besar mengalikan dasar dengan rasio, sedangkan yang lebih kecil membaginya, menghasilkan ukuran keterangan dan cetakan kecil di bawah dasar seperti sm dan xs. Atur berapa banyak langkah yang lebih besar dan lebih kecil yang Anda inginkan di pengaturan.

Bagaimana tinggi baris dan spasi huruf dihitung?

Tinggi baris berangsur dari nilai dasar Anda pada ukuran isi menuju nilai yang lebih rapat saat teks membesar, dan spasi huruf berangsur dari nol pada dasar menuju nilai ukuran besar Anda, sehingga teks tampilan besar sedikit lebih rapat dan teks kecil sedikit lebih longgar. Kedua kurva dapat disetel di pengaturan.

Apa itu skala fluida clamp()?

Ia membangun font-size: clamp() untuk setiap langkah yang tumbuh mulus antara lebar viewport minimum dan maksimum, memakai rasio utama Anda pada lebar maksimum dan rasio mobile terpisah pada minimum. Pilih format keluaran CSS clamp() untuk mengekspornya.

Apakah ada data saya yang dikirim ke server?

Tidak. Seluruh skala, termasuk ukuran, tinggi baris, spasi huruf, dan nilai fluida clamp(), dihitung secara lokal di browser Anda dengan aritmetika sederhana. Tidak ada yang diunggah, jadi alat ini bekerja offline dan menjaga pengaturan Anda tetap privat.