Responsive Typography

Ukuran huruf tetap adalah sumber ketidaknyamanan yang paling sering diabaikan: judul 48px yang megah di monitor lebar terasa mendesak di ponsel, sedangkan judul 28px yang sopan di ponsel terlihat kurang berwibawa di desktop. Chapter ini menerapkan kotak peralatan satuan dari chapter sebelumnya ke tipografi: ukuran judul yang berskala mulus lewat clamp(), teks isi yang sengaja dibuat stabil, dan pengaman panjang baris berbasis ch.

Fluid Type dengan clamp() #

Fungsi clamp(minimum, nilai-pilihan, maksimum) — yang kita pelajari di section Values, Units, dan Sizing — adalah alat baku untuk fluid type: font-size yang terus berubah mengikuti lebar layar, tetap dijaga dalam dua batas:

h1 {
  font-size: clamp(1.6rem, 1.2rem + 2vw, 3rem);
}

Mari kita bedah tiga nilainya:

1. 1.6rem (25.6px): batas minimum. Di layar paling sempit sekalipun, judul tidak akan mengecil melebihi ini.
2. 1.2rem + 2vw (nilai pilihan): rumus yang menentukan pertumbuhan. Bagian 1.2rem (19.2px) adalah fondasi yang stabil, dan 2vw menambah dua persen lebar viewport — 6.4px pada layar 320px, 28.8px pada layar 1440px.
3. 3rem (48px): batas maksimum. Setelah layar cukup lebar, judul berhenti tumbuh.

Bagian terpenting dari rumus ini adalah fondasi 1.2rem: karena dikombinasikan dengan rem, skala tetap terhubung ke preferensi ukuran font pengguna yang diatur di pengaturan browser — pengguna yang memilih font lebih besar mendapat seluruh skala judul yang ikut lebih besar.

Nilai pilihan itulah yang berlaku di semua lebar di antara kedua batas — hitungannya bisa kita telusuri:

Tabel ini juga memperlihatkan cara merancang rumus sendiri: tentukan ukuran minimum dan maksimum yang diinginkan, lalu atur bobot vw sehingga kedua batas tersentuh di ujung rentang viewport yang kita targetkan.

Demo berikut menempatkan judul tetap dan judul fluid berdampingan secara vertikal, memakai rumus yang sama dengan pembahasan di atas:

Jaga Teks Isi Tetap Stabil #

Fluid type cocok untuk judul, tetapi bukan untuk teks isi. Paragraf yang ukurannya ikut berubah di setiap lebar layar terasa tidak konsisten saat kita berpindah perangkat — dan bila vw-nya terlalu besar, paragraf bisa mengecil hingga sulit dibaca di ponsel.

Praktik yang sehat adalah membagi peran:

body {
  font-size: 1.0625rem;  /* 17px — stabil di semua layar */
}
h1 {
  font-size: clamp(1.6rem, 1.2rem + 2vw, 3rem);
}
h2 {
  font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.25rem);
}

Aturan praktisnya: teks isi dipertahankan stabil, judul diskalakan dengan berani. Bacaan panjang membutuhkan konsistensi; hierarki visual justru hidup dari kontras ukuran antar tingkat judul.

Lindungi Panjang Baris #

Tipografi responsif tidak berhenti pada ukuran huruf — panjang baris juga harus terkendali. Baris teks yang memanjang bebas di layar lebar membuat mata kehilangan jejak saat berpindah baris; rentang yang nyaman untuk dibaca lazimnya 45–75 karakter per baris.

Satuan ch menyelesaikan ini dengan elegan karena mengukur lebar karakter 0 pada font yang sedang dipakai:

.paragraf-artikel {
  max-width: 65ch;
}

Karena satuannya ch, batas ini menyesuaikan otomatis bila font atau ukuran hurufnya berubah, sesuatu yang tidak bisa dilakukan nilai piksel tetap.

Ringkasan #

Fluid type menyatukan tiga bahan yang sudah kita kuasai: satuan viewport untuk pertumbuhan, rem untuk mengikuti preferensi pengguna, dan clamp() untuk menjaga batas. Terapkan skala yang berani pada judul, pertahankan teks isi tetap stabil, dan batasi panjang baris dengan max-width: 65ch. Fondasi responsive web design kini lengkap — bagian-bagian berikutnya menerapkannya pada gambar, navigasi, dan layout Flexbox serta Grid.