Responsive Typography

Teks menyusun sebagian besar isi halaman, sehingga kenyamanan membacanya menentukan kesan responsif secara keseluruhan. Judul 40px yang megah di desktop terasa sesak di ponsel, sedangkan teks 14px yang pas di ponsel menjadi kecil sekali di monitor lebar. Ada dua alat yang melengkapi satu sama lain untuk persoalan ini: clamp() yang membuat ukuran bergerak mulus mengikuti lebar viewport, dan satuan rem yang menjaga skala teks mengikuti preferensi pengguna. Pada Chapter ini kita memakai keduanya dan menutup dengan line-height yang ikut menyesuaikan.

Ukuran Tetap vs Fluid #

Pendekatan lama menetapkan beberapa ukuran tetap lalu menggantinya di tiap breakpoint:

/* per-breakpoint: melompat di titik tertentu */
h1 { font-size: 28px; }
@media (min-width: 1024px) {
  h1 { font-size: 40px; }
}

/* fluid: bergerak mulus di seluruh rentang */
h1 { font-size: clamp(16px, 14.4px + 1vw, 40px); }

Fungsi clamp() menerima tiga nilai: clamp(min, preferred, max). Browser mengevaluasi nilai tengah, lalu menjepitnya ke batas bawah bila lebih kecil dari min dan ke batas atas bila lebih besar dari max. Triknya ada pada nilai tengah: angka tetap sebagai pijakan (14.4px) ditambah sedikit bagian yang tumbuh bersama viewport (1vw). Dengan begitu ukuran naik dan turun halus, tanpa lompatan di breakpoint dan tanpa satu pun @media.

Memilih Angka untuk clamp() #

Mari kita bedah clamp(16px, 14.4px + 1vw, 40px) pada beberapa lebar viewport — ingat bahwa 1vw = 1% lebar viewport, jadi 1280px memberi 1vw = 12.8px:

Tiga langkah praktis menentukan angkanya: pilih ukuran minimum yang masih nyaman (16px), pilih ukuran maksimum yang diinginkan (40px), lalu atur besaran vw seberapa agresif ukurannya tumbuh — semakin besar porsinya, semakin cepat naik. Rumus lengkap penurunan angka pasti tersedia di banyak kalkulator fluid typography; untuk kebanyakan kasus, memulai dari clamp(1rem, 0.9rem + 1vw, 2.5rem) lalu menyetel sambil melihat hasilnya sudah mencukupi.

rem dan line-height yang Menyesuaikan #

clamp() menangani judul; untuk teks isi, satuan rem menjaga skala tetap sehat. Satu rem mengikuti ukuran font elemen root, sehingga bila pengguna menaikkan ukuran font bawaan browser dari 16px ke 20px, seluruh teks berbasis rem ikut membesar — preferensi aksesibilitas tetap dihormati. Untuk jarak baris, gunakan nilai satuan tanpa unit pada line-height (misalnya 1.5) agar tinggi baris selalu 1,5 kali ukuran font apa pun yang sedang aktif.

Lebar baris juga bagian dari tipografi responsif. Batasi lebar teks isi dengan max-width berbasis karakter — misalnya max-width: 60ch — sehingga baris tidak memanjang melebar di monitor lebar. Satuan ch mengikuti lebar karakter nol dari font yang aktif, dan pengukurannya ikut menyesuaikan saat font berganti, sehingga batas ini tetap bermakna di seluruh rentang viewport.

Hasil di Browser:

Viewport harness 1280x720:
Judul h1  -> font-size 27.2px   (clamp: 14.4px + 1vw = 14.4 + 12.8)
Lead      -> font-size 19.4px   (clamp: 13px + 0.5vw = 13 + 6.4)
Kutipan   -> font-size 18px (1.125rem), line-height 27px (1.5 x 18px)
Bila jendela dipersempit, nilai judul dan lead menurun mulus hingga
menyentuh batas bawah 16px dan 15px.

Dengan grid, gambar, dan teks yang menyesuaikan, komponen interaktif berikutnya yang paling menuntut perhatian di layar sempit adalah navigasi — topik Chapter berikutnya.