How do you convert px to rem?

Divide the pixel value by the root font size. At the default 16px root, rem = px / 16, so 24px = 1.5rem and 8px = 0.5rem. To go the other way, multiply: px = rem x 16.

What is the difference between rem and em?

rem is always relative to the root (html) font size, so it is predictable everywhere. em is relative to the font size of the current element's parent, so it compounds when nested. Use rem for global sizing and em for component-relative spacing.

Why should I use rem instead of px for font sizes?

rem scales with the user's browser font-size setting, so people who increase their default text size get larger text everywhere. Fixed px font sizes ignore that preference and hurt accessibility.

Does 1rem always equal 16px?

Only if the root font size is 16px, which is the browser default. If your CSS sets html { font-size: 62.5% } then 1rem = 10px. Always convert against your actual root size — this tool lets you set it.

Should I use the 62.5% font-size trick?

Setting html { font-size: 62.5% } makes 1rem = 10px so the math is easier. It works, but it overrides the user's preferred base size for any px-based content and can complicate third-party components. Many teams keep the 16px default and let a converter handle the math instead.

Can I convert a whole type scale at once?

Yes. The Batch / Scale tab converts a list of px values (or a common 10-96px scale) to rem in one table, with a copy button per row and a CSV export for the full set.

Konverter PX ke REM — px ⇄ rem ⇄ em, Basis Apa Pun

📋

Panduan langkah demi langkah

Cara menggunakan kalkulator ini

3 langkah

1

Konfirmasikan ukuran font root Anda

Konverter perlu mengetahui ukuran font root (html) untuk melakukan perhitungan. Browser defaultnya adalah 16px, jadi 1rem = 16px. Biarkan basisnya di 16 kecuali CSS Anda menetapkan ukuran font html yang berbeda (misalnya, trik 62,5% menjadikannya 10 piksel).

2

Masukkan nilai dan pilih arah

Ketik nomor yang ingin Anda konversi dan pilih px → rem atau rem → px. Hasilnya diperbarui secara instan — 24px menjadi 1,5rem pada root 16px. Nilai negatif diperbolehkan untuk hal-hal seperti margin negatif.

3

Salin nilai siap CSS atau konversi seluruh skala

Klik Salin untuk mengambil nilai yang diformat (misalnya 1,5rem) langsung ke stylesheet Anda. Untuk mengonversi skala tipe penuh sekaligus, buka tab Batch / Scale, muat skala umum 10–96 piksel atau tempelkan daftar Anda sendiri, dan salin baris mana pun atau ekspor tabel sebagai CSV.

⚡

Referensi

Rumus dan metodologi

3 rumus

px ke rem

rem = px ÷ base

Bagilah nilai piksel dengan ukuran font akar (dasar). Pada root default 16px, 24 ÷ 16 = 1,5, jadi 24px = 1,5rem.

rem ke px

px = rem × base

Kalikan nilai rem dengan ukuran font root. 1,5 × 16 = 24, jadi 1,5rem = 24px pada root 16px.

px ke mereka

em = px ÷ parent

em relatif terhadap ukuran font elemen induk, bukan root. Dengan target 18px di dalam induk 20px, 18 ÷ 20 = 0,9em.

📖

Glosarium

Penjelasan istilah penting

5 istilah

Satuan panjang CSS yang setara dengan satu piksel yang tidak bergantung pada perangkat (1/96 inci). Ukurannya tetap — tidak merespons preferensi ukuran font browser pengguna.

Panjang yang relatif terhadap ukuran font elemen akar (html). 1rem sama dengan ukuran font root — 16px secara default — dan tetap konsisten tidak peduli seberapa dalam elemen disarangkan.

Panjang yang relatif terhadap ukuran font elemen saat ini (untuk ukuran font) atau induknya (untuk properti lainnya). Karena em dapat digabungkan melalui elemen bersarang, yang terbaik adalah ukuran relatif komponen.

Ukuran font diatur pada elemen html. Defaultnya adalah 16px dan merupakan referensi yang digunakan oleh semua nilai rem. Pengaturan html { font-size: 62.5% } membuat basis 10px.

Sekumpulan ukuran font standar yang digunakan di seluruh desain (misalnya 12, 14, 16, 20, 24, 32 piksel). Mengonversi seluruh skala menjadi rem sekaligus menjaga spasi dan tipografi tetap konsisten dan mudah diakses.

👥

Skenario

Contoh dalam kehidupan nyata

3 contoh nyata

🎨

Penyerahan desain ke kode

Judul 24px dari mockup

Nilai 24 piksel Ukuran font akar 16 piksel

24 ÷ 16 = 1.5, sehingga judulnya menjadi font-size: 1.5rem. Menggunakan rem alih-alih 24px berarti pengunjung yang menyetel browser mereka ke ukuran teks default yang lebih besar akan mendapatkan judul yang lebih besar secara proporsional — desainnya tetap dapat diakses tanpa pertanyaan media tambahan.

🧮

Membaca kembali nilai rem

Sebuah komponen menggunakan 0,875rem dan Anda memerlukan px

Nilai 0,875 rem Ukuran font akar 16 piksel

0,875 × 16 = 14, jadi 0,875rem ditampilkan pada 14 piksel pada halaman default. Beralih arah ke rem → px memudahkan pemeriksaan kewarasan apakah nilai rem perpustakaan cocok dengan ukuran piksel yang Anda inginkan.

🔁

Jarak relatif komponen dengan em

Padding 18px di dalam tombol teks 20px

Nilai 18 piksel Ukuran font induk 20 piksel

18 ÷ 20 = 0,9, jadi padding: 0,9em berskala dengan ukuran font 20 piksel milik tombol itu sendiri. Jika Anda mengubah teks tombol menjadi 24 piksel, padding 0,9em akan ikut bertambah — yang merupakan perilaku penggabungan yang menjadikannya ideal untuk komponen mandiri dan berisiko untuk tata letak global.

🔗

Referensi

Sitasi kalkulator ini

APA & MLA

Gunakan salah satu format ini untuk menyitasi kalkulator dalam makalah, laporan, atau daftar sumber.

APA

MLA

📄

Ulasan mendalam

px, rem, dan em: memilih unit CSS yang tepat

3 bab · 4 menit membaca

CSS modern memberi Anda tiga satuan panjang umum untuk tipografi dan spasi — px, rem, dan em. Mereka mudah untuk diubah, namun memilih yang tepat memiliki konsekuensi nyata terhadap aksesibilitas dan pemeliharaan. Panduan ini menjelaskan perhitungannya, trade-offnya, dan kapan harus mencapai masing-masingnya.

Cara kerja konversi

Setiap konversi di sini adalah pembagian atau perkalian tunggal. rem diukur berdasarkan ukuran font root (elemen html), yang defaultnya adalah 16 piksel, jadi rem = px ÷ 16 dan px = rem × 16. Ubah akar dan pembaginya pun ikut berubah — alat ini memungkinkan Anda menetapkan basis apa pun. em bekerja dengan cara yang sama tetapi bertentangan dengan ukuran font elemen itu sendiri (atau induknya), bukan akarnya, jadi em = px induk. Hasil dibulatkan menjadi empat desimal dan angka nol di belakangnya dihilangkan, sehingga 24 piksel ditampilkan kembali sebagai 1.5rem yang bersih, bukan 1.5000rem.

Mengapa rem mengalahkan px untuk aksesibilitas

Satu-satunya alasan terbesar untuk memilih rem adalah menghormati pengaturan browser pengguna. Saat seseorang meningkatkan ukuran font defaultnya — umum bagi pengguna dengan gangguan penglihatan — setiap ukuran berbasis rem akan ikut meningkat. Ukuran font piksel yang keras mengabaikan preferensi tersebut sepenuhnya, sehingga teks tertahan pada ukuran yang Anda pilih. Menggunakan rem untuk ukuran font (dan sering kali untuk spasi) adalah salah satu keunggulan aksesibilitas termurah yang tersedia, dan itulah sebabnya sebagian besar sistem desain mengekspresikan skala tipenya dalam rem. Default 16px juga merupakan dasar yang masuk akal: cocok dengan default browser tempat dunia sadar WCAG dibangun.

Kapan menggunakannya, dan trik 62,5%.

Raih em bila Anda ingin suatu nilai diskalakan dengan komponen tertentu, bukan keseluruhan laman — padding di dalam tombol yang akan tumbuh bersama teks tombol, atau ukuran ikon yang sesuai dengan labelnya. Tangkapannya semakin rumit: buat sarang elemen berukuran em dan tumpukan pengali, yang mungkin akan mengejutkan Anda. Beberapa tim menetapkan html { font-size: 62.5% } sehingga 1rem = 10px dan perhitungan mental lebih mudah (1.6rem = 16px). Ini berfungsi, tetapi itu mengesampingkan ukuran dasar pengguna untuk konten pihak ketiga berbasis px dan menambahkan lapisan tipuan. Konverter menghilangkan alasan utama orang menggunakan trik tersebut — Anda dapat mempertahankan default 16 piksel yang dapat diakses dan membiarkan alat tersebut menangani aritmatika.

❓

Pertanyaan

Pertanyaan umum

7 pertanyaan

Bagaimana cara mengonversi px ke rem?+

Bagilah nilai piksel dengan ukuran font akar. Pada root default 16px, rem = px / 16, jadi 24px = 1.5rem dan 8px = 0.5rem. Untuk mengkonversi kembali, kalikan: px = rem × 16. Alat ini melakukan kedua arah dan memungkinkan Anda mengubah ukuran root jika ukuran Anda bukan 16px.

Apa perbedaan antara rem dan em?+

rem selalu relatif terhadap ukuran font root (html), sehingga tetap dapat diprediksi di mana pun elemen berada. em relatif terhadap ukuran font elemen saat ini atau induknya, sehingga akan digabungkan ketika elemen disarangkan. Gunakan rem untuk tipografi dan tata letak global, dan em untuk ukuran yang harus diskalakan dengan komponen tertentu.

Mengapa saya harus menggunakan rem daripada px untuk ukuran font?+

rem disesuaikan dengan pengaturan ukuran font browser pengunjung, sehingga orang yang menaikkan ukuran teks defaultnya — sering kali agar mudah dibaca — mendapatkan teks yang lebih besar di mana saja. Memperbaiki ukuran font px mengabaikan preferensi itu, sehingga mengganggu aksesibilitas. Itu sebabnya sebagian besar sistem desain menyatakan skala tipenya dalam rem.

Apakah 1rem selalu sama dengan 16px?+

Hanya jika ukuran font root adalah 16px, yang merupakan default browser. Jika CSS Anda menyetel html { font-size: 62.5% } maka 1rem = 10px, dan jika 18px maka 1rem = 18px. Selalu konversikan berdasarkan ukuran root Anda yang sebenarnya — atur di kolom dasar di atas.

Haruskah saya menggunakan trik ukuran font 62,5%?+

Setting html { font-size: 62.5% } menjadikan 1rem = 10px sehingga perhitungannya lebih mudah. Ini berfungsi, tetapi mengabaikan ukuran dasar pilihan pengguna untuk konten berbasis px dan dapat mempersulit komponen pihak ketiga. Banyak tim tetap menggunakan 16px sebagai default dan membiarkan konverter menangani penghitungannya.

Bisakah saya mengonversi seluruh skala tipe sekaligus?+

Ya. Tab Batch / Scale mengonversi daftar nilai px — atau skala umum bawaan 10–96px — menjadi rem dalam satu tabel, dengan tombol salin di setiap baris dan ekspor CSV untuk set lengkap. Ini adalah cara tercepat untuk mengubah skala piksel desain menjadi stylesheet berbasis rem.

Bisakah saya berbagi konversi dengan rekan satu tim?+

Ya. Tab Konversi Tunggal mengkodekan nilai, arah, dan ukuran akar ke dalam URL halaman, sehingga menyalin tautan (atau menggunakan tombol Bagikan) akan mereproduksi konversi yang tepat untuk siapa pun yang membukanya.

Unduh PDF satu halaman berisi hasil Anda. Masukkan alamat email untuk menerima kiat kalkulator sesekali. Tanpa spam, dan Anda dapat berhenti berlangganan kapan saja. Privasi.

Konverter PX ke REM

Hasil konversi