Banyak pengguna tidak membaca halaman pada ukuran huruf default: penglihatan yang menurun, layar kecil, atau jarak pandang yang jauh membuat mereka memperbesar teks setiap hari. WCAG pada kriteria Resize Text menuntut halaman tetap utuh dan berfungsi ketika teks diperbesar hingga 200% — tanpa konten yang terpotong atau tombol yang hilang dari pandangan. Chapter ini membedakan dua jalur memperbesar di browser, menjelaskan mengapa rem menjadi pilihan penentu, lalu merumuskan syarat layout yang bertahan dan alur pengujian yang bisa dilakukan dalam dua menit.

Dua Jalur Memperbesar Teks #

Pengguna punya dua cara memperbesar, dan keduanya berperilaku berbeda terhadap unit CSS:

MekanismeCara mengaktifkanYang ikut membesar
Zoom browserCtrl dan + (Cmd dan + di macOS)seluruh halaman: teks px maupun rem, gambar, layout
Setelan ukuran huruf browsermenu pengaturan browserhanya teks berunit relatif (rem, em) — teks px tidak berubah

Zoom browser bersifat demokratis: semua elemen membesar bersama, sehingga halaman apa pun — sekalipun penuh px — tetap utuh secara proporsional. Setelan ukuran huruf jauh lebih selektif: ia menaikkan font-size akar, dan hanya teks yang menautkan dirinya ke akar lewat unit relatif yang ikut. Di sinilah keputusan unit kita menentukan apakah fitur aksesibilitas milik browser itu berfungsi atau kosong makna.

Mengapa rem Menang atas px #

1rem selalu berarti “ukuran huruf akar” — dan ukuran huruf akar adalah satu-satunya titik yang dikendalikan pengguna lewat setelan browser. Dengan begitu:

css 
body {
  font-size: 1rem;             /* mengikuti setelan pengguna */
}

.kartu-produk p {
  font-size: 0.875rem;         /* 14px pada setelan standar, membesar saat setelan naik */
}

.kartu-produk .harga-px {
  font-size: 14px;             /* tetap 14px apa pun setelan pengguna */
}

Kebiasaan yang sehat: ukuran huruf, jarak, dan radius memakai rem; px disisakan untuk garis 1px dan bayangan yang memang tak seharusnya membesar — ini melengkapi strategi tipografi responsif pada section Responsive Web Design. Demo berikut meniru setelan ukuran huruf di dalam bingkai — font-size kartu berperan sebagai ukuran akar, teks berunit relatif mengikutinya, teks px tidak:

Syarat Layout yang Bertahan Saat Teks Membesar #

Teks yang membesar butuh ruang yang tumbuh bersamanya. Empat syarat yang paling menentukan:

  • Tidak ada tinggi tetap pada wadah teks. height yang dikunci membuat teks yang membesar keluar dari kotaknya; min-height memberi batas bawah sekaligus ruang untuk tumbuh.
  • overflow: hidden dipakai sadar. Wadah tergunting adalah konten yang menghilang dari tampilan — bila memang harus memotong, sediakan gulir dengan overflow: auto.
  • Lebar yang fleksibel. Kolom berbasis persen, max-width, dan flex-wrap membiarkan konten mengalir; lebar tetap dalam px memicu luapan horizontal.
  • Gambar ikut menyesuaikan. max-width: 100% mencegah gambar mendorong layout saat wadahnya menyempit.
css 
.kartu-ringkasan {
  min-height: 96px;   /* tumbuh mengikuti teks yang membesar */
  padding: 1rem;
}

.notifikasi-panjang {
  max-height: 12rem;  /* batas boleh ada, asal tidak menggunting diam-diam */
  overflow: auto;     /* bila terpotong, sediakan gulir */
}

Dua kartu di bawah memakai markup yang sama; yang membedakan hanya tingginya. Perbesar zoom halaman dengan Ctrl dan + (Cmd dan + di macOS) sampai sekitar 200% dan amati kartu kiri:

Tombol yang tergunting bukan sekadar tidak terlihat — pengguna zoom tidak pernah bisa mengkliknya.

Alur Uji: Zoom 200% Plus Lebar Sempit #

Pengujian ini tidak butuh alat tambahan:

  1. Buka halaman, tekan Ctrl dan + hingga zoom mencapai 200%.
  2. Periksa setiap area: teks utuh, tombol tetap bisa diklik, tidak ada konten terpotong, tidak ada gulir horizontal.
  3. Kecilkan lebar jendela pada zoom 200% — jendela 640px pada zoom 200% setara viewport 320px CSS, tepat syarat Reflow level AA: satu kolom, tanpa gulir dua arah.
  4. Ulangi dengan setelan ukuran huruf browser dinaikkan dua tingkat — jalur ini hanya menyentuh halaman yang benar-benar memakai unit relatif.

Kombinasi zoom dan lebar sempit itulah ujian paling kasar sekaligus paling jujur: layout yang bertahan di sana hampir selalu aman di kondisi lain.

Kesalahan Umum #

KesalahanAkibatnyaPerbaikannya
height tetap pada wadah teksteks dan tombol tergunting saat membesarganti min-height, biarkan tinggi mengikuti konten
Semua ukuran huruf pxsetelan ukuran huruf browser tidak berefek sama sekaligunakan rem untuk tipografi, sisakan px untuk garis tipis
overflow: hidden sebagai perbaikan cepatkonten hilang dari tampilan tanpa pemberitahuanpakai overflow: auto atau desain ulang agar tidak perlu memotong
Kolom berlebar tetapluapan horizontal saat teks membesarpakai persen, max-width, dan flex-wrap

Ringkasan #

Zoom browser memperbesar segalanya, setelan ukuran huruf hanya menaikkan teks berunit relatif — dan itulah alasan rem menjadi pilihan penentu untuk tipografi. Layout yang bertahan mengizinkan ruangnya tumbuh: min-height alih-alih tinggi tetap, pemotongan yang sadar dengan gulir, dan lebar yang fleksibel. Uji dua menitnya — zoom 200% plus jendela sempit — kini menjadi bagian rutin sebelum halaman dinyatakan selesai. Chapter berikutnya membuka bagian debugging: orientasi DevTools sebagai ruang kerja utama penulis CSS.