Gratis PX ke REM Konverter
Konversi piksel ke rem dan sebaliknya, dengan ukuran font dasar yang dapat dikonfigurasi.
Tabel referensi
| PX | REM |
|---|
Cara kerjanya
REM artinya "root em" dan relatif terhadap ukuran font elemen root. Secara default, browser menggunakan 16 px. Rumusnya sederhana: rem = px ÷ basis dan px = rem × basis. Ubah ukuran dasar di atas jika proyek Anda menggunakan root yang berbeda.
Pertanyaan umum
Mengapa menggunakan rem alih-alih px?
Satuan REM beradaptasi dengan pengaturan ukuran font pengguna di browser, meningkatkan aksesibilitas. Jika pengguna meningkatkan ukuran font default, layout berbasis rem menyesuaikan secara otomatis, tidak seperti nilai piksel yang tetap.
Apa perbedaan antara em dan rem?
EM relatif terhadap ukuran font elemen induk dan dapat menumpuk dalam elemen bersarang. REM selalu relatif terhadap ukuran font elemen root (<html>), yang membuatnya lebih dapat diprediksi.
Basis apa yang harus saya gunakan?
Sebagian besar proyek menggunakan default browser 16 px. Beberapa developer mengatur html { font-size: 62.5%; } (10 px) untuk perhitungan yang lebih sederhana. Gunakan ukuran font root yang ditetapkan untuk proyek Anda.
Apa sebenarnya rem itu
«Rem» singkatan dari root em. Spec W3C CSS Values Level 3 mendefinisikannya sebagai «sama dengan nilai terkomputasi dari font-size pada elemen root», yaitu pada elemen <html>. Browser default <html> ke 16px kecuali ditimpa, sehingga pada halaman vanilla 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px, 2rem = 32px.
Jika stylesheet mendeklarasikan html { font-size: 20px }, maka 1rem = 20px untuk seluruh dokumen. Jika pengguna telah meningkatkan default browser mereka ke 24px (penyesuaian low-vision yang umum), 1rem = 24px bahkan tanpa penimpaan stylesheet, dan itulah seluruh argumen aksesibilitas untuk rem dalam satu kalimat.
Mengapa rem penting: argumen aksesibilitas
Browser mengekspos dua mekanisme penskalaan yang berbeda kepada pengguna, dan keduanya berperilaku berbeda terhadap satuan:
- Zoom browser (Cmd/Ctrl + atau pinch), menskalakan seluruh viewport secara seragam. Elemen 16px pada zoom 200% menempati ruang layar yang sama dengan elemen 32px pada zoom 100%.
pxmaupunremdiskalakan secara identis di bawah zoom, sehingga zoom sendiri tidak membenarkan rem. - Preferensi ukuran font default browser: tersembunyi di pengaturan browser (Firefox
about:preferences, Customize fonts Chrome). Ketika pengguna mengubah «Default font size» dari 16 ke 24 (sangat umum bagi pengguna low-vision), elemen<html>mulai dikomputasi pada 24px. Setiap nilairemsecara otomatis diskalakan 1,5×; setiap nilaipxyang tetap tidak berubah.
Inilah mengapa tata letak yang dibangun dengan rem menghormati preferensi aksesibilitas pengguna dan tata letak yang dibangun dengan px tidak. WCAG 2.2 Success Criterion 1.4.4 (Resize Text, Level AA) mensyaratkan bahwa teks dapat diperbesar hingga setidaknya 200% tanpa kehilangan konten atau fungsi. Zoom browser saja secara teknis memenuhi ini, tetapi tata letak berbasis rem memenuhinya lebih bersih karena menghormati mekanisme ukuran-font-default yang lebih granular, yang merupakan apa yang sebenarnya disesuaikan pengguna low-vision sehari-hari.
Gotcha compounding em yang memotivasi rem
Sebelum rem, satu-satunya cara mendapatkan tipografi yang skalabel dalam CSS adalah em, yang relatif terhadap font-size elemen induk, bukan root. Masalah klasik: elemen bersarang dengan ukuran font berbasis em saling mengalikan.
.list { font-size: 1.2em; }
.list .list { font-size: 1.2em; } /* renders at 1.44× the grandparent */
.list .list .list { font-size: 1.2em; } /* now 1.728× */Tiga daftar bersarang membengkak hingga hampir dua kali ukuran body, yang hampir tidak pernah disengaja. rem memecahkan ini dengan mengacu ke root setiap saat, tiga elemen bersarang pada 1.2rem semuanya 19,2 px tanpa memandang kedalaman nesting. Inilah mengapa sebagian besar stylesheet modern menggunakan rem untuk font-size dan menyimpan em untuk proporsi internal komponen (ukuran ikon yang harus sesuai dengan teks tombol, padding di dalam tombol yang diskalakan bersama labelnya).
Trik 62,5%, matematika yang nyaman, aksesibilitas yang bisa diperdebatkan
Pola yang dipopulerkan oleh Jonathan Snook dalam artikelnya Mei 2011: setel html { font-size: 62.5% }. Karena 62,5% × 16 = 10, ini membuat 1rem = 10px secara default, matematika mental yang nyaman. 1.6rem = 16px, 2.4rem = 24px, 4.8rem = 48px. Para desainer menyukainya karena menghilangkan aritmetika «bagi 16» yang tidak nyaman dari setiap nilai.
Kritik aksesibilitas (diangkat saat itu dan diperkuat dalam tulisan-tulisan kemudian): menyetel root font-size ke 62,5% secara efektif mengecilkan apa pun yang telah dipilih pengguna dalam preferensi browser mereka. Pengguna yang menyetel defaultnya ke 24px karena low-vision akan melihat teks body pada 15px, mengalahkan seluruh tujuan penggunaan rem. Sanggahan modern adalah menyetel root ke 62,5% tetapi secara eksplisit mendeklarasikan font-size body pada 1.6rem (kembali ke 16px) sehingga penimpaan pengguna tetap mengalir dengan benar. Banyak tim melewatkan trik tersebut sepenuhnya dan hidup dengan matematika yang sedikit kurang elegan.
Kapan menggunakan rem, kapan menggunakan px, kerangka Comeau
Artikel Josh W. Comeau «px or rem?» (Mei 2022, diperbarui Mei 2025) menawarkan heuristik satu pertanyaan yang paling berguna untuk keputusan ini. Tanyakan: «Haruskah nilai ini diskalakan saat pengguna meningkatkan ukuran font default browser mereka?» Jika ya, gunakan rem. Jika tidak, gunakan px.
Berdasarkan tes itu:
- Gunakan rem untuk: font-size, margin/padding vertikal (yang terikat pada ritme tipografi), lebar tombol dan container berbentuk konten lainnya, max-width panjang baris, breakpoint (agar pergeseran tata letak terjadi pada ukuran yang tepat saat di-zoom untuk pengguna low-vision).
- Gunakan px untuk: border (hairline 1px harus tetap hairline), padding/dekorasi horizontal, radius shadow, ukuran gambar ketika gambar memiliki maksud piksel tetap, dimensi ikon halus.
Tes satu pertanyaan menghasilkan jawaban yang konsisten di ribuan keputusan dalam sebuah codebase, itulah keuntungan nyatanya, stylesheet yang dihasilkan berperilaku sesuai harapan pengguna di bawah zoom maupun kustomisasi ukuran font.
Tailwind CSS 4 beralih ke rem di mana-mana
Tailwind CSS v4.0 (Januari 2025) menghadirkan skala default berbasis rem sepenuhnya. Setiap token tipografi (text-xs 0,75rem hingga text-9xl 8rem) dan setiap token spacing (p-1 0,25rem, p-4 1rem, m-8 2rem) menggunakan rem secara default. Tailwind 4 sengaja membiarkan root <html> pada default browser 16px (mereka secara eksplisit tidak menerapkan trik 62,5%) sehingga preferensi aksesibilitas pengguna mengalir dengan bersih. Puluhan juta proyek kini menghadirkan sistem desain berbasis rem secara default, yang merupakan argumen terkuat bahwa ekosistem telah berkonvergensi.
Tabel konversi pada root 16px default
| Piksel | Rem | Penggunaan umum |
|---|---|---|
| 8 px | 0,5 rem | Setengah unit dasar, spasi kecil |
| 12 px | 0,75 rem | Caption / teks kecil |
| 14 px | 0,875 rem | Teks sekunder |
| 16 px | 1 rem | Teks isi default |
| 18 px | 1,125 rem | Isi yang sedikit ditekankan |
| 20 px | 1,25 rem | Paragraf pembuka |
| 24 px | 1,5 rem | Heading H4; teks UI besar |
| 32 px | 2 rem | Heading H3 |
| 48 px | 3 rem | Heading H2 / hero |
| 64 px | 4 rem | Heading H1 / display |
Di mana rem cocok dalam toolkit modern
Rem adalah default yang tepat untuk tipografi dan spacing yang terikat tipografi, tetapi bukan jawaban untuk setiap masalah tata letak. Toolbox modern juga mencakup:
- clamp() untuk tipografi fluid,
font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem)menetapkan lantai dan langit-langit rem dengan tengah yang digerakkan viewport. CSS Units Konverter - Satuan viewport (
vw,vh, dan yang lebih barusvh/lvh/dvhuntuk mobile), untuk hero section dan elemen full-bleed yang harus diskalakan bersama viewport daripada tipografi. - Satuan container query (
cqw,cqh), untuk desain berbasis komponen di mana komponen yang sama mungkin muncul pada lebar yang berbeda.
Untuk selebihnya (teks body, heading, padding, lebar tombol, breakpoint) rem adalah jalur yang paling mudah dan default yang paling aksesibel.
Pertanyaan lainnya
Bagaimana jika proyek saya menggunakan ukuran font dasar non-default?
Ubah bidang Base font size di atas ke nilai yang dihasilkan oleh html { font-size: … } proyek Anda. Matematika konversinya tetap rem = px ÷ base terlepas dari basenya. Jika codebase Anda menggunakan 18px, 32px menjadi 1.78rem; pada 10px (trik 62,5%) itu menjadi 3.2rem. Perlu diketahui bahwa menimpa root font-size memiliki implikasi aksesibilitas bagi pengguna yang menyesuaikan default browser mereka, lihat diskusi trik 62,5% di atas.
Mengapa 0,625rem tidak dirender tepat menjadi 10px?
Benar, secara matematis, pada root 16px default, 0.625 × 16 = 10. Namun browser merender dengan presisi subpiksel dan dapat menjepitkan nilai akhir ke piksel perangkat bulat, sehingga border 0.625rem terkadang dapat terlihat sedikit berbeda dari border 10px yang di-hardcode tergantung DPR monitor. Untuk hairline 1 piksel yang pixel-perfect, gunakan 1px secara langsung; untuk selebihnya, nilai berbasis rem tidak masalah.
Bisakah saya mencampur rem dan px dalam stylesheet yang sama?
Ya, dan sebaiknya Anda melakukannya. Gunakan rem untuk hal-hal yang harus diskalakan bersama preferensi font-size pengguna (tipografi, ritme vertikal, breakpoint) dan px untuk hal-hal yang tidak perlu (border, detail ikon, shadow dekoratif). Pertanyaan «should this scale?» Comeau adalah filter praktisnya; jawabannya hampir selalu secara bersih memetakan ke satu satuan atau yang lainnya.
Apakah build tool mengonversi px ke rem secara otomatis?
Ya, plugin PostCSS seperti postcss-pxtorem dan postcss-rem-to-responsive-pixel dapat menulis ulang nilai px dalam CSS yang Anda buat menjadi rem selama langkah build, dengan ambang yang dapat dikonfigurasi (misalnya, «konversi apa pun ≥ 12px»). Mereka berguna saat migrasi codebase yang berat-px yang sudah ada. Konverter langsung seperti halaman ini masih berguna untuk hal satu kali, pencarian spesifikasi desain, dan mempelajari matematikanya secara manual.
Apakah ada yang dikirim ke server?
Tidak. Konversi adalah satu pembagian, aritmetika JavaScript murni yang berjalan secara lokal di browser Anda. Tidak ada tentang input Anda yang meninggalkan halaman; alat ini bekerja secara offline setelah dimuat.