CSS Fluid Typography Clamp Min Max

Ringkasan

clamp()/min()/max() membuat nilai yang menyesuaikan viewport — cocok untuk fluid typography & spacing tanpa media query.

Konsep Dasar

• clamp(min, preferred, max) — nilai antara min & max, preferensi di tengah.
• min(a,b) ambil yang terkecil; max(a,b) terbesar.
• Preferensi pakai vw (contoh 2vw) agar skala dengan lebar layar.
• clamp(1rem, 0.5rem + 1vw, 1.5rem) → aman di layar kecil & besar.

Cara Kerja / Struktur

css

:root { --step-1: clamp(1rem, 0.8rem + 1vw, 1.5rem); }
h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); }
.gap { gap: max(1rem, 2vw); }

Catatan Implementasi

• Fluid type kurangi media query berlebih.
• Kombinasi dengan rem base agar aksesibilitas zoom tetap jalan.
• Hindari vw murni tanpa batas (teks raksasa di layar lebar).

Kesalahan Umum

• Lupa batas min/max → teks terlalu kecil/besar.
• clamp dengan unit tak konsisten.

Glosarium

• Fluid: nilai mengalir mengikuti viewport.
• Viewport unit: vw/vh relatif ke layar.

Referensi

• CSS Responsive Layout