Kapan Harus Menggunakan px, % dan em?

Meskipun, kebanyakan dari kita masih bertahan dengan satuan piksel saat menentukan ukuran-ukuran elemen HTML, namun di sini Saya ingin mencoba untuk membuka mata Anda lebih lebar lagi agar Anda bisa mengerti betul mengapa satuan-satuan relatif seperti em dan % dalam banyak kasus lebih efisien dan logis dibandingkan dengan satuan piksel (px) yang selama ini paling sering dipakai karena ukuran mereka yang sangat akurat.

Ketika % Menjadi Lebih Baik

Persentase merupakan satuan yang tidak dihitung berdasarkan ukuran elemen itu sendiri, melainkan dihitung berdasarkan perbandingan ukuran elemen tersebut terhadap ukuran induknya.

Satuan % Dalam Sistem Grid

Dimulai dari kasus sistem grid, atau katakanlah kolom-kolom web Anda. Di sini kita memiliki tiga elemen HTML untuk merancang sebuah susunan/layout situs sederhana. Terdiri dari pembungkus utama dan dua buah kolom. Salah satu kolom merupakan area artikel, dan satunya lagi merupakan area sidebar:

<div class="col-group">
    <div class="left-col">Artikel...</div>
    <div class="right-col">Sidebar...</div>
</div>

Seseorang dengan sudut pandang piksel akan membuat layout dua kolom dengan pengukuran seperti ini:

.col-group {
  width:600px;
  overflow:hidden;
}

.left-col {
  width:400px;
  float:left;
}

.right-col {
  width:200px; /* 600 - 400 */
  float:right;
}

CSS di atas akan menghasilkan layout dua kolom dengan ukuran pembungkus utama selebar 600 piksel. Kolom kiri selebar 400 piksel dan kolom kanan selebar 200 piksel. Ukuran layout yang sangat tepat dan tidak mungkin bisa diragukan akurasinya. Tapi sayangnya, layout piksel seperti ini hanya akan menimbulkan kendala saat Anda mencoba untuk memodifikasi atau memperbaharui lebar layout tersebut di masa depan. Misalnya, suatu saat Anda ingin mengubah lebar layout menjadi 1000 piksel seperti ini:

.col-group {
  width:1000px;
  overflow:hidden;
}

Pada saat yang sama Anda tentu harus memperbaharui lebar kolom kiri dan kolom kanan:

.left-col {
  width:600px; /* 400 + ((1000-600)/2) */
  float:left;
}

.right-col {
  width:400px; /* 1000 - 600 */
  float:right;
}

Tidak praktis, tidak hemat waktu dan membutuhkan perhitungan baru setiap kali ukuran layout diperbaharui. Jika susunan halaman hanya terdiri dari dua buah kolom sederhana seperti contoh di atas mungkin tidak begitu menjadi masalah, tapi bagaimana jika jumlah kolomnya banyak?

Bandingkan dengan saat Anda mengatur lebar kolom menggunakan satuan persentase:

.col-group {
  width:600px; /* lebar pembungkus utama */
  overflow:hidden;
}

.left-col {
  width:66.6%; /* (400/600) x 100 */
  float:left;
}

.right-col {
  width:33.4%; /* 100 - 66.6 */
  float:right;
}

Meskipun beberapa orang (termasuk Saya) masih merasa sedikit kesulitan ketika mencoba mengubah sudut pandang satuan piksel ke persen, tapi hasil akhirnya nanti Saya jamin akan lebih stabil dan lebih mudah diperbaiki/diperbaharui (maintainable) saat kita menggunakan satuan persen. Karena yang menjadi standar ukuran di sini hanya ada satu, yaitu pada elemen terluar saja. Sedangkan ukuran lebar anak-anak kolom di dalamnya yang menggunakan satuan persen akan secara otomatis mengikuti ukuran berdasarkan perbandingan lebar induknya, betapapun kita mengubah lebar pembungkus luar kolom-kolom tersebut.

Demonstrasi di halaman ini mungkin bisa sedikit menjelaskan bagaimana persen dan piksel bekerja pada sistem grid:

Lihat Demo

Satuan % Dalam Elemen Heading/Judul Artikel

Elemen-elemen heading h1, h2, h3, h4, h5 dan h6 akan lebih baik jika diatur menggunakan satuan persen. Walaupun beberapa ada juga yang menggunakan satuan em. Sebenarnya itu tidak masalah, karena baik em maupun % keduanya sama-sama merupakan satuan relatif. Yang penting cobalah untuk menghilangkan kebiasaan menggunakan satuan piksel dalam menentukan ukuran elemen heading. Ini berhubungan dengan pengaplikasian media queries yang lebih efisien dan juga kemudahan di dalam pengaturan ukuran judul berdasarkan ukuran teks utama. Sebuah contoh sederhana, di sini Anda mencoba menentukan ukuran elemen-elemen heading dengan satuan piksel:

body {
  font-size:13px;
  font-family:Arial,Sans-Serif;
}

h1 {font-size:28px}
h2 {font-size:25px}
h3 {font-size:22px}
h4 {font-size:19px}
h5 {font-size:16px}
h6 {font-size:13px}

Mengapa satuan piksel buruk dalam hal ini? Itu karena satuan piksel hanya akan membuat Anda melakukan ekstra perubahan ukuran teks dalam media queries perangkat seluler. Dimulai dari ukuran teks dasar yang dideklarasikan di dalam selektor body sampai ke ukuran teks pada elemen heading level 6:

@media (max-width:360px) {
  body {font-size:11px}
  h1 {font-size:26px}
  h2 {font-size:23px}
  h3 {font-size:20px}
  h4 {font-size:17px}
  h5 {font-size:14px}
  h6 {font-size:11px}
}

Pola penyusutan teks akan berbeda jika Anda menggunakan satuan persentase saat menentukan ukuran judul artikel. Saat menggunakan satuan persentase, maka ukuran judul-judul artikel akan menyesuaikan diri berdasarkan perbandingan ukuran teks dasar saat itu, yaitu 13px (Sebagai contoh: 200% dari 13 piksel adalah 26 piksel):

body {
  font-size:13px;
  font-family:Arial,Sans-Serif;
}

h1 {font-size:200%}
h2 {font-size:180%}
h3 {font-size:160%}
h4 {font-size:140%}
h5 {font-size:120%}
h6 {font-size:100%}

Karena Anda menggunakan satuan persentase pada semua judul artikel, maka saat Anda memperkecil ukuran teks pada perangkat seluler, yang perlu Anda lakukan hanya memperkecil ukuran teks dasarnya saja, yaitu pada elemen <body>. Ukuran teks pada semua judul artikel nantinya akan menyusut menyesuaikan diri berdasarkan persentase terhadap ukuran teks utama yang sudah mengecil:

@media (max-width:360px) {
  body {font-size:11px}
}

Menggunakan satuan persentase untuk elemen heading juga akan mempermudah Anda di dalam memperbaharui ukuran teks artikel. Anda tidak perlu memperbaharui semua ukuran judul artikel. Cukup perbaharui ukuran teks dasarnya saja. Selebihnya akan secara otomatis mengikuti skala yang diterapkan.

Ketika em Menjadi Lebih Baik

em adalah satuan yang dihitung berdasarkan ukuran teks di sekitarnya. Pada dasarnya 1em sama dengan 16 piksel. Itu jika Anda tidak menentukan ukuran teks pada elemen manapun. Tapi jika —misalnya— Anda menentukan ukuran teks sebesar 30 piksel pada <body>, maka 1em di area <body> akan setara dengan 30px (1em = Ukuran Teks di Sekitarnya).

Satuan em dalam line-height dan margin Paragraf

Satuan em sangat bermanfaat untuk menentukan ukuran dan jarak elemen yang terkait erat dengan ukuran teks. Misalnya margin paragraf dan jarak antar baris teks.

Contoh Kasus: Dua buah kolom dengan elemen paragraf di dalamnya mendapatkan ukuran teks sebesar 13 piksel yang diturunkan dari <body>. Paragraf di dalam kolom pertama menggunakan satuan piksel untuk mengatur margin dan line-height, sedangkan paragraf yang berada di dalam kolom ke dua akan menggunakan satuan em:

HTML

<div class="one">
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="two">
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

CSS

body {font-size:13px} /* 1em = 13px */

.one p {
  line-height:18px;
  margin:13px 0;
}

.two p {
  line-height:1.384615384615385em; /* 13 x 1.384615384615385 = 18.000000000000007 */
  margin:1em 0;
}

Hasil akhirnya, ukuran dan jarak antar baris paragraf akan tampak sama:

Sebelah kiri: Menggunakan piksel. Sebelah kanan: Menggunakan em.

Masalah akan muncul ketika Anda mencoba untuk memperbesar/memperkecil ukuran teks:

Sebelah kiri: Menggunakan piksel. Sebelah kanan: Menggunakan em.

Kolom sebelah kiri: Karena kita menggunakan satuan piksel, maka ketika ukuran teks berubah (dalam kasus ini: bertambah besar) jarak antar baris dan margin paragraf tetap sempit dan tidak berubah, bertahan pada ukuran 18px dan 13px. Membuat tulisan menjadi semakin sulit untuk dibaca.

Kolom sebelah kanan: Karena kita menggunakan satuan em, maka skala ukuran tinggi baris dan margin antarparagraf akan menyesuaikan diri berdasarkan ukuran teks.

Dalam Semua Elemen yang Terkait dengan Ukuran Teks

Pada intinya satuan em cocok untuk diterapkan pada semua hal yang berhubungan dengan ukuran teks. Semua hal yang membutuhkan ukuran dengan perbandingan yang tepat terhadap teks. Contoh paling sederhana ada pada desain tombol:

Desain tombol dengan satuan em pada padding dan border-radius akan menciptakan skala tombol yang lebih ideal dibandingkan px.

Ketika px Menjadi Lebih Baik

Satuan piksel dihitung berdasarkan ukuran lebar dan tinggi satu unit piksel pada layar. Oleh karena itu satuan piksel akan sesuai jika diterapkan pada elemen-elemen yang membutuhkan ukuran yang akurat dan tidak terpengaruh dengan ukuran elemen di sekitarnya. Misalnya lebar dan tinggi ikon, tebal border, blur bayangan, posisi latar dan ukuran teks utama. Ukuran teks utama biasanya dideklarasikan pada elemen <body> atau <html>.

---

Masalah Akurasi Ukuran pada Satuan Non-Piksel

Tidak bisa dipungkiri bahwa ukuran persentase dan relatif teks tidak akan bisa seakurat ukuran piksel. Tapi memangnya siapa yang peduli dengan itu? Kita, para penikmat desain dan tipografi pada dasarnya tidak pernah peduli mengenai seberapa besar tepatnya, ukuran huruf dan judul artikel yang sedang kita baca. Kita tidak peduli berapa piksel ukuran judul dan teks yang sedang kita baca. Karena yang kita pedulikan selama ini adalah proporsi yang ideal. Tipografi tidak begitu mementingkan akurasi, tipografi lebih mementingkan proporsi. Saya pikir kita tidak perlu khawatir untuk memulai beralih dari piksel dalam kasus-kasus tertentu menuju satuan-satuan relatif yang lebih mudah dipelihara dan responsif terhadap skala di sekitarnya.