Tipografi yang baik di layar ponsel sering terasa terlalu kecil di monitor, dan ukuran yang pas di monitor terasa boros ruang di ponsel. Responsive typography menyelesaikan konflik ini dengan membuat ukuran huruf bergerak mulus mengikuti lebar layar, dalam batas bawah dan atas yang kita tetapkan. Alat utamanya adalah fungsi clamp(), dan fondasinya adalah satuan rem yang kita pelajari pada Chapter Font Size dan Font Weight. Chapter ini merangkai keduanya menjadi sistem ukuran yang konsisten dan tetap hormat pada preferensi pembaca.

Formula Fluid Type dengan clamp() #

Fungsi clamp(min, preferred, max) menerima tiga nilai: batas minimum, nilai ideal, dan batas maksimum. Browser menghitung nilai ideal, lalu menjepitnya ke dalam rentang tersebut. Kunci formulanya adalah mencampur dua satuan: bagian rem yang tetap ditambah bagian vw yang bergerak mengikuti lebar viewport:

css 
h1 {
  font-size: clamp(16px, 14.4px + 1vw, 40px);
}

Mari kita telaah baris demi baris:

  1. 16px (minimum): pada layar sempit, judul tidak pernah lebih kecil dari 16px — masih terbaca nyaman.
  2. 14.4px + 1vw (ideal): komponen tetap 14.4px dijumlahkan dengan 1% lebar viewport. Pada layar 1280px, 1vw bernilai 12.8px, sehingga idealnya 14.4 + 12.8 = 27.2px — dan karena 27.2 berada di antara 16 dan 40, itulah nilai yang dipakai.
  3. 40px (maksimum): pada layar sangat lebar, judul berhenti membesar di 40px.

Angka 14.4px itu bukan kebetulan: rumus praktis untuk komponen tetap adalah min - (vw_step × breakpoint_min), agar ukuran tepat menyentuh batas minimum pada breakpoint terkecil yang kita tuju. Menurunkan seluruh sistem tipografi dari formula yang sama — ukuran ideal = angka tetap + berapa vw — membuat setiap tingkat skala bergerak dengan kecepatan yang serasi.

Hasil di Browser:

text 
Pada jendela harness 1280×720px (1vw = 12.8px):
judul clamp(16px, 14.4px + 1vw, 40px) tampil 27.2px.
Judul versi rem clamp(1rem, 0.9rem + 1vw, 1.5rem) dijepit ke
batas atasnya menjadi 24px (0.9rem + 1vw = 27.2px > 24px).
Teks isi 1rem tampil 16px dan tingkat skala 1.25rem tampil 20px.

Perhatikan judul kedua di atas: versi rem-nya dijepit ke batas atas pada layar 1280px, justru menunjukkan fungsi jepitnya bekerja. Kita sengaja menguji keduanya karena clamp() menerima satuan apa pun — hasil computed selalu dilaporkan dalam px oleh browser.

Skala Tipografi dan Rem sebagai Basis #

Sistem tipografi yang sehat dibangun dari skala: sekumpulan ukuran tetap dengan perbandingan yang konsisten, misalnya 0.75rem, 0.875rem, 1rem, 1.25rem, 1.5rem, 2rem. Setiap komponen mengambil ukuran dari skala, bukan angka bebas, sehingga hierarki visual halaman terasa teratur. Skala ditulis dalam rem agar mengikuti ukuran font akar, lalu dibungkus clamp() bila ingin bergerak mengikuti layar.

Satu kebiasaan kecil yang menyelamatkan banyak waktu: simpan komponen bergeraknya dalam satu custom property, misalnya --gerak: 1vw;, lalu pakai ulang di seluruh skala — .subjudul { font-size: clamp(0.875rem, 0.75rem + var(--gerak), 1.125rem); } dan .judul { font-size: clamp(1.25rem, 0.9rem + var(--gerak), 1.75rem); }. Dengan cara itu kecepatan skala seluruh judul dan teks isi identik, dan saat rasio perlu disetel ulang, kita cukup mengubah satu tempat. Jangan lupa menyandingkannya dengan line-height unitless — judul besar yang barisnya tetap rapat dan teks isi yang barisnya proporsional adalah pasangan dari sistem yang sama.

Kadang clamp() saja belum cukup — misalnya hirarki yang perlu melompat signifikan di tablet. Pada titik itu, media query menambahkan lompatan diskrit di atas gerakan fluid, dan keduanya berdampingan dengan baik. Dengan section ini tuntas, kita telah memiliki kendali penuh atas teks: keluarga huruf, ukuran, bobot, jarak, perataan, hingga sistem yang menyesuaikan diri.