Back to Basic: Perbedaan Rem, Em, dan Px

Introduction

Menggunakan Rem dan Em lebih baik daripada menggunakan px.

Pada saat kita menggunakan px, berarti kita melakukan hardcode untuk semua user. Sehingga user tidak bisa mengubah value tersebut dengan cara apapun. Hal ini kadang menyulitkan user yang memiliki disabilitas dan yang memilih untuk menggunakan font-size yang lebih besar dari default 16px.

Bagaimana Cara Kerja Rem ?

Rem dan Em adalah unit relative yang sekarang banyak digunakan oleh developer karena accesibilitynya.

Rem (root em) mengarah kepada "root element's font-size"

Biasanya, font-size root yang default adalah 16px. Maka, jika kita melihat pada codingan ada tertulis misalnya font-size: 1rem, berarti itu sama saja kita memberikan font-size sebesar 16 pixel.

Karena Rem berarti root element's font-size, maka kita bisa mengoverride value default tersebut dengan menggunakan css seperti berikut

:root {
  font-size: 20px;
}
css

Dengan mengubah root font-size, maka 1rem = 20px.

Bagaimana jika kita ingin menggunakan value yang bukan 16px?

Hal ini bisa ditulis dengan membagi value yang kita inginkan dengan 16px, misalnya jika kita ingin menggunakan font-size sebesar 20px, maka kita bisa menuliskan font-size: 1.25rem. 1.25 didapat dari 20/16.

Tapi ribet banget?!

Memang, menggunakan rem mengharuskan kita untuk berpikir lebih lama karena harus selalu mengconvert dari px ke rem. Tetapi, kita memberikan keleluasaan kepada user, sehingga bisa mengubah root font sizenya.

Perubahannya seperti berikut:

Bagaiman Cara Kerja Em?

Em mengarah kepada "parent element's font-size"

Karena CSS bersifat cascading dan inheritable, em akan meng-inherit value font-size dari parent elementnya. Misalnya kita memiliki parent div, dan p element di dalamnya

<div>
  <p>hi</p>
</div>

<style>
  div {
    font-size: 0.5rem; // 8px
  }

  p {
    font-size: 1em; // ??px
  }
</style>
html

Karena p menginherit parent element's font-size, maka 1em = 8px. Berarti, element p akan memiliki font-size: 8px.

Hal tersebut tentunya membingungkan kan, makanya penggunaan em tidak disarankan untuk font-size.

Selalu gunakan REM untuk font-size sehingga konsisten.

Dimana kita bisa menggunakan em unit?

Karena sifatnya yang mengambil parent element, maka akan sangat cocok jika kita menggunakan em untuk padding dan margin. Menggunakan em unit pada padding akan membuat ****padding yang terbuat selalu proporsional dengan font-size.

Misalnya, kita membuat button. Button tersebut bisa memiliki font-size yang berbeda ketika di mobile dan di desktop. Maka kita bisa melihat perbedaan penggunaan rem dan em pada codepen berikut:

Dapat kita lihat, bahwa penggunaan em akan membuat padding yang dihasilkan tetap proporsional dengan adanya pembesaran font-size. Sedangkan menggunakan rem, padding yang dihasilkan akan selalu konsisten.

Apakah kita benar" tidak boleh menggunakan px?

Menurut saya, penggunaan rem dan em akan sangat berguna untuk elemen" yang krusial seperti font-size, padding, margin. Oleh karena itu, biasanya untuk memberikan border, saya masih sering menggunakan pixel karena valuenya yang relatif kecil. Misalnya, border: 1px solid white akan lebih simple dan enak dilihat dibanding border: 0.0625rem solid white. Karena nilainya juga sangat kecil, perubahan root font-size juga tidak akan terlalu relevan.

Kesimpulan

Sekian penjelasan penggunaan rem dan em. Cobalah untuk selalu menggunakan rem untuk font-size. Sedangkan untuk padding / margin, kita bisa melihat situasi apakah kita ingin padding berubah secara proporsional atau tidak. Jika ya, kita bisa memanfaatkan fitur em yang bisa membuat responsive lebih mudah.