Saat pertama kali belajar CSS, kita cenderung menggunakan satuan piksel (px) untuk segala hal. Lebar kotak? 300px. Ukuran font? 16px. Margin? 20px. Mudah dipahami, bukan?
Namun, saat Anda mulai membangun website yang diakses dari ribuan jenis layar—mulai dari smartwatch hingga TV 4K—menggunakan piksel statis akan menjadi mimpi buruk aksesibilitas dan responsivitas. Inilah mengapa CSS menyediakan satuan relatif seperti em, rem, vw, dan vh. Mari kita bedah satu per satu.
1. Satuan Absolut: Pixel (px)
Pixel adalah satuan mutlak (meskipun di layar modern, 1 CSS pixel tidak selalu sama dengan 1 hardware pixel karena rasio kepadatan layar/Retina display).
- Kelebihan: Sangat presisi. Anda tahu persis seberapa besar elemen tersebut akan dirender.
- Kekurangan: Tidak responsif secara bawaan dan buruk untuk aksesibilitas. Jika pengguna mengatur ukuran font default browser mereka lebih besar (karena masalah penglihatan), teks dengan ukuran statis
14pxtidak akan ikut membesar.
Kapan digunakan? Gunakan untuk border (misal: border: 1px solid black) atau elemen UI yang memang membutuhkan presisi piksel mutlak yang tidak boleh melar.
2. Satuan Relatif: EM (em)
Satuan em dihitung berdasarkan ukuran font elemen induknya (parent element).
Jika elemen div memiliki font-size: 20px, maka di dalam div tersebut, nilai 1em adalah 20px. Jika Anda memberi margin 2em, artinya marginnya adalah 40px.
- Kekurangan Utama (Efek Domino): Jika Anda menyarangkan elemen yang menggunakan ukuran font
em, ukurannya akan mengalikan diri (compounding). Div dalam div dalam div yang semuanya menggunakanfont-size: 1.2emakan membuat teks di dalam semakin membesar secara eksponensial dan sulit dikontrol.
Kapan digunakan? Sangat bagus untuk padding atau margin pada tombol. Jika ukuran font tombol diperbesar, padding (dalam em) akan ikut membesar secara proporsional, menjaga rasio tombol tetap cantik.
3. Satuan Relatif: REM (rem)
REM singkatan dari "Root EM". Berbeda dengan em yang melihat ke elemen induk langsung, rem selalu melihat ke root elemen dokumen (yaitu tag <html>).
Secara default, sebagian besar browser menetapkan ukuran font root ke 16px. Jadi, 1rem biasanya sama dengan 16px. 2rem = 32px.
- Kelebihan: Menghilangkan masalah "efek domino" dari
em. Anda mendapatkan konsistensi di seluruh halaman sekaligus menjaga aksesibilitas (ukuran akan menyesuaikan jika pengguna mengubah setting font default browser).
Kapan digunakan? Ini adalah standar emas modern untuk tipografi, lebar, margin, dan padding. Selalu gunakan rem daripada px untuk ukuran teks!
4. Viewport Units: vw & vh
Satuan viewport berdasarkan persentase lebar atau tinggi layar perangkat yang sedang digunakan.
1vw= 1% dari total lebar layar (viewport width).1vh= 1% dari total tinggi layar (viewport height).
Kapan digunakan?
- Gunakan
100vhjika Anda ingin membuat section hero/header yang menutupi layar secara penuh dari atas ke bawah. - Gunakan
vwuntuk tipografi responsif (Fluid Typography) dimana ukuran teks benar-benar melebar atau mengecil semulus perubahan ukuran jendela browser.
Berapa pixel nilai 1.75rem?
Menghitung konversi px ke rem (atau sebaliknya) secara manual cukup merepotkan, apalagi jika nilai base-nya bukan 16px. Gunakan kalkulator konversi kami untuk mempermudah workflow Anda!
Coba Unit Converter ToolsKesimpulan Praktis
Sebagai aturan praktis dalam pengembangan web modern (terutama jika Anda menggunakan framework seperti TailwindCSS yang defaultnya sudah menggunakan rem):
- Gunakan rem untuk ukuran font (
font-size) dan ruang (margin/padding). - Gunakan em hanya pada elemen terisolasi yang ukurannya harus proporsional terhadap ukuran teksnya sendiri (misal: tombol atau SVG icon dalam baris teks).
- Gunakan % atau vw/vh untuk layout container (grid, flexbox).
- Gunakan px hanya untuk border tipis atau bayangan (shadow) yang presisi.