Konversi ukuran font CSS antara px, pt, em, rem, vw, vh, dan persen dengan ukuran root, induk, dan viewport yang dapat diatur. Lihat bagaimana em mengikuti induk dan rem mengikuti root dalam satu tabel.
Overview
Konverter Tipografi CSS menerjemahkan ukuran font antara px, pt, em, rem, vw, vh, dan persen. Alat ini memungkinkan Anda mengatur ukuran font root, ukuran font induk, dan ukuran viewport sehingga satuan relatif terselesaikan persis seperti di tata letak Anda.
Common Use Cases
Mengonversi spesifikasi desain antara px dan rem untuk styling yang aksesibel
Menyamakan ukuran cetak dalam pt dengan ukuran layar dalam px
Menskala teks relatif terhadap ukuran font root (rem)
Memeriksa perilaku nilai vw/vh pada viewport target
Mengonversi ukuran font berbasis persen ke satuan absolut
Membangun sistem tipografi fluida yang konsisten
Mengaudit penggunaan satuan CSS yang ada di suatu proyek
How to Use
1
Ketik nilai ukuran font dan pilih satuannya.
2
Atur ukuran font root, ukuran font induk, dan ukuran viewport sesuai proyek Anda (default root browser adalah 16 px).
3
Semua satuan langsung diperbarui dalam satu tabel; baris input disorot.
4
Gunakan tombol Print untuk mencetak tabel konversi.
Example Scenario
Ukuran body 16 px
Masukkan 16 px dengan root 16 px. Tabel menampilkan 16 px = 12 pt = 1 em = 1 rem = 100% (dari induk 16 px) = 0,83 vw pada viewport 1920 px.
Technical Notes
Piksel adalah satuan absolut yang menjadi acuan semua konversi. 1 px = 1 piksel CSS, dan 1 pt = 96/72 px (sekitar 1,333 px).
em dan persen mengikuti ukuran font elemen induk. 1 em = ukuran induk, 100% = ukuran induk.
rem selalu mengikuti ukuran font root (html), mengabaikan induk. Default browser adalah 16 px.
vw dan vh adalah 1% dari lebar dan tinggi viewport. Hasil bergantung pada ukuran viewport yang Anda masukkan.
Common Mistakes
Memakai rem padahal maksudnya mengikuti elemen induk (em)
Menganggap em dan rem selalu sama — keduanya berbeda saat ukuran induk dan root berbeda
Melupakan bahwa root dapat diubah pengguna atau oleh CSS reset
Menghitung vw dari lebar viewport yang salah
Frequently Asked Questions
Sebagian besar browser memakai 16 px. Satu rem sama dengan ukuran font root, jadi 1 rem ≈ 16 px kecuali root diubah.
em mengikuti ukuran font elemen induk; rem mengikuti ukuran font root. Keduanya sama hanya jika ukuran induk sama dengan ukuran root.
vw adalah 1% lebar viewport, jadi pada ponsel 375 px, 100 vw = 375 px. Teks berukuran vw ikut menyusut sesuai lebar perangkat, yang bisa membuatnya terlalu kecil di layar sempit.
Related Topics
Satuan CSSem rem pxTipografi fluidaSatuan viewportDesain responsifUkuran font