Konverter Unit CSS Online
Konversi antara px, rem, em, vw, vh, dan unit CSS lainnya, di browser Anda.
Click any value to copy
Mengapa menggunakannya
Desain responsif tanpa kalkulasi manual
Semua unit CSS
px, rem, em, %, vw, vh, pt, dan lainnya. Konversi instan antara pasangan mana pun.
Basis yang dapat dikonfigurasi
Sesuaikan ukuran font dasar untuk menghitung nilai rem/em yang tepat untuk proyek Anda.
Instan
Hasil real time saat Anda mengetik. Tanpa tombol, tanpa menunggu.
Tanpa registrasi
Alat yang digunakan setiap hari tersedia langsung, tanpa akun atau instalasi.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Masukkan nilainya
Ketik nilai numerik dan pilih unit sumber (misalnya, 24px). Sesuaikan ukuran font dasar jika berbeda dari 16px.
Dapatkan semua ekuivalen
Konverter secara instan menghitung ekuivalen dalam rem, em, %, vw, pt, dan unit CSS lain yang umum digunakan.
Gunakan nilainya dalam CSS Anda
Salin nilai yang Anda butuhkan langsung ke stylesheet Anda. Tanpa kalkulasi manual, tanpa kesalahan.
FAQ
Ada pertanyaan?
Gunakan px untuk nilai yang tidak boleh diskalakan dengan preferensi pengguna: border tipis (1px), bayangan, posisi absolut. Gunakan rem untuk ukuran font dan jarak yang harus menghormati preferensi aksesibilitas pengguna: jika pengguna meningkatkan ukuran font dasar di browser mereka (sebagian besar pembaca layar dan pengguna dengan penglihatan rendah melakukan ini), nilai rem diskalakan secara otomatis. Gunakan em untuk nilai yang relatif terhadap ukuran font elemen induk: berguna dalam komponen yang perlu mempertahankan proporsi internalnya terlepas dari konteks.
16px sebagai ukuran font dasar ditetapkan oleh browser web pada akhir 1990-an, yang berasal dari resolusi monitor khas saat itu (72-96 DPI) dan standar keterbacaan teks untuk membaca di layar. Ini kira-kira setara dengan 12 poin tipografi (12pt), ukuran standar untuk teks isi dalam dokumen cetak sejak era Gutenberg. W3C mengadopsinya sebagai nilai awal untuk properti font-size.
Spesifikasi WCAG 1.4.4 (Resize Text) mengharuskan teks dapat diperbesar hingga 200% tanpa kehilangan konten atau fungsionalitas. Jika Anda menggunakan px untuk ukuran font, teks tidak diskalakan saat pengguna mengubah ukuran dasar di pengaturan browser. Jika Anda menggunakan rem, teks diskalakan secara otomatis. Inilah mengapa panduan aksesibilitas merekomendasikan rem untuk font-size dan line-height, tetapi menerima px untuk border dan dekorasi.
vw (viewport width) dan vh (viewport height) adalah persentase dari ukuran jendela browser. 1vw = 1% dari lebar jendela. Untuk tipografi yang fleksibel, fungsi CSS clamp() digunakan: font-size: clamp(1rem, 2.5vw, 2rem) mendefinisikan ukuran minimum (1rem), ukuran yang disukai yang diskalakan dengan viewport (2.5vw), dan maksimum (2rem). Ini menghasilkan teks yang meningkat secara halus seiring ukuran layar tanpa lompatan mendadak, sehingga menghilangkan kebutuhan media query untuk tipografi.
CSS memiliki unit fisik absolut: cm, mm, in, pt, dan pc. Masalahnya adalah bahwa pada layar, unit-unit ini tidak sesuai dengan pengukuran fisik nyata. Pada layar dengan kepadatan tinggi (Retina, 4K), 1cm dalam CSS mungkin mengukur 0,8cm atau 1,2cm secara fisik tergantung pada perangkat dan DPI yang dideklarasikan. Hanya dalam media cetak (print media query) cm dan mm sesuai tepat dengan pengukuran fisik. Itulah mengapa desainer web menggunakan px, rem, em, dan unit relatif, menyimpan unit absolut untuk gaya cetak.
Unit CSS: spesifikasi, sejarah, dan trik 62,5%
Spesifikasi CSS Units and Values (CSS Values Level 3) diterbitkan oleh W3C pada tahun 2015 dan menstandarisasi unit viewport (vw, vh, vmin, vmax) yang telah mulai diimplementasikan browser secara eksperimental sejak 2012. Unit viewport memecahkan masalah mendasar dalam desain responsif: membuat tata letak dan tipografi yang beradaptasi dengan ukuran layar tanpa media query. CSS Values Level 4 (dalam status draf lanjutan) memperkenalkan unit container query (cqw, cqh, cqi, cqb, cqmin, cqmax), yang merupakan persentase dari container CSS terdekat alih-alih viewport, diaktifkan di semua browser utama sejak akhir 2022.
Trik 62,5% adalah teknik historis untuk menyederhanakan penggunaan rem: dengan mengatur font-size: 62,5% pada elemen html (setara dengan 10px dengan asumsi basis 16px), kalkulasi rem menjadi mudah (1,6rem = 16px, 2,4rem = 24px). Teknik ini dipopulerkan oleh Jonathan Snook sekitar tahun 2011 dalam konteks desain responsif yang berkembang. Namun, teknik ini memiliki masalah aksesibilitas: jika pengguna memiliki ukuran font dasar selain 16px yang dikonfigurasi di browser mereka, 62,5% menyesuaikannya dengan tidak benar, merusak skalabilitas. Inilah mengapa panduan aksesibilitas modern menganjurkan untuk tidak menggunakan teknik ini dan membiarkan font-size html tidak dimodifikasi serta menggunakan rem secara langsung.
CSS Values Level 4 juga memperkenalkan unit relatif-tipografi: cap (tinggi cap), ch (lebar glyph 0), ic (lebar glyph air CJK), lh (line-height elemen), rlh (root line-height), ex (x-height). Unit-unit ini memungkinkan pembuatan jarak yang sempurna proporsional tipografi tanpa mengandalkan nilai numerik tetap. Unit ch sangat berguna untuk mengatur lebar kolom maksimum untuk teks (max-width: 65ch adalah ukuran keterbacaan optimal menurut penelitian tipografi, sekitar setara dengan 65 karakter per baris).