Em dan Rem

Teks dan jarak yang diukur dengan px beku di ukuran yang kita tentukan, padahal pengguna bisa saja menaikkan ukuran font default di browsernya. Satuan relatif menyelesaikan masalah ini: rem mengukur relatif terhadap font-size root, sedangkan em mengukur relatif terhadap konteks font di sekitarnya. Keduanya membuat tampilan ikut menyesuaikan preferensi pengguna, dan keduanya menjadi standar de facto untuk tipografi serta spacing pada CSS modern. Chapter ini membahas cara kerja masing-masing, perhitungannya, dan kapan yang mana lebih pas.

Rem: Relatif ke Font-Size Root #

rem singkatan dari root em. Satuan ini mengambil acuan dari font-size elemen root (html). Karena hampir tidak ada halaman yang mengubah font-size root-nya, nilai default browser 16px menjadi acuan yang lazim:

Demo berikut menampilkan skala rem pada root 16px:

Pemakaiannya lugas: kalikan angkanya dengan 16 untuk memperkirakan hasil dalam piksel.

h1 {
  font-size: 2rem;        /* 32px pada root 16px */
  margin-bottom: 1rem;    /* 16px */
}

p {
  font-size: 1rem;        /* 16px */
  line-height: 1.6;
  margin-bottom: 0.75rem; /* 12px */
}

Yang penting diingat: angka 16px hanyalah default. Ketika pengguna menaikkan font default browser menjadi 20px, seluruh nilai rem ikut naik 25%. Halaman membaca dengan ukuran yang lebih besar dan proporsinya tetap utuh — inilah bentuk penghormatan pada preferensi pengguna.

Em: Relatif ke Konteks Font #

em lebih dinamis karena acuannya bergantung pada property yang diberi nilai:

• Pada property font-size, 1em mengacu ke font-size elemen induk.
• Pada property lain (padding, margin, border-radius, dan sebagainya), 1em mengacu ke font-size elemen itu sendiri.

Contoh hitungan: elemen dengan font-size 20px diberi padding: 1.5em — padding-nya menjadi 1,5 × 20px = 30px. Elemen yang sama bila diberi font-size: 1.5em akan tampil 1,5 kali font-size induknya.

.kartu-harga {
  font-size: 20px; /* menjadi acuan em di bawah */
  padding: 1.5em;  /* 1.5 × 20px = 30px */
}

Sifat mengikuti-konteks ini berguna untuk komponen yang harus tumbuh bersama: padding dalam em membuat tombol besar otomatis lebih lapang daripada tombol kecil. Tetapi pada struktur bersarang, em juga menumpuk. Submenu yang diberi font-size: 0.9em di dalam menu yang juga 0.9em akan tampil 0,81 kali ukuran dasarnya:

.menu ul ul {
  font-size: 0.9em; /* menumpuk: 0.9 × font-size induknya */
}

Semakin dalam sarangnya, semakin menyimpang ukurannya — inilah alasan font-size sebaiknya diukur dengan rem, dan em disimpan untuk komponen yang memang ingin ikut menskala.

Demo berikut menampilkan pasangan tombol di dua konteks font berbeda — tombol pertama diukur dengan em, tombol kedua dengan rem:

Mengapa Rem Menjadi Pilihan Utama #

Untuk font-size, jarak, dan ukuran elemen umum, rem menawarkan dua keunggulan sekaligus:

• Menghormati preferensi pengguna: nilai rem berakar pada font-size root yang bisa diubah pengguna, sehingga halaman ikut membesar ketika dibutuhkan.
• Mudah diprediksi: acuannya satu — root — sehingga 1.5rem berarti 24px di mana pun aturan ditulis, tanpa efek penumpukan seperti em.

Konvensi yang sehat untuk proyek baru: gunakan rem untuk font-size, margin, padding, dan gap; pakai em hanya pada properti di dalam komponen yang memang harus proporsional dengan teksnya, seperti padding tombol atau jarak badge.

Trik 62.5%: Praktis, Tetapi Pikirkan Dua Kali #

Beberapa proyek menyetel root menjadi 10px agar perhitungan rem setara piksel:

html {
  font-size: 62.5%; /* 16px × 62.5% = 10px, sehingga 1rem = 10px */
}

body {
  font-size: 1.6rem; /* kembali ke 16px untuk teks dasar */
}

Dengan trik ini 1.6rem berarti 16px dan 2.4rem berarti 24px — hitungan mental jadi mudah. Keberatannya ada dua: makna 1rem berubah untuk seluruh proyek, sehingga CSS dari luar — library atau stylesheet tim lain — yang masih memakai makna baku bisa tampil salah ukur; dan setiap anggota tim harus mengingat konvensi tambahan ini. Banyak tim memilih rem tanpa trik ini karena editor dan DevTools kini menampilkan hasil konversinya secara langsung. Gunakan bila proyek memang menyepakatinya sejak awal.

Kesalahan Umum #

Ringkasan #

rem mengukur relatif terhadap font-size root sehingga konsisten dan menghormati preferensi pengguna; em mengukur relatif terhadap konteks font sehingga cocok untuk komponen yang harus tumbuh bersama teksnya. Trik 62.5% mempermudah hitungan tetapi mengubah makna rem di seluruh proyek, jadi pakailah dengan kesepakatan yang jelas. Setelah font tercakup, kita naikkan skala pengukurannya ke seluruh layar: viewport units pada chapter berikutnya.