Piksel ke rem
Konversi nilai piksel ke rem untuk tata letak CSS modern. rem berskala dengan ukuran font root pengguna — lebih baik untuk aksesibilitas daripada px tetap. Root browser default sering kali berukuran 16 px, jadi 24 px = 1,5 rem kecuali proyek menimpa html { font-size }.
Piksel
Ukuran font root (px)
Hasil
1rem
Cara mengonversi px ke rem
1. Masukkan nilai piksel dari desain Anda (misalnya 32 px).
2. Atur ukuran font root (default 16 px jika tidak berubah).
3. Salin hasil rem ke stylesheet Anda.
4. Gunakan rem untuk ukuran font, spasi, dan skala komponen; px untuk batas garis rambut jika diperlukan.
Px ke rem contoh
Jenis badan dan judul
16 px = 1 rem (default). 24 piksel = 1,5 rem judul. 14 px = 0,875 rem teks kecil.
Root kustom 10 px (sistem desain)
Beberapa tim menyetel html { font-size: 62.5% } jadi 1 rem = 10 px. Kemudian token desain 32 px = 3,2 rem.
Skala spasi
kisi 8 px → 0,5 rem pada root 16 px. bantalan 16 piksel = 1 rem; ritme yang konsisten dalam skala mirip Tailwind.
Kapan mengonversi px ke rem
• Saat Anda menerapkan spesifikasi Figma dalam CSS responsif dengan zoom yang dapat diakses.
• Saat Anda menyelaraskan dengan token sistem desain yang ditentukan dalam rem.
• Saat pengguna mengganti ukuran font default browser — tata letak rem beradaptasi.
Kapan memilih sesuatu else
• Bila Anda membutuhkannya dibandingkan dengan font komponen bersarang — gunakan piksel untuk em.
• Bila Anda memerlukan unit area pandang (vw/vh) untuk tata letak layar penuh.
• Saat Anda mencocokkan piksel perangkat 1:1 pada batas retina — batas 1 piksel sering kali tetap dalam piksel.
rem vs em di komponen CSS
em digabungkan di dalam elemen bersarang dengan ukuran font berbeda — padding di em bertambah dengan teks lokal. rem tetap terikat pada root, memberikan jarak antar komponen yang dapat diprediksi. Banyak tim menggunakan rem untuk skala tata letak dan em hanya untuk spasi huruf atau penyesuaian mikro yang terkait dengan tipe lokal.
Alur kerja handoff desain
Desainer mengekspor px dari Figma; pengembang membagi berdasarkan root yang disepakati (dokumen dalam README). Ketika proyek menggunakan trik 62,5%, konfirmasikan sebelum mengonversi — menggabungkan asumsi akan menggandakan atau membagi dua kali UI.
Pertanyaan yang sering diajukan
Apa yang dimaksud dengan rem?
rem = "root em". 1 rem sama dengan ukuran font elemen html, bukan induknya.
Mengapa tidak menggunakan px di mana pun?
Px yang diperbaiki mengabaikan preferensi font pengguna. rem menghormati penskalaan root untuk aksesibilitas (WCAG).
Ukuran font root default?
Sebagian besar browser defaultnya adalah 16 px pada html. Pengguna dapat mengubahnya di pengaturan.
Rumus?
rem = px ÷ rootFontSizePx. Contoh: 20 px 16 = 1,25 rem.
Apakah rem berfungsi untuk margin dan padding?
Ya — rem berlaku untuk properti panjang CSS apa pun, tidak hanya ukuran font.
Apakah data diunggah?
Tidak. Konversi berjalan secara lokal.