Clew

BerandaAlatGenerator skala tipografi

Generator skala tipografi dengan clamp() fluid

Pilih ukuran dasar dan rasio — dari minor second yang halus sampai golden ratio — untuk layar tersempit dan terlebar. Generator menghitung setiap langkah, menulis CSS clamp() yang tumbuh mulus di antara dua lebar layar, menampilkan skala di lebar mana pun, memperingatkan ukuran yang bisa mengganggu zoom browser, dan mengekspor CSS custom properties, konfigurasi Tailwind, SCSS, atau design token.

● Gratis, tanpa daftarDiperbarui:

Opsional, mis. fs → --fs-step-0

—

 

Ukuran font setiap langkah di lebar minimum dan maksimum, beserta nilai CSS
LangkahMin, pxMaks, pxNilai CSS 

    
Rumus. ukuran = dasar · rasiolangkah di setiap lebar; kemiringan = (maks − min) / (lebarmaks − lebarmin); font-size: clamp(min, (min − kemiringan · lebarmin) / 16 rem + kemiringan · 100 vw, maks).

  




Semua dihitung di browser Anda — data yang Anda masukkan tidak dikirim ke mana pun.
Cara memakai


  1. Tentukan lebar layarLebar minimum adalah layar tersempit yang Anda desain (360 px adalah lebar ponsel yang umum), maksimum adalah titik saat layout berhenti melebar. Hapus centang “Fluid” untuk satu skala statis.
  2. Pilih dasar dan rasioTeks isi biasanya 16–18 px. Rasio kecil cocok untuk antarmuka padat; rasio besar menghasilkan judul yang dramatis. Rasio lebih kecil di ponsel dan lebih besar di desktop mencegah judul meluber.
  3. Periksa pratinjau dan tabelGeser slider lebar untuk melihat setiap langkah di lebar layar mana pun. Tabel menampilkan ukuran di kedua ujung dan nilai clamp(); peringatan zoom muncul di atas pratinjau.
  4. EksporPilih variabel CSS, Tailwind v3 atau v4, SCSS, atau design token, atur prefiks dan nama langkah, lalu salin kodenya.
Apa itu skala tipografi modular
Skala modular adalah sekumpulan ukuran font di mana setiap ukuran adalah ukuran sebelumnya dikali rasio yang sama. Alih-alih memilih 14, 18, 22, dan 31 berdasarkan perasaan, Anda memilih ukuran dasar dan rasio, lalu setiap judul, keterangan, dan label mendapat ukuran yang saling berkaitan. Idenya berasal dari musik, di mana interval antarnada adalah rasio frekuensi, dan dipopulerkan di web oleh artikel Tim Brown “More Meaningful Typography” (A List Apart, 2011).


ukuran(langkah) = dasar × rasio ^ langkah

dasar 16 px, rasio 1,25 (major third):
langkah −1 = 12,8 px   langkah 0 = 16 px   langkah 1 = 20 px
langkah 2 = 25 px      langkah 3 = 31,25 px   langkah 4 = 39,06 px


Langkah negatif untuk keterangan dan teks kecil; langkah positif untuk judul. Rasio umum dan penggunaannya:


    

  • 1,067 minor second, 1,125 major second — sangat rapat; dashboard, aplikasi padat data, layar kecil.
    • 

  • 1,2 minor third, 1,25 major third — pilihan paling umum untuk antarmuka produk dan dokumentasi.
    • 

  • 1,333 perfect fourth, 1,414 augmented fourth — hierarki jelas untuk halaman pemasaran dan blog.
    • 

  • 1,5 perfect fifth, 1,6 minor sixth, 1,618 golden ratio — dramatis; gunakan sedikit langkah, atau judul menjadi sangat besar di langkah 4.
    • 



Ukuran bulat tidak wajib. Browser menampilkan ukuran pecahan, dan konsistensi antarlangkah lebih penting daripada angka bulat.
Tipografi fluid dengan CSS clamp()
Satu skala jarang cocok sekaligus untuk ponsel 360 px dan desktop 1440 px: judul yang pas di desktop meluber di ponsel. Solusi lama adalah sekumpulan media query yang melompat antarukuran. Tipografi fluid membuat setiap ukuran tumbuh linear seiring lebar layar di antara dua titik dan tetap di luar titik itu — CSS menuliskannya dalam satu deklarasi:


kemiringan = (ukuran_maks − ukuran_min) / (lebar_maks − lebar_min)
titik_potong = ukuran_min − kemiringan × lebar_min
font-size: clamp(ukuran_min, titik_potong + kemiringan × 100vw, ukuran_maks)

langkah 0: 16 px di 320 px → 18 px di 1240 px
kemiringan = 2 / 920 = 0,002174 → 0,2174vw
titik_potong = 16 − 0,002174 × 320 = 15,304 px = 0,9565rem
font-size: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem)


Generator ini memungkinkan ukuran dasar dan rasio diatur terpisah untuk tiap ujung, pendekatan yang dipakai Utopia (utopia.fyi). Rasio lebih kecil di ponsel dan lebih besar di desktop menjaga teks isi hampir tetap sementara judul tampil lebih menonjol di layar besar. Semua nilai ditulis dalam rem, sehingga skala mengikuti ukuran font bawaan yang dipilih pengguna.


Tipografi fluid dan aksesibilitas


Kriteria WCAG 1.4.4 mensyaratkan teks bisa diperbesar sampai 200 % tanpa kehilangan konten. Zoom browser memperbesar nilai rem, tetapi tidak nilai vw, sehingga ukuran yang sangat bergantung pada lebar layar mungkin tidak menjadi dua kali lipat saat di-zoom. Dua aturan menjaga tipografi fluid tetap aman:


    

  • Selalu sertakan rem dalam nilai preferensi — jangan pernah menulis 5vw saja. Generator selalu menghasilkan rem + vw.
    • 

  • Jaga ukuran maksimum paling besar 2,5 kali minimum. Seperti ditunjukkan Maxwell Barvian (Smashing Magazine, 2023), jika ukuran terbesar di clamp() tidak lebih dari 2,5 kali ukuran terkecil, teks selalu bisa mencapai zoom 200 %. Langkah yang melanggar aturan ini ditandai di atas pratinjau.
    • 

Cara memilih pengaturan untuk antarmuka produk
    

  • Mulai dari teks isi. 16 px adalah bawaan browser dan batas minimum yang baik untuk membaca; teks panjang sering memakai 17–18 px di desktop. Label antarmuka dan sel tabel bisa memakai langkah −1.
    • 

  • Batasi jumlah langkah. Sebagian besar produk butuh 2 langkah di bawah dasar dan 4–5 di atasnya. Terlalu banyak ukuran justru membuat hierarki lebih sulit dibaca.
    • 

  • Rapatkan jarak baris seiring ukuran membesar. Sekitar 1,5 untuk teks isi dan 1,1–1,2 untuk judul besar; ekspor Tailwind menyertakan jarak baris yang disarankan per langkah.
    • 

  • Gunakan rasio lebih kecil di layar kecil. 1,2 di ponsel dan 1,25–1,333 di desktop adalah pasangan aman untuk antarmuka produk.
    • 

  • Teks antarmuka yang pendek juga harus terbaca. Tooltip, petunjuk onboarding, dan item checklist sering diatur 12–13 px agar muat di gelembung kecil. Pertahankan minimal langkah −1 dan persingkat teksnya — kalkulator waktu baca tooltip bisa membantu.
    • 

  • Periksa kontras di ukuran terkecil. Font tipis dan ukuran kecil butuh kontras lebih tinggi; uji pasangan warnanya di pemeriksa kontras warna.
    • 

Sumber
    

  1. Brown T. More Meaningful Typography. A List Apart, 2011 — skala modular untuk web.
    2. 

  2. Bringhurst R. The Elements of Typographic Style. Hartley & Marks — skala tipografi klasik dan interval musik.
    3. 

  3. Utopia (utopia.fyi), J. Gilyead dan T. Hill — skala fluid dengan rasio berbeda per lebar layar.
    4. 

  4. Barvian M. Addressing Accessibility Concerns With Using Fluid Type. Smashing Magazine, 2023 — aturan 2,5× untuk zoom 200 %.
    5. 

  5. W3C. WCAG 2.2, kriteria 1.4.4 Resize Text.
    6. 

  6. W3C. CSS Values and Units Module Level 4 — clamp(), rem, dan vw.
    7. 

Pertanyaan umum


Rasio apa yang terbaik untuk skala tipografi?
Tidak ada satu yang terbaik. Untuk antarmuka produk dan dokumentasi, 1,2 (minor third) atau 1,25 (major third) paling umum; halaman pemasaran sering memakai 1,333 atau 1,414. Dengan rasio 1,5 ke atas, gunakan sedikit langkah karena ukurannya tumbuh sangat cepat.
Bagaimana menghitung ukuran font fluid dengan clamp()?
Hitung kemiringan: (ukuran maks − ukuran min) / (lebar maks − lebar min). Titik potong = ukuran min − kemiringan × lebar min. Lalu tulis clamp(ukuran min, titik potong dalam rem + kemiringan × 100 vw, ukuran maks). Untuk 16 px di 320 px sampai 18 px di 1240 px hasilnya clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem).
Apakah tipografi fluid aksesibel?
Bisa, jika nilai preferensi menggabungkan rem dan vw dan ukuran maksimum tidak lebih dari 2,5 kali minimum. Dengan begitu zoom browser tetap bisa memperbesar teks sampai 200 % seperti disyaratkan WCAG 1.4.4. Ukuran font yang hanya memakai vw tidak merespons zoom dan sebaiknya dihindari.
Sebaiknya memakai px atau rem untuk ukuran font?
Gunakan rem. Rem mengikuti ukuran font bawaan yang diatur pengguna, sedangkan px mengabaikannya. Generator ini menampilkan ukuran dalam px agar mudah dibaca, tetapi menulis semua nilai CSS dalam rem dengan 1rem = 16 px kecuali Anda mengubahnya.
Berapa banyak ukuran font yang dibutuhkan design system?
Biasanya 6–8: dua di bawah teks isi untuk keterangan dan label, ukuran dasar, dan 3–5 ukuran judul. Langkah yang lebih banyak membuat hierarki sulit ditangkap dan jarang dipakai secara konsisten.
Bagaimana menambahkan skala ke Tailwind CSS?
Untuk Tailwind v3, tempel hasil ekspor ke theme.extend.fontSize di tailwind.config.js dan pakai kelas seperti text-step-2 atau text-xl. Untuk Tailwind v4, tempel blok @theme ke CSS Anda; setiap variabel --text-* menjadi utility text-*.
Lainnya di Desain produk


Bacaan terkait
Pemeriksa kontras warnaGenerator palet aksesibelPemeriksa keterbacaanSemua alat
Tur, tooltip, dan checklist yang dampaknya terlihat di angka.


Coba Clew gratisCara kerjanyaPaket gratis selamanya · tanpa kartu kredit


Product tour, popup, dan onboarding di era AI


7 pola lengkap dengan jumlah langkah, aturan teks, dan metrik, apa yang diubah AI, serta checklist sebelum terbit. PDF, 2 halaman. Isi panduan →














Panduannya dalam bahasa Inggris.