Stop Pakai px! Kapan Desainer Web Harus Pakai rem, em, atau vw?

Bagi desainer grafis yang baru terjun ke dunia web, px (piksel) terasa seperti sahabat karib. px itu pasti, absolut, dan bisa diandalkan. Anda mendesain layout di Figma dengan font-size: 16px dan padding: 20px, dan Anda ingin hasilnya di browser sama persis.

Lalu Anda membuat website yang "pixel-perfect" itu. Semuanya terlihat sempurna... di monitor 24-inci Anda.

Kemudian, seorang klien membukanya di laptop 13-inci. Seorang lansia mencoba memperbesar ukuran font default di browser-nya. Seorang pengguna membukanya di tablet vertikal.

Tiba-tiba, layout Anda hancur berantakan. Teksnya mungkin membesar, tapi kotaknya (<div>) tidak. Teksnya keluar dari wadahnya. Semuanya menjadi kaku dan rusak.

Selamat! Anda baru saja menemukan "dosa" terbesar dari ketergantungan pada px. Di dunia web modern, desain yang rigid (kaku) adalah desain yang buruk. Kita butuh desain yang fluid (cair), responsive (tanggap), dan accessible (mudah diakses).

Untuk melakukan itu, kita harus berhenti terobsesi dengan px dan mulai berteman dengan unit relatif: em, rem, dan vw/vh.

Si Musuh Lama: Apa Masalahnya dengan `px`?

px adalah unit absolut. 1px adalah (kira-kira) 1/96 inci. Ia tidak peduli dengan konteks apa pun.

Analogi: px itu seperti penggaris besi. 10cm akan selalu 10cm.

Masalahnya: Pengguna punya kontrol atas browser mereka. Salah satu pengaturan paling penting adalah "Ukuran Font Default". Kebanyakan browser disetel ke 16px, tapi pengguna dengan gangguan penglihatan mungkin mengaturnya ke 24px agar lebih mudah membaca.

Jika Anda mengatur font-size: 16px secara kaku, Anda mengabaikan preferensi pengguna. Anda memaksa mereka melihat 16px meskipun mereka sudah bilang "Tolong, saya butuh 24px!"

Desain yang baik menghormati pengguna. Di sinilah unit relatif berperan.

1. `em`: Si Bunglon Lokal

em adalah unit relatif yang pertama kali populer. Logikanya sederhana:

Definisi: 1em sama dengan ukuran font dari elemen induk (parent) terdekat.

Analogi: em adalah anak yang patuh pada orang tuanya.

Contoh:
Jika Anda punya <div class="parent"> dengan font-size: 20px;, maka di dalam div itu:

<p style="font-size: 1em;"> akan menjadi 20px
<p style="font-size: 0.8em;"> akan menjadi 16px (0.8 x 20)
<p style="font-size: 1.5em;"> akan menjadi 30px (1.5 x 20)

Kekuatan: Bagus untuk membuat komponen yang skalanya proporsional di dalam dirinya sendiri. Contoh: Anda ingin padding sebuah tombol 1.5em, jadi jika Anda memperbesar font-size tombol itu, padding-nya ikut membesar secara otomatis.

Kelemahan (Besar!): "Neraka em" atau compounding.
Bayangkan layout ini:


<div style="font-size: 1.2em;"> <!-- 1.2 x 16px = 19.2px -->
    <p style="font-size: 1.2em;"> <!-- 1.2 x 19.2px = 23.04px -->
        <span style="font-size: 1.2em;"> <!-- 1.2 x 23.04px = 27.65px -->
            Teks ini jadi super besar!
        </span>
    </p>
</div>

Karena setiap em dikalikan dengan induknya, ukurannya jadi "bersarang" dan sulit dikalkulasi. Ini membuat em tidak praktis untuk layout utama.

2. `rem`: Si Raja yang Bijak (Sahabat Baru Anda)

rem adalah singkatan dari Root EM. Ini adalah jawaban atas "Neraka em".

Definisi: 1rem sama dengan ukuran font dari elemen root (<html>).

Analogi: rem adalah anak yang patuh HANYA pada satu Raja, yaitu <html>. Dia tidak peduli dengan "orang tua"-nya (<div> atau <section>).

Ini adalah game-changer.

Secara default, browser mengatur <html> ke font-size: 16px. Jadi, di seluruh website Anda (tidak peduli seberapa dalam sarangnya):

1rem = 16px
2rem = 32px
0.5rem = 8px
1.5rem = 24px

Keajaiban Sebenarnya:
Jika pengguna mengatur ukuran font default browsernya menjadi 24px, maka <html> akan menjadi 24px.
Secara otomatis, di seluruh website Anda:

1rem = 24px
2rem = 48px
0.5rem = 12px

Semua font-size, padding, margin, dan width yang Anda atur dalam rem akan membesar secara proporsional! Website Anda menjadi accessible dan scalable dengan sempurna.

3. `vw` & `vh`: Si Pengukur Jendela

Unit ini berbeda lagi. Mereka tidak peduli dengan font. Mereka peduli dengan ukuran viewport (jendela browser).

Definisi vw (Viewport Width): 1vw = 1% dari lebar total jendela browser.
Definisi vh (Viewport Height): 1vh = 1% dari tinggi total jendela browser.

Analogi: vw/vh adalah meteran yang mengukur bingkai jendela Anda.

Kapan Pakai Ini?

Membuat Hero Section Full-Screen: Ini adalah penggunaan paling populer. Anda ingin hero banner Anda selalu menutupi layar, apa pun perangkatnya?
Gunakan: height: 100vh; (Artinya: 100% dari tinggi viewport).
Tipografi yang Fluid (Fluid Typography): Anda ingin judul yang sangat besar di desktop tapi otomatis mengecil di HP?
Gunakan: font-size: 8vw; (Artinya: Ukuran font adalah 8% dari lebar layar).
Di desktop lebar (1200px), font jadi 96px. Di HP (400px), font jadi 32px. Semuanya otomatis dan fluid!

Ringkasan Cepat: "Cheat Sheet" Kapan Pakainya

Kapan pakai px?
- Untuk hal-hal yang Anda ingin tetap kaku dan tidak berskala. Contoh paling umum: border: 1px solid black; atau box-shadow: 2px 2px 5px #ccc;.
Kapan pakai em?
- Untuk style di dalam sebuah komponen yang harus berskala relatif terhadap komponen itu sendiri. Contoh: padding: 0.5em 1em; di dalam .button.
Kapan pakai rem?
- HAMPIR SEMUANYA. Ini adalah default baru Anda. Gunakan untuk font-size (teks utama, judul), margin antar section, padding global, width dan height kontainer.
Kapan pakai vw/vh?
- Untuk layout skala penuh (seperti height: 100vh) dan untuk fluid typography (seperti font-size: 5vw pada judul utama).

Kesimpulan

Berhenti menggunakan px untuk layout dan font bukan hanya soal teknis, ini soal perubahan mindset. Ini tentang beralih dari pemikiran "pixel-perfect" yang kaku, ke pemikiran "fluid & accessible" yang modern.

Desain Anda akan lebih menghargai pengguna, lebih mudah di-maintain, dan jauh lebih profesional.

Apakah Anda sudah beralih ke rem? Apa tantangan terbesar Anda saat pertama kali beralih dari px? Bagikan di kolom komentar!

Sintaks Logis

Cari Blog Ini