Generator Skala Modular Font
Buat skala tipografi modular yang harmonis dari ukuran font dasar dan rasio (major third, golden ratio, perfect fifth, atau nilai kustom). Dapatkan tabel langkah lengkap beserta properti kustom CSS, variabel SCSS, konfigurasi fontSize Tailwind, atau JSON siap tempel.
Input
Dasar
Ukuran referensi untuk 1rem. Sebagian besar browser menggunakan 16px secara default.
Setiap langkah adalah langkah sebelumnya dikalikan dengan rasio ini.
Keluaran
Jumlah angka desimal pada nilai yang ditampilkan.
Output
| Langkah | Ukuran | Piksel |
|---|---|---|
| No data yet | ||
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/font-modular-scale-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseSize": "16",
"ratio": "1.25",
"customRatio": "1.25",
"unit": "rem",
"decimals": "3",
"exportFormat": "css"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `font-modular-scale-generator` tool (Font Modular Scale Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/font-modular-scale-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Generator Skala Modular Font — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Skala modular adalah deretan ukuran font di mana setiap langkah adalah langkah sebelumnya dikalikan dengan rasio tetap. Alih-alih memilih ukuran huruf secara manual dan berharap hasilnya terasa seimbang, Anda memilih satu ukuran dasar dan satu rasio bergaya musik, lalu setiap judul, subjudul, dan keterangan jatuh ke dalam ritme yang proporsional dan harmonis. Generator ini membuat skala tersebut untuk Anda dan memberikan kode siap salin untuk CSS, SCSS, Tailwind, atau JSON.
Cara menggunakannya
- Atur ukuran dasar dalam piksel — ukuran referensi untuk
1rem, biasanya 16px. - Pilih rasio. Pilihannya adalah interval tipografi klasik: Sekunda Minor (1.067) untuk UI yang rapat dan padat hingga Rasio Emas (1.618) dan Oktaf (2.0) untuk kontras editorial yang dramatis. Pilih Kustom untuk mengatur nilai apa pun antara 1.01 dan 3.
- Pilih satuan keluaran (
rem,em, ataupx) dan berapa angka desimal untuk pembulatan. - Pilih format ekspor. Tabel skala diperbarui secara langsung, dan kotak kode memberi Anda blok yang siap dimasukkan ke stylesheet atau konfigurasi Anda.
Langkah-langkahnya diberi nama dengan konvensi Tailwind yang sudah familiar — xs, sm, base, lg, xl, 2xl … hingga 6xl — di mana base adalah ukuran pilihan Anda dan setiap langkah di atas atau di bawahnya dikali (atau dibagi) dengan rasio.
Rasio apa yang sebaiknya saya gunakan?
Rasio yang lebih kecil (1.067–1.2) membuat ukuran tetap berdekatan, cocok untuk dasbor yang padat data dan halaman yang banyak teks. Rasio yang lebih besar (1.333–1.618) menciptakan hierarki yang tegas dan jelas, cocok untuk situs pemasaran dan artikel panjang. Jika ragu, Terts Mayor (1.25) adalah pilihan default yang andal dan serbaguna.
Sebaiknya pakai rem, em, atau px?
rem adalah pilihan paling aman untuk aksesibilitas: ukuran mengikuti preferensi ukuran font root pengguna. em dihitung relatif terhadap elemen induk, yang berguna untuk komponen mandiri. px bersifat tetap dan mudah diprediksi, tetapi mengabaikan preferensi zoom pengguna, jadi simpan untuk kasus ketika Anda benar-benar membutuhkan ukuran yang tepat.
Mengapa ukuran dasar selalu 1rem/1em?
Karena satuan relatif dinyatakan sebagai kelipatan dari dasar. Pada langkah base, nilainya tepat 1rem (atau 1em); kolom piksel menampilkan ukuran konkret yang dihasilkannya. Ganti satuan ke px untuk melihat setiap langkah sebagai nilai piksel absolut.
Bisakah saya memakai ini untuk proyek Tailwind?
Bisa. Pilih format Konfigurasi Tailwind (fontSize) dan tempel blok fontSize yang dihasilkan ke dalam theme.extend di tailwind.config.js Anda. Kuncinya sesuai dengan nama ukuran default Tailwind, sehingga utilitas text-lg, text-2xl, dan sejenisnya yang sudah ada akan memakai skala baru.
Privasi
Semuanya berjalan sepenuhnya di browser Anda. Ukuran dasar, rasio, dan kode yang dihasilkan tidak pernah meninggalkan perangkat Anda dan tidak pernah dikirim ke server.