Konversi rem ke piksel (px)
Satu rem sama dengan 16 px pada ukuran font bawaan browser, jadi 1,5 rem sama dengan 24 px. Rumusnya satu perkalian: nilai rem dikali ukuran font dasar halaman. Masukkan nilai di kolom pertama, dan jika halaman Anda memakai dasar lain, tulis angkanya di kolom font-size dasar.
Apa itu satuan rem dan piksel di CSS?
rem adalah satuan panjang relatif di CSS. Nilainya sama dengan ukuran font yang dihitung pada elemen root halaman, yaitu elemen html[1]. Jika ukuran font elemen html bernilai 16 px, setiap rem di halaman itu bernilai 16 px. Jika ukuran itu berubah, semua ukuran yang ditulis dalam rem ikut berubah bersamaan.
Piksel (px) di CSS adalah satuan tetap, dan standar CSS mendefinisikannya sebagai 1/96 inci[1]. Karena itu satu inci di CSS sama dengan 96 px, dan konverter inci ke px memakai resolusi bawaan 96 piksel per inci. Dalam arti umum, piksel adalah titik terkecil dalam gambar grafis[2]. Piksel CSS tidak berubah ketika pembaca mengubah ukuran font di browser. Aplikasi desain seperti Figma juga menampilkan ukuran dalam piksel, jadi mengubah rem ke px membantu Anda mencocokkan stylesheet dengan desain.
:root di halaman HTML menunjuk ke elemen html itu sendiri, jadi ukuran font yang ditulis di sini menjadi dasar setiap nilai rem. Pada bagian yang terlihat di foto, selektor ini memuat variabel warna dan tidak mengatur ukuran font, sehingga dasarnya tetap ukuran dari browser. Foto: Pankaj Patel, Unsplash.1 rem berapa px?
1 rem sama dengan 16 px selama ukuran font dasar masih bernilai bawaan, yaitu 16 px di Chrome, Edge, dan Firefox. Rumusnya satu perkalian: px = rem × ukuran font dasar. Jadi 1,5 rem sama dengan 24 px. Nilai 0,875 rem sama dengan 14 px, yaitu ukuran teks text-sm di Tailwind CSS[3].
Angka 16 adalah nilai bawaan dan bisa berubah dari dua arah. Arah pertama adalah stylesheet: aturan html { font-size: 62.5% } membuat dasarnya 10 px, sehingga 1,5 rem menjadi 15 px. Arah kedua adalah pembaca sendiri. Ketika kami memilih Besar pada daftar Ukuran font di Setelan Chrome, ukuran font elemen html menjadi 20 px, dan 1 rem pun menjadi 20 px.
Karena itu konverter ini punya kolom ketiga untuk ukuran dasar. Tulis dasar yang dipakai halaman Anda, dan Anda mendapat ukuran piksel yang dilihat pembaca halaman itu. Jika belum tahu dasarnya, mulai dari angka 16 yang sudah ada di kolom saat konverter dibuka, karena itulah kondisi bawaan di ketiga browser tadi.
Bagaimana cara mengubah rem ke px? Rumus dan contoh
Rumusnya px = rem × font-size, dengan font-size adalah ukuran font elemen html. Ambil contoh jarak 1,25 rem. Pada dasar bawaan 16 px hasilnya 1,25 × 16 = 20 px. Pada dasar 20 px, jarak yang sama menjadi 25 px.
Teknik 62,5% mengatur ukuran font html menjadi 62,5% dari ukuran bawaan, sehingga dasarnya 10 px, karena 62,5% dari 16 adalah 10. Dengan dasar ini nilai langsung terbaca: 2,4 rem sama dengan 24 px. Jika pembaca menaikkan ukuran font browser ke 20 px, dasarnya menjadi 12,5 px, dan 2,4 rem menjadi 30 px. Kolom font-size dasar di konverter menerima persentase seperti yang Anda tulis di stylesheet dan menghitungnya dari 16 px. Tulis 62,5%, dan konverter memakai dasar 10 px.
Rumus yang sama berlaku ke arah sebaliknya dengan pembagian, dan itulah yang dikerjakan konverter px ke rem. Satuan em dihitung dari ukuran font elemen induk, dan untuknya ada konverter em ke px dengan kolom ukuran font induk. Jika ukuran ditulis dalam poin (pt), satuan ukuran huruf di aplikasi pengolah kata, ubah dulu ke piksel di konverter pt ke px.
14px, lalu 0.875rem. Baris kedua datang setelah baris pertama, jadi browser memakai 0.875rem. Pada dasar 16 px hasilnya tetap 14 px, karena 0,875 × 16 = 14. Pada dasar 20 px teksnya menjadi 17,5 px. Foto: Nick Karvounis, Unsplash.Tabel konversi rem ke px pada tiga ukuran dasar
| Nilai rem | Pada 16 px (bawaan) | Pada 10 px (62,5%) | Pada 20 px (Besar) |
|---|---|---|---|
| 0,125 rem | 2 px | 1,25 px | 2,5 px |
| 0,25 rem | 4 px | 2,5 px | 5 px |
| 0,375 rem | 6 px | 3,75 px | 7,5 px |
| 0,5 rem | 8 px | 5 px | 10 px |
| 0,625 rem | 10 px | 6,25 px | 12,5 px |
| 0,75 rem | 12 px | 7,5 px | 15 px |
| 0,8 rem | 12,8 px | 8 px | 16 px |
| 0,875 rem | 14 px | 8,75 px | 17,5 px |
| 0,9 rem | 14,4 px | 9 px | 18 px |
| 1 rem | 16 px | 10 px | 20 px |
| 1,1 rem | 17,6 px | 11 px | 22 px |
| 1,125 rem | 18 px | 11,25 px | 22,5 px |
| 1,2 rem | 19,2 px | 12 px | 24 px |
| 1,25 rem | 20 px | 12,5 px | 25 px |
| 1,3 rem | 20,8 px | 13 px | 26 px |
| 1,375 rem | 22 px | 13,75 px | 27,5 px |
| 1,4 rem | 22,4 px | 14 px | 28 px |
| 1,5 rem | 24 px | 15 px | 30 px |
| 1,6 rem | 25,6 px | 16 px | 32 px |
| 1,625 rem | 26 px | 16,25 px | 32,5 px |
| 1,75 rem | 28 px | 17,5 px | 35 px |
| 1,8 rem | 28,8 px | 18 px | 36 px |
| 1,875 rem | 30 px | 18,75 px | 37,5 px |
| 2 rem | 32 px | 20 px | 40 px |
| 2,25 rem | 36 px | 22,5 px | 45 px |
| 2,5 rem | 40 px | 25 px | 50 px |
| 2,75 rem | 44 px | 27,5 px | 55 px |
| 3 rem | 48 px | 30 px | 60 px |
| 3,5 rem | 56 px | 35 px | 70 px |
| 3,75 rem | 60 px | 37,5 px | 75 px |
| 4 rem | 64 px | 40 px | 80 px |
| 4,5 rem | 72 px | 45 px | 90 px |
| 5 rem | 80 px | 50 px | 100 px |
| 6 rem | 96 px | 60 px | 120 px |
| 8 rem | 128 px | 80 px | 160 px |
| 10 rem | 160 px | 100 px | 200 px |
| 16 rem | 256 px | 160 px | 320 px |
| 20 rem | 320 px | 200 px | 400 px |
| 32 rem | 512 px | 320 px | 640 px |
Berapa piksel ukuran font di Tailwind CSS?
| Kelas Tailwind | Nilai rem | Piksel pada 16 | Piksel pada 20 |
|---|---|---|---|
| text-xs | 0,75 rem | 12 px | 15 px |
| text-sm | 0,875 rem | 14 px | 17,5 px |
| text-base | 1 rem | 16 px | 20 px |
| text-lg | 1,125 rem | 18 px | 22,5 px |
| text-xl | 1,25 rem | 20 px | 25 px |
| text-2xl | 1,5 rem | 24 px | 30 px |
| text-3xl | 1,875 rem | 30 px | 37,5 px |
| text-4xl | 2,25 rem | 36 px | 45 px |
| text-5xl | 3 rem | 48 px | 60 px |
| text-6xl | 3,75 rem | 60 px | 75 px |
| text-7xl | 4,5 rem | 72 px | 90 px |
| text-8xl | 6 rem | 96 px | 120 px |
| text-9xl | 8 rem | 128 px | 160 px |
Berapa ukuran dasar dari setiap pilihan Ukuran font di Chrome dan Edge?
| Pilihan di Chrome | Pilihan di Edge | Ukuran dasar, yaitu 1 rem | 0,875 rem | 1,5 rem | 2 rem |
|---|---|---|---|---|---|
| Sangat kecil | Ukuran font Sangat Kecil | 9 px | 7,88 px | 13,5 px | 18 px |
| Kecil | Ukuran font Kecil | 12 px | 10,5 px | 18 px | 24 px |
| Sedang (Disarankan) | Ukuran Font Sedang (Disarankan) | 16 px | 14 px | 24 px | 32 px |
| Besar | Ukuran font Besar | 20 px | 17,5 px | 30 px | 40 px |
| Sangat besar | Ukuran font Sangat Besar | 24 px | 21 px | 36 px | 48 px |
Penulisan apa saja yang diterima dan dihitung konverter ini?
| Yang Anda ketik atau tempel | Hasil hitungan konverter | Apa yang terjadi dengan penulisan ini |
|---|---|---|
| Kolom pertama: nilai rem, dengan dasar 16 px | ||
| 1,5 | 24 px | Koma desimal, seperti cara menulis angka di Indonesia: 1,5 dikali 16. |
| 1.5 | 24 px | Titik tunggal kami baca sebagai desimal, seperti penulisan di CSS. |
| 1.875rem | 30 px | Nilai CSS dengan rem kami baca sebagai 1,875 rem, karena CSS memang menulis desimal dengan titik. Di bawah kolom muncul petunjuk dengan kemungkinan bacaan lainnya, 1875. |
| 1.875 | 30 px | Tanpa satuan pun titik tunggal selalu kami baca sebagai desimal, meskipun EYD memakai titik untuk ribuan, jadi nilainya 1,875 rem. Di bawah kolom muncul petunjuk; untuk seribu delapan ratus tujuh puluh lima rem, ketik 1875. |
| .875rem | 14 px | Nilai dari file CSS yang dipadatkan, tanpa nol di depan titik: kami baca 0,875 dan mengabaikan kata rem. |
| font-size: 1.5rem; | 24 px | Satu baris utuh dari stylesheet: kami ambil angkanya dan mengabaikan nama properti serta titik koma. |
| --text-sm: 0.875rem; | 14 px | Baris dari variabel tema Tailwind CSS: dua tanda hubung di awal nama variabel tidak dianggap tanda minus. |
| margin-top: -0.5rem; | -8 px | Margin negatif dari stylesheet: tanda minus yang menempel pada angka tetap dihitung, jadi hasilnya negatif. |
| 3/4 | 12 px | Pecahan biasa: 3 dibagi 4 menjadi 0,75 rem. |
| Kolom “font-size dasar”: yang dihitung adalah ukuran dasarnya | ||
| 62,5% | 10 px | Persentase dengan koma: dihitung dari dasar bawaan 16 px, dan 62,5% dari 16 adalah 10. |
| 62.5% | 10 px | Persentase dengan titik, seperti tertulis di CSS: hasilnya sama. |
| 125% | 20 px | Persentase di atas 100%: 125% dari 16 adalah 20, sama dengan dasar dari pilihan Besar di Chrome. |
| font-size: 20px | 20 px | Baris yang disalin dari DevTools: kami ambil angkanya dan mengabaikan nama properti serta satuannya. |
| 18,5 | 18,5 px | Dasar pecahan dengan koma, diterima selama berada di antara 1 dan 100. |
Bagaimana cara mengubah ukuran font dasar di Chrome, Edge, Firefox, dan Safari?
Di Chrome, Edge, dan Firefox, ukuran yang dipilih pembaca menjadi dasar setiap nilai rem di halaman yang dibukanya. Nama pengaturan di sini sesuai tampilan setiap browser dalam bahasa Indonesia.
Chrome
Buka Setelan, lalu Tampilan, dan pilih ukuran pada daftar Ukuran font. Tombol Sesuaikan font membuka halaman dengan penggeser Ukuran font dan Ukuran font minimal.Edge
Buka Pengaturan, lalu Tampilan, lalu Font, dan pilih ukuran pada daftar Ukuran font. Nama pilihannya diawali kata Ukuran font, dan pilihan tengahnya Ukuran Font Sedang (Disarankan). Di bawah daftar ada Ukuran font minimum.Firefox
Buka Pengaturan, lalu bagian Accessibility, lalu Fon, dan pilih angka pada daftar Font size. Bagian ini tampil dalam bahasa Inggris di Firefox berbahasa Indonesia. Tombol Advanced settings membuka jendela Fon, dengan pilihan Fon untuk setiap sistem tulisan dan Ukuran fon minimum. Halaman berbahasa Indonesia memakai kelompok huruf Latin, sama seperti halaman berbahasa Inggris.Safari di Mac
Pilih Safari, lalu Pengaturan, lalu klik Lanjutan. Di sini Safari hanya mengatur batas minimum: aktifkan Jangan pernah gunakan ukuran font yang lebih kecil dari, lalu pilih angkanya. Apple menyarankan 12 atau 14[4].
Mengapa ukuran teks ditulis dalam rem?
Teks yang ditulis dalam rem ikut membesar ketika pembaca menaikkan ukuran font di browser, sedangkan teks dalam piksel tetap. Hal ini dibahas dalam kriteria 1.4.4 Resize Text pada WCAG, pedoman aksesibilitas konten web dari W3C: “Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.”[5] Artinya, teks selain takarir dan gambar teks dapat diperbesar sampai 200 persen tanpa teknologi bantu dan tanpa kehilangan isi atau fungsi. WCAG belum memiliki terjemahan resmi berbahasa Indonesia, jadi kriteria ini kami kutip dalam bahasa Inggris. Konversi ke piksel berguna saat Anda membandingkan hasil dengan desain, sedangkan stylesheet tetap memakai rem.
Konversi satuan lain ke Piksel
Sumber
- CSS Values and Units Module Level 4 — W3C
- Piksel — Wikipedia bahasa Indonesia
- font-size — Tailwind CSS
- Mengubah pengaturan Lanjutan di Safari di Mac — Apple
- Web Content Accessibility Guidelines (WCAG) 2.2 — W3C
- <length> CSS type — MDN Web Docs
Semua nilai dalam tabel kami hitung dari definisi satuan dan kami periksa ulang dengan perhitungan sebelum diterbitkan. Data sejarah dan nama satuan lokal kami dasarkan pada sumber yang disebutkan di atas.
Pembaruan konten terakhir: · ditulis dan diperiksa oleh tim Arteon
Pertanyaan umum tentang konversi rem ke px
Apakah 1 rem selalu 16 px?
1 rem sama dengan 16 px selama ukuran font dasar masih bernilai bawaan[6]. Jika halaman menulis ukuran lain untuk elemen html, atau pembaca mengubah ukuran font di browser, nilai 1 rem ikut berubah. Dengan pilihan Besar di Chrome, misalnya, 1 rem menjadi 20 px.
1,5 rem berapa px?
1,5 rem sama dengan 24 px pada dasar bawaan 16 px. Pada dasar 10 px hasilnya 15 px, dan pada dasar 20 px hasilnya 30 px.
2 rem dan 0,5 rem berapa px?
2 rem sama dengan 32 px pada dasar 16 px, dan 0,5 rem sama dengan 8 px. Keduanya berubah bersama dasarnya: pada dasar 20 px, 2 rem menjadi 40 px dan 0,5 rem menjadi 10 px.
Apa bedanya rem dan em?
rem selalu dihitung dari ukuran font elemen html, jadi nilainya sama di seluruh halaman. em dihitung dari ukuran font elemen induk, sehingga 1.5em di dalam elemen berukuran font 20 px sama dengan 30 px. Untuk menghitung em, gunakan konverter em ke px.
Apakah zoom halaman mengubah nilai 1 rem?
Dalam pengukuran kami di Chrome, 1 rem tetap 16 px setelah halaman diperbesar menjadi 125%. Zoom dari pengaturan Perkecil/perbesar halaman memperbesar semua isi halaman bersamaan, baik yang ditulis dalam rem maupun dalam piksel. Mengubah ukuran font hanya mengubah nilai rem.
Apakah ukuran font minimum mengubah perhitungan rem?
Dalam pengukuran kami di Chrome dan Firefox, tidak. Kami mengatur ukuran minimum 12 px pada halaman yang memakai html { font-size: 62.5% }. Hasilnya 2,4 rem tetap 24 px, jadi rem masih dihitung dari dasar 10 px.
Bagaimana cara mengetahui ukuran dasar sebuah situs?
Buka DevTools di Chrome, pilih elemen html di panel Elemen, lalu buka tab Dikomputasi dan cari font-size. Angka di sana adalah dasar yang dipakai rem di halaman itu saat ini, setelah pengaturan situs dan pengaturan pembaca digabung.
Apakah Tailwind CSS memakai rem?
Ya, ukuran font di Tailwind CSS ditulis dalam rem. Kelas text-base bernilai 1 rem, atau 16 px pada dasar bawaan, dan kelas text-2xl bernilai 1,5 rem, atau 24 px.
Mengapa hasilnya pecahan seperti 17,5 px?
Perkalian dengan dasar selain 16 bisa menghasilkan pecahan: 0,875 rem pada dasar 20 px sama dengan 17,5 px. Konverter menampilkan paling banyak dua angka desimal, dan browser menerima pecahan piksel seperti ini di halaman.
Bantu kami menyempurnakan alat ini
Menemukan angka yang berbeda dengan yang ditampilkan browser Anda, atau punya ide untuk konverter ini? Tulis ke kami.