Konverter PX ke REM

Konverter PX ke REM mengubah nilai piksel menjadi unit rem atau em — dan sebaliknya — menggunakan ukuran font root yang benar-benar dipakai proyek Anda. Tempelkan satu nilai atau seluruh skala tipografi, lalu dapatkan angka yang dikonversi, blok CSS siap salin dengan piksel asli dipertahankan sebagai komentar, penggaris yang merender setiap ukuran dalam skala sebenarnya, dan pratinjau respons nilai rem saat pengunjung memperbesar ukuran font browser mereka.

Rumus PX ke REM

Mengonversi antara piksel dan rem hanya memerlukan satu pembagian — satu-satunya hal yang perlu Anda ketahui adalah ukuran font root dokumen.

Dengan root bawaan browser sebesar 16 px, hasilnya adalah 24px ÷ 16 = 1.5rem dan 1.5rem × 16 = 24px. Jika stylesheet Anda menetapkan html { font-size: 62.5%; }, root menjadi 10 px dan 24 px yang sama adalah 2.4rem.

Tabel Konversi PX ke REM (root 16px)

rem vs em: Mengapa Penyarangan Mengubah Segalanya

rem diukur terhadap elemen root (html), sehingga artinya sama di seluruh dokumen. em diukur terhadap ukuran font terhitung elemen induk, sehingga nilai em yang sama akan terakumulasi saat Anda menyarangkannya. Diagram ini menunjukkan pengali 1.5 yang sama diterapkan hingga tiga tingkat, dimulai dari root 16 px:

Aturan praktis yang digunakan sebagian besar tim: gunakan rem untuk ukuran font, jarak tata letak, dan breakpoint; gunakan em secara sengaja untuk hal-hal yang seharusnya diskalakan bersama komponennya, seperti padding di dalam tombol atau ukuran ikon di samping teks.

Mengapa Menggunakan rem, Bukan px?

• Aksesibilitas. Pengunjung yang mengatur ukuran font bawaan browser ke 20 px akan melihat setiap ukuran berbasis rem membesar secara proporsional. Ukuran yang ditulis secara hard-code dalam px sama sekali mengabaikan preferensi itu.
• Satu pengatur untuk penskalaan global. Ubah ukuran font root dalam media query, dan seluruh skala tipografi serta ritme jarak berubah bersama — tanpa penimpaan per komponen.
• Ritme jarak yang konsisten. Menyatakan padding dan margin dalam rem menjaga ritme vertikal tetap terikat pada skala tipografi, bukan saling menjauh.
• Ramah token desain. Sistem desain modern (dan skala bawaan Tailwind) menerbitkan ukuran dalam rem, sehingga mengonversi nilai px yang sudah ada memudahkan serah terima.

Trik Ukuran Font Root 62.5%

Banyak tim menambahkan aturan ini agar 1rem sama dengan 10 px yang mudah, sehingga konversi mental menjadi sederhana:

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* kembali ke 16px yang mudah dibaca */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

Karena 62.5% adalah persentase dari bawaan browser, bukan nilai piksel tetap, aturan ini tetap menghormati preferensi ukuran font pengunjung. Satu hal yang perlu diingat adalah mengatur ulang body ke sekitar 1.6rem; jika tidak, teks bawaan Anda akan berukuran 10 px. Atur kolom ukuran font root di atas ke 10 untuk mengonversi berdasarkan pengaturan ini.

rem dalam Media Query

Di dalam media query, rem dihitung berdasarkan ukuran font root awal browser — bukan ukuran font html yang Anda tetapkan dalam CSS. Jadi @media (min-width: 48rem) selalu 768 px, meskipun stylesheet Anda menetapkan html { font-size: 10px }. Ini membuat breakpoint rem aman dan dapat diprediksi, dan ini adalah salah satu dari sedikit tempat em dan rem berperilaku sama.

Kapan Anda Tetap Harus Menggunakan px

• Border tipis dan pembatas — border 1 px harus tetap 1 px; penskalaan menghasilkan garis subpiksel yang buram.
• Aset berukuran tetap — offset sprite, offset bayangan yang presisi, dan gambar dengan ukuran intrinsik yang diketahui.
• Output canvas dan cetak — saat ukuran fisik atau piksel perangkat benar-benar merupakan ukuran yang Anda maksud.

Cara Menggunakan Konverter Ini

1. Pilih arah: px → rem, rem → px, px → em, atau em → px.
2. Masukkan nilai Anda: satu angka atau seluruh skala yang dipisahkan dengan koma atau spasi (hingga 20 sekaligus). Unit di akhir seperti 24px diterima dan diabaikan.
3. Atur ukuran font root: gunakan 16 untuk nilai bawaan browser, atau tekan chip preset untuk 10 (trik 62.5%), 12, 14, 18, atau 20.
4. Klik Konversi: baca tabel hasil, penggaris ukuran dalam skala sebenarnya, pratinjau aksesibilitas, dan blok CSS.
5. Salin CSS: satu tombol menyalin setiap deklarasi font-size dengan nilai piksel sumber disimpan dalam komentar.

Pertanyaan Umum

Bagaimana cara mengonversi px ke rem?

Bagi nilai piksel dengan ukuran font root. Dengan root bawaan browser sebesar 16 px, 24 px ÷ 16 = 1.5rem. Untuk arah sebaliknya, kalikan nilai rem dengan ukuran font root: 1.5rem × 16 = 24 px.

Berapa px untuk 1rem?

1rem sama dengan ukuran font root halaman. Pada setiap browser utama yang menggunakan nilai bawaan 16 px, 1rem adalah 16 px kecuali elemen html atau pengaturan browser pengunjung mengubahnya.

Apa perbedaan antara rem dan em?

rem selalu relatif terhadap ukuran font root pada elemen html, sehingga 1.5rem memiliki ukuran yang sama di mana pun dalam dokumen. em relatif terhadap ukuran font elemen induknya, sehingga elemen bertingkat terakumulasi: 1.5em di dalam 1.5em lainnya dirender sebesar 2.25 kali ukuran dasar.

Apa trik ukuran font root 62,5 persen?

Menetapkan html { font-size: 62.5%; } membuat root menjadi 10 px, bukan 16 px, sehingga 1rem sama dengan 10 px dan perhitungan mental menjadi mudah: 24 px adalah 2.4rem. Ukuran ini tetap mengikuti preferensi ukuran font browser pengunjung karena 62.5% bersifat relatif, bukan nilai piksel absolut.

Sebaiknya saya menggunakan px atau rem untuk ukuran font?

Gunakan rem untuk ukuran font, jarak, dan media query agar tata letak membesar saat pengunjung menaikkan ukuran font bawaan browser mereka. Gunakan px untuk nilai yang tidak boleh diskalakan, seperti border tipis, pembatas satu piksel, dan beberapa offset bayangan.

Apakah nilai rem harus berupa angka bulat?

Tidak. Browser menangani nilai rem pecahan dengan baik dan menghitung ukuran subpiksel secara internal. Jika Anda menyukai angka yang rapi, pilih ukuran font root yang membagi skala Anda secara merata, seperti 10 px atau 8 px, atau gunakan opsi presisi desimal pada konverter ini.

Apakah rem berfungsi untuk padding, margin, dan media query?

Ya. rem valid di mana pun CSS menerima panjang, termasuk padding, margin, width, gap, dan border-radius. Dalam media query, rem dihitung berdasarkan root awal 16 px, bukan ukuran font html khusus Anda, sehingga breakpoint 48rem selalu sama dengan 768 px.

Sumber Tambahan

• Unit panjang CSS - MDN
• Panjang relatif font - Nilai CSS W3C