Konverter PX ke EM

Alat ini mengonversi nilai piksel (px) menjadi satuan em untuk CSS. Berbeda dengan rem, satuan em bersifat relatif terhadap font-size elemen induk (atau induk terdekat), sehingga hasil konversi selalu bergantung pada konteks penempatannya. Tetapkan ukuran font dasar agar sesuai dengan elemen induk Anda yang sebenarnya, ketik nilai piksel, dan padanan em muncul seketika, siap disalin ke stylesheet Anda.

Dengan dasar bawaan 16px, 16px = 1em. Ubah ukuran font dasar di pengaturan agar sesuai dengan konteks induk tempat nilai itu akan digunakan.

Kapan Menggunakan EM

Ukuran Tingkat Komponen

Buat tombol, lencana, dan kartu yang padding serta jaraknya menyesuaikan bersama saat Anda mengubah font-size komponen.

Jarak yang Menyesuaikan Sendiri

Kaitkan margin dan padding ke ukuran teks lokal agar satu perubahan font-size mengubah ukuran seluruh blok secara proporsional.

Ritme Tipografi

Nyatakan line-height, letter-spacing, dan indentasi relatif terhadap font saat ini demi ritme vertikal yang konsisten.

Cara Mengonversi PX ke EM

1

Tetapkan Ukuran Font Induk

Masukkan font-size elemen induk pada kolom Ukuran Font Dasar (bawaan 16px). Nilai inilah yang menjadi dasar setiap hasil em.

2

Masukkan Nilai Piksel

Pastikan tab satuan px terpilih, lalu ketik nilai piksel yang ingin dikonversi. Padanan em diperbarui saat Anda mengetik.

3

Baca Hasilnya

Nilai em muncul seketika di panel hasil, bersama padanan rem dan px untuk perbandingan cepat. Atur jumlah desimal sesuai presisi yang Anda butuhkan.

4

Salin ke CSS Anda

Klik tombol salin di samping hasil em dan tempel langsung ke stylesheet Anda, tanpa pembagian manual.

Rumusnya: em = px ÷ font-size induk. Contohnya, 24px ÷ 16px = 1.5em.

EM vs REM: Pahami Perbedaannya

Keduanya satuan relatif, tetapi merujuk pada hal yang berbeda. Perbedaan utamanya adalah penumpukan: nilai em bertumpuk saat elemen disarangkan, sedangkan rem selalu mengacu ke akar.

EM

Relatif terhadap induk

Berdasarkan font-size induk terdekat
Bertumpuk pada elemen yang disarangkan
Bagus untuk komponen mandiri
Konteks mengubah nilai terhitung

REM

Relatif terhadap akar

Berdasarkan font-size akar (html)
Tidak pernah bertumpuk — selalu pasti
Bagus untuk tata letak dan tipografi global
Nilai sama di seluruh halaman

Waspadai penumpukan. Jika induk diatur ke 1.25em dan anak juga memakai 1.25em, anak dirender sebesar 1.25 × 1.25 = ~1.56× ukuran kakek. Selalu pastikan konteks induk mana yang menjadi acuan nilai em Anda.

Konversi Umum PX ke EM

Nilai referensi dengan asumsi induk 16px. Ubah dasar pada alat untuk menghitung ulang bagi konteks lain.

Piksel	EM (induk 16px)	Penggunaan Umum
12px	`0.75em`	Keterangan, cetakan kecil
14px	`0.875em`	Teks sekunder, label
16px	`1em`	Dasar teks isi
20px	`1.25em`	Paragraf utama, subjudul
24px	`1.5em`	Judul bagian
32px	`2em`	Judul halaman

Pertanyaan yang Sering Diajukan

Apa sebenarnya ukuran font induk pada alat ini?

Itu adalah font-size elemen yang menjadi acuan nilai em Anda. Peramban menghitung em berdasarkan font-size leluhur terdekat, jadi isi kolom ini dengan nilai font-size induk tersebut pada CSS Anda yang sebenarnya. Nilai bawaan 16px sesuai dengan bawaan umum peramban untuk body.

Bagaimana px dikonversi ke em?

Bagi nilai piksel dengan ukuran font induk: em = px ÷ induk. Dengan induk 16px, 24px menjadi 1.5em. Alat ini menghitungnya seketika dan memungkinkan Anda mengatur jumlah desimal yang ditampilkan.

Sebaiknya pakai em atau rem?

Gunakan em saat Anda ingin ukuran menyesuaikan dengan komponen lokal — misalnya padding yang tumbuh mengikuti teks tombol. Gunakan rem untuk tata letak dan tipografi global yang menginginkan satu nilai pasti di seluruh halaman. Banyak desain memadukan keduanya.

Mengapa nilai em saya tampak berlipat saat disarangkan?

Itu penumpukan. Karena setiap em relatif terhadap induknya, menyarangkan elemen yang masing-masing mengatur font-size em akan melipatgandakan efeknya. Jika Anda butuh nilai yang tetap konstan seberapa pun dalamnya penyarangan, gunakan rem.

Apakah konversi dilakukan di peramban saya?

Ya. Perhitungan berjalan sepenuhnya di sisi klien saat Anda mengetik. Tidak ada yang dikirim ke server, jadi alat ini bekerja seketika dan tetap berfungsi luring setelah halaman dimuat.