CSS Clamp Calculator Online - Fluid Typography

CSS Clamp Calculator untuk Fluid Typography

CSS clamp calculator ini mengubah dua lebar viewport dan dua ukuran font menjadi nilai CSS clamp() siap tempel, sehingga teks Anda menskala mulus alih-alih melompat di antara breakpoint media query. Alat ini dibuat untuk developer dan desainer yang menginginkan tipografi responsif yang tumbuh seiring lebar layar.

Masukkan viewport min dan maks, pilih ukuran min dan maks, lalu alat ini menghitungnya — slope, intercept, dan koefisien vw — kemudian menghasilkan font-size dan line-height siap produksi dalam rem atau px. Pratinjau langsung dan preset bawaan (H1–H6, Body, Kecil) memudahkan Anda menyetel skala sebelum menyalinnya.

Privat secara desain: setiap perhitungan berjalan di browser Anda. Nilai, preset, dan CSS yang dihasilkan tidak pernah diunggah ke server.

Cara Menggunakan Kalkulator

Atur rentang viewport

Di bawah Rentang Viewport, masukkan Lebar Min dan Lebar Maks untuk desain Anda. Rentang 320px hingga 1440px mencakup sebagian besar proyek; teks menskala secara linear di antara keduanya.

Atur ukuran font

Gunakan slider atau ketik Ukuran Min (pada viewport terkecil) dan Ukuran Maks (pada yang terbesar). Atau klik Preset — H1 hingga H6, Body, atau Kecil — untuk memuat nilai ukuran dan line-height yang teruji.

Sesuaikan tinggi baris

Atur line-height Min dan Maks. Heading biasanya butuh jarak lebih rapat (1.1–1.2) dan teks body lebih longgar (1.5–1.7). Jika kedua nilai sama, satu line-height statis dihasilkan alih-alih clamp().

Pilih satuan output

Di Pengaturan Output, pilih rem (disarankan) atau px. Untuk rem, atur Font Dasar ke root font-size proyek Anda — biasanya 16px — agar konversinya akurat.

Pratinjau dan salin

Geser slider viewport Pratinjau (320–1920px) untuk melihat teks contoh berubah ukuran, lalu klik Salin untuk menyimpan CSS ke clipboard Anda.

Fitur

Pembuatan CSS clamp()

Menghasilkan font-size siap produksi menggunakan clamp(), dengan slope (vw) dan intercept yang dihitung tepat dalam rem atau px.

Line-Height Fluid

Membuat clamp() yang serasi untuk line-height, dan kembali ke nilai statis yang rapi saat min dan maks sama.

Kontrol Rentang Viewport

Tentukan lebar viewport min dan maks tempat tipografi Anda menskala, sesuai breakpoint Anda sendiri.

Pratinjau Interaktif

Slider viewport dari 320px hingga 1920px mengubah ukuran teks contoh secara langsung sehingga Anda melihat persis cara teks menskala.

8 Preset Tipografi

Satu klik memuat rentang ukuran dan line-height yang masuk akal untuk heading H1–H6, teks body, dan teks kecil.

Output rem / px

Beralih antara output rem dan px, dengan ukuran font dasar yang dapat diatur agar nilai rem tetap akurat untuk setelan Anda.

Penjabaran Rumus

Menampilkan perhitungan langkah demi langkah — slope, koefisien vw, intercept, dan konversi rem — sehingga Anda dapat memverifikasi hasilnya.

Salin Satu Klik

Salin CSS font-size dan line-height lengkap ke clipboard Anda dengan satu tombol.

Pertanyaan yang Sering Diajukan

Apa itu fluid typography?

Fluid typography membuat teks menskala mulus di berbagai ukuran layar alih-alih melompat di antara breakpoint tetap. Dengan CSS clamp(), font-size menyesuaikan secara proporsional seiring perubahan lebar viewport — tanpa perlu media query.

Bagaimana cara kerja CSS clamp() untuk ukuran font?

clamp(min, preferred, max) membatasi sebuah nilai di antara minimum dan maksimum. Nilai preferred memakai satuan vw sehingga tumbuh seiring viewport, tetapi tidak pernah turun di bawah min atau naik di atas maks. Contohnya, font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem) menskala teks dari 16px pada viewport 320px menjadi 24px pada 1440px.

Bagaimana cara menghitung nilai clamp untuk tipografi?

Nilai preferred (tengah) adalah fungsi linear dari lebar viewport. Anda menghitung slope dari selisih ukuran dan viewport, mengubahnya menjadi koefisien vw, lalu menentukan intercept rem/px. Kalkulator ini melakukan semuanya secara otomatis dan menampilkan perhitungannya di panel Rumus.

Sebaiknya pakai rem atau px untuk output?

Gunakan rem untuk sebagian besar kasus — rem menghormati setelan ukuran font browser pengguna, yang meningkatkan aksesibilitas. Pilih px hanya saat Anda butuh ukuran yang tidak bergantung pada root font-size. Dengan output rem, atur Font Dasar ke root font-size proyek Anda agar konversinya tepat.

Lebar viewport min dan maks berapa yang sebaiknya saya pakai?

Rentang 320px hingga 1440px cocok untuk sebagian besar proyek: 320px mencakup ponsel umum terkecil, dan 1440px adalah lebar desktop standar. Sesuaikan batasnya dengan analitik atau spesifikasi desain Anda sendiri.

Mengapa line-height saya menampilkan nilai statis alih-alih clamp()?

Saat line-height min dan maks sama, tidak ada yang perlu diskalakan, jadi kalkulator menghasilkan satu nilai statis daripada clamp() yang tak perlu. Beri nilai line-height min dan maks yang berbeda jika ingin menskala secara fluid.

Apakah clamp() didukung di semua browser?

Ya. CSS clamp() didukung di semua browser modern, termasuk Chrome 79+, Firefox 75+, Safari 13.1+, dan Edge 79+. Untuk browser yang sangat lama, tambahkan font-size fallback biasa sebelum deklarasi clamp().

Mengapa pakai clamp() alih-alih media query untuk teks responsif?

Media query mengubah ukuran dalam langkah mendadak di setiap breakpoint dan butuh nilai terpisah untuk setiap elemen dan ukuran layar. Satu clamp() menskala kontinu di antara dua viewport, sehingga tipografi selalu tampak pas dan jauh lebih sedikit CSS yang harus dirawat.