Kalkulator CSS clamp() untuk Tipografi & Spasi Fluid

Apa itu CSS clamp()?

clamp(MIN, PREFERRED, MAX) mengembalikan nilai preferred, tetapi tidak pernah kurang dari MIN atau lebih dari MAX. Dengan nilai preferred yang bertambah mengikuti viewport, misalnya 0.8239rem + 0.7512vw, kamu mendapatkan ukuran font dan spasi fluid yang berubah halus di antara ukuran mobile dan desktop, tanpa deretan media query. Fitur ini didukung di semua browser modern.

Rumusnya, langkah demi langkah

Ukuran fluid adalah garis lurus di antara dua titik: (viewport min, ukuran min) dan (viewport maks, ukuran maks). Untuk 16px pada 375px dan 24px pada 1440px:

1. Kemiringan = (24 − 16) ÷ (1440 − 375) = 0.007512 — ukuran bertambah 0.0075px setiap piksel viewport.
2. Bagian vw = kemiringan × 100 = 0.7512vw, karena 1vw adalah 1% dari lebar viewport.
3. Intercept = 16 − 0.007512 × 375 = 13.183px = 0.8239rem dengan root 16px.
4. Hasil: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem). Pada viewport 768px, hasilnya 13.183 + 0.007512 × 768 ≈ 18.95px.

Kenapa menggabungkan rem dan vw?

Ukuran yang hanya terdiri dari vw mengabaikan zoom browser dan ukuran font default pengguna, yang bisa melanggar WCAG 1.4.4 (Resize text). Dengan menyimpan intercept rem, nilainya tetap menyesuaikan saat pengguna melakukan zoom atau mengatur font default yang lebih besar. Sebagai patokan praktis, jika nilai maksimum tidak lebih dari 2,5× nilai minimum, teks tetap bisa mencapai zoom 200%. Kalkulator akan memberi tanda pada rentang yang melebihi batas ini.

Skala tipografi dan spasi fluid

Alih-alih menghitung setiap heading satu per satu, definisikan modular scale: setiap langkah mengalikan dasar dengan rasio. Rasio yang lebih kecil di mobile (misalnya 1.2, minor third) dan yang lebih besar di desktop (misalnya 1.25, major third) membuat heading tetap menonjol di layar besar tanpa membebani ponsel. Pendekatan ini dipopulerkan oleh Utopia. Skala spasi mengalikan dasar yang sama (0.25×, 0.5×, 1×, 1.5×, 2×…) sehingga padding dan gap ikut membesar seiring teks.

Cara memakai clamp() di Webflow

• Langsung di panel Style: Webflow menerima fungsi matematika CSS di kolom ukuran. Klik kolom Font size, Padding, atau Gap, tempel nilai clamp(…), lalu tekan Enter.
• Sebagai variabel: buat variabel Size untuk setiap langkah (misalnya “Step 0”, “Space M”) di panel Variables, tempel nilai clamp(), lalu terapkan variabel ke font dan gap di berbagai class. Ubah sekali, berlaku di mana-mana.
• Lewat custom code: tempel blok :root { … } yang dihasilkan di dalam tag <style> pada Site settings → Custom code → Head code, lalu ketik var(--step-0) di kolom ukuran mana pun.
• Gap fluid seperti clamp(2rem, …, 4rem) membuat section tidak terasa terlalu besar di tablet. Gunakan chip cepat Gap.

Mau mengonversi spesifikasi desain dulu? PX to REM Converter mengubah nilai piksel menjadi rem.

Juga dicari sebagai: kalkulator clamp css, kalkulator fluid responsive, fluid root font size, css clamp, tipografi fluid, skala tipografi fluid, ukuran font responsif, vw rem.

Tool yang cocok dipakai bersama Kalkulator clamp()

• Generator Type Scale — Pilih ukuran font dasar dan rasio — Minor Third, Major Third, Perfect Fourth, Golden Ratio — lalu dapatkan rangkaian ukuran font yang harmonis untuk heading dan teks isi.
• Generator Box Shadow — Tumpuk beberapa lapis bayangan, atur offset, blur, spread dan opacity langsung di kartu pratinjau, lalu salin CSS box-shadow atau text-shadow.
• Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
• Konverter Satuan — Konversi antara satuan metrik, imperial, dan teknis dalam sepuluh kategori, dengan konverter dua arah dan tabel semua satuan sekaligus.