Satuan relatif

Satuan relatif menghitung ukuran dari konteksnya, yaitu font-size elemen, akar dokumen, induk, atau lebar karakter font yang sedang dipakai. Topik ini membahas em, rem, persen, dan ch beserta disiplin pemakaiannya agar ukuran teks dan spasi berubah secara terkendali. Setelah membacanya, pemilihan satuan untuk setiap kebutuhan memiliki dasar yang jelas.

Satuan em dan bahayanya bersarang#

Satuan em berarti font-size dari konteksnya. Ketika dipakai pada properti font-size, em menghitung dari font-size induk yang diwariskan, sedangkan pada properti lain, misalnya padding, em menghitung dari font-size elemen itu sendiri. Sifat ini membuat satu angka em mampu menskala seluruh bagian komponen sekaligus, misalnya padding tombol yang membesar bersama teksnya.

Bahayanya muncul ketika elemen bersarang. Sebuah elemen 1.5em di dalam elemen 1.5em lain menjadi 2.25em dari ukuran awal, dan setiap tingkat kedalaman berikutnya menggandakan lagi. Apabila penggandaan itu tidak diinginkan, deklarasikan ulang ukuran pada tingkat sarang yang bersangkutan dengan rem, atau terapkan em hanya pada properti selain font-size. Demo berikut membandingkan dua kelompok teks bersarang dengan induk yang sama besarnya, satu kelompok memakai em dan satu kelompok memakai rem. Jalankan demo berikut, perhatikan kelompok atas yang terus membesar, lalu bandingkan dengan kelompok bawah yang tetap.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>em dan rem</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1>Induk 20px, anak 1.5, cucu 1.5</h1>

  <div class="kelompok induk-a">
    <p>induk: font-size: 20px</p>
    <div class="anak">
      <p>anak: font-size: 1.5em</p>
      <div class="cucu">
        <p>cucu: font-size: 1.5em</p>
      </div>
    </div>
  </div>

  <div class="kelompok induk-b">
    <p>induk: font-size: 20px</p>
    <div class="anak">
      <p>anak: font-size: 1.5rem</p>
      <div class="cucu">
        <p>cucu: font-size: 1.5rem</p>
      </div>
    </div>
  </div>

<style>
/* Demo em dan rem: ukuran teks bersarang */

html {
  font-size: 16px;   /* akar dokumen: acuan seluruh rem */
}

body {
  margin: 0;
  padding: 20px;
  font-family: sans-serif;
}

h1 {
  font-size: 18px;
  margin: 0 0 12px;
}

.kelompok {
  border: 2px dashed #64748b;
  padding: 8px;
  margin-bottom: 16px;
}

.induk-a {
  font-size: 20px;
}

.induk-a .anak {
  font-size: 1.5em;   /* 1.5 x 20px induk = 30px */
}

.induk-a .cucu {
  font-size: 1.5em;   /* 1.5 x 30px anak = 45px, terus membesar */
}

.induk-b {
  font-size: 20px;
}

.induk-b .anak {
  font-size: 1.5rem;  /* 1.5 x 16px akar = 24px */
}

.induk-b .cucu {
  font-size: 1.5rem;  /* tetap 24px berapa pun kedalamannya */
}

p {
  margin: 6px 0;
}

</style>
<style>
/* Demo em dan rem: ukuran teks bersarang */

html {
  font-size: 16px;   /* akar dokumen: acuan seluruh rem */
}

body {
  margin: 0;
  padding: 20px;
  font-family: sans-serif;
}

h1 {
  font-size: 18px;
  margin: 0 0 12px;
}

.kelompok {
  border: 2px dashed #64748b;
  padding: 8px;
  margin-bottom: 16px;
}

.induk-a {
  font-size: 20px;
}

.induk-a .anak {
  font-size: 1.5em;   /* 1.5 x 20px induk = 30px */
}

.induk-a .cucu {
  font-size: 1.5em;   /* 1.5 x 30px anak = 45px, terus membesar */
}

.induk-b {
  font-size: 20px;
}

.induk-b .anak {
  font-size: 1.5rem;  /* 1.5 x 16px akar = 24px */
}

.induk-b .cucu {
  font-size: 1.5rem;  /* tetap 24px berapa pun kedalamannya */
}

p {
  margin: 6px 0;
}

</style></body>
</html>

Kelompok atas memperlihatkan teks yang makin besar pada setiap tingkat sarang, sedangkan kelompok bawah tetap pada ukuran yang sama berapa pun kedalamannya. Karena itu, em cocok untuk ukuran yang memang harus mengikuti teks di sekitarnya, sedangkan rem lebih aman untuk skala yang seragam.

Satuan rem dan akar dokumen#

Satuan rem selalu menghitung dari font-size elemen akar html, yang bernilai 16px pada pengaturan bawaan browser. Nilai 1.5rem berarti 24 piksel di mana pun elemen itu berada, tanpa peduli kedalaman sarangnya. Sifat tunggal inilah yang menjadikan rem satuan paling stabil untuk skala tipografi dan spasi.

Disiplin pemakaiannya adalah menempatkan rem pada font-size dan spasi, misalnya padding kartu, jarak antar seksi, dan lebar maksimum konten. Ketika nilai akar berubah, misalnya dari 16px menjadi 20px, seluruh skala ikut membesar bersamaan. Perubahan itu pula yang terjadi ketika pengguna menaikkan ukuran font bawaan browsernya, sehingga antarmuka mengikuti preferensi pengguna tanpa aturan tambahan. Angka desimal seperti 0.875rem memang tampak rumit, tetapi nilainya dihitung browser sehingga tidak ada pekerjaan manual.

html {
  font-size: 100%;       /* mengikuti preferensi pengguna, biasanya 16px */
}

h1 {
  font-size: 1.5rem;
}

.kartu {
  padding: 1rem;
  margin-bottom: 1.5rem;
}

Satuan persen dan ch#

Satuan persen menghitung dari induknya, tetapi acuannya bergantung pada properti. width: 50% berarti separuh lebar induk, sedangkan font-size: 120% berarti 120% dari font-size induk. Karena acuannya beragam, persen paling aman dipakai untuk lebar dan tinggi elemen block yang induknya jelas ukurannya.

Satuan ch menyatakan lebar karakter nol pada font yang sedang dipakai. Satuan ini berguna untuk membatasi panjang baris teks, misalnya max-width: 60ch, agar keterbacaan terjaga tanpa memedulikan besarnya font. Batas tersebut mengikuti praktik tipografi yang menyarankan panjang baris sekitar 45 sampai 75 karakter per baris. Apabila font diganti, nilai ch ikut menyesuaikan karena yang diukur adalah karakter pada font aktif, bukan angka tetap.

Kedua satuan ini saling melengkapi. Persen mengambil acuan dari kotak induk, sehingga cocok untuk lebar yang harus mengikuti wadahnya, misalnya kontainer artikel pada halaman daftar catatan. ch mengambil acuan dari font aktif, sehingga cocok untuk batas yang harus mengikuti teksnya, misalnya panjang baris paragraf. Memilih di antara keduanya dimulai dari satu pertanyaan sederhana, yaitu apakah ukuran itu mengikuti wadah atau mengikuti teks.

Aturan praktis pemilihan satuan#

Pemilihan satuan menjadi sederhana bila dipetakan ke kebutuhannya. Ukuran teks dan spasi vertikal paling aman dengan rem karena mengikuti akar dokumen. Garis tipis, bayangan, dan detail geometri memakai px karena tidak perlu menskala. Lebar kolom dan kontainer memakai persen agar mengikuti induk, sedangkan pembatasan panjang baris memakai ch.

Aturan ini bukan garis batas kaku, melainkan titik awal yang menjaga konsistensi. em tetap berguna di dalam komponen yang seluruh ukurannya harus mengikuti font-size-nya, misalnya tombol dengan padding dan radius yang ikut membesar. Yang penting adalah satu keputusan dipakai secara konsisten di seluruh proyek, karena campuran satuan yang tak terpola membuat skala ukuran sulit ditebak.

Ringkasan#

• em menghitung dari konteks font dan menggandakan diri saat bersarang, sedangkan rem selalu menghitung dari font-size akar dokumen.
• Persen mengikuti induk dengan acuan yang bergantung pada properti, dan ch menyatakan lebar karakter nol pada font aktif.
• Aturan praktisnya, rem untuk teks dan spasi, px untuk garis tipis, persen untuk lebar, dan ch untuk panjang baris.

Referensi#

• CSS values and units — MDN Web Docs — Ringkasan seluruh kategori satuan CSS beserta contoh pemakaiannya.
• rem — MDN Web Docs — Dokumentasi satuan rem beserta hubungannya dengan font-size akar dokumen.
• length — MDN Web Docs — Definisi resmi em, rem, persen, dan ch.