Apa itu Konverter Satuan Tipografi?
Typography Unit Converter mengonversi antara piksel (px), em, rem, poin (pt), persen (%), dan unit viewport (vw, vh). Tetapkan ukuran font dasar dan ukuran viewport, lalu ketik nilai di kolom mana pun untuk melihat semua unit lainnya langsung diperbarui.
Konversi memakai standar CSS: 1pt = 96/72 px, em dan rem dikalikan dengan ukuran font dasar, persentase menganggap dasar sebagai 100%, dan vw serta vh adalah pecahan dari lebar dan tinggi viewport. Ubah salah satu kolom dan enam sisanya dihitung ulang langsung. Ukuran font dasar default 16px (nilai root yang umum), tetapi bisa diubah ke 14, 18, atau nilai root apa pun yang dipakai design system kamu, dan viewport default 1920×1080 agar vw dan vh tetap akurat.
Cara menggunakan
- Langkah 1 — Atur ukuran font dasar dalam piksel (default 16px) yang menentukan bagaimana unit relatif seperti em, rem, dan % dihitung.
- Langkah 2 — Masukkan nilai numerik di salah satu dari tujuh kolom unit (px, em, rem, pt, %, vw, atau vh) untuk melihat semua unit lainnya langsung diperbarui.
- Langkah 3 — Salin nilai yang sudah dikonversi untuk digunakan dalam CSS, spesifikasi desain, atau tata letak cetak Anda.
Kapan menggunakan
- Menerjemahkan spesifikasi pt dari desainer cetak ke nilai piksel CSS yang sungguh diterapkan oleh stylesheet.
- Mengaudit design system untuk memastikan heading 1.25rem benar-benar jadi 20px di root yang dipilih.
- Memilih nilai em atau % yang tepat di dalam parent yang sudah mengubah ukuran font warisan.
Hasil
Seorang desainer memberikan spesifikasi dalam poin (teks body 14pt). Masukkan 14 di kolom pt dengan basis 16px untuk langsung melihat hasilnya: 18,67px, 1,167em, 1,167rem, dan 116,7% — siap digunakan di stylesheet Anda.
FAQ
- Kenapa 1pt jadi 1.333px, bukan 1px?
- CSS mendefinisikan 1pt sebagai tepat 1/72 inci dan 1in sebagai 96px, jadi 1pt = 96/72 = 1.333px. Itu konversi yang dipakai setiap browser. Ukuran cetak dalam pt terlihat lebih besar di layar dibanding angkanya karena faktor 4/3 ini.
- Apa beda em dan rem?
- rem selalu mengacu pada ukuran font root (elemen <html>). em mengacu pada ukuran font parent terdekat. Maka 2em di dalam parent berukuran 20px adalah 40px, sedangkan 2rem selalu 2 × root tak peduli parent yang bersarang seperti apa.
- Bagaimana pengaturan ukuran font dasar memengaruhi konversi?
- Ia mengubah nilai px untuk 1rem dan 1em. Default 16px cocok dengan kebanyakan browser, jadi 1rem = 16px. Kalau root kamu 18px, 1rem = 18px dan heading 1.25rem menjadi 22.5px alih-alih 20px. Konversi pt tidak terpengaruh karena pt adalah unit absolut.
- Sebaiknya pakai px, rem, atau em di stylesheet?
- rem untuk ukuran font (pengguna bisa menyesuaikan lewat zoom browser atau pengaturan aksesibilitas), px untuk border dan spasi kecil yang butuh ketepatan, dan em untuk spasi yang relatif terhadap ukuran font elemen saat ini (misalnya padding di dalam tombol).
- Kenapa persentase tidak 100% saat px sama dengan basis?
- Sebenarnya iya, coba saja. Kalau px sama dengan basismu (misal 16 dengan basis 16) kolom % menampilkan 100. Kalau muncul angka lain, berarti px tidak benar-benar sama dengan basis, mungkin karena pembulatan di kolom lain, atau kamu mengubah basis setelah mengetik px.
Alat terkait
Konverter Satuan Waktu
Konversi satuan waktu secara instan
Konverter Timestamp
Konversi timestamp Unix ke tanggal
Konverter Torsi
Konversi antara satuan torsi
Konverter Sudut
Konversi derajat, radian, gradian, putaran, menit busur, detik busur, dan DMS
Konverter Luas
Konversi satuan luas secara instan
Konverter Ukuran Pakaian
Konversi ukuran pakaian antara US, UK, EU, AU, JP, dan CN — lewat label atau ukuran tubuh, dengan Prancis, Italia, dan Korea sekali ketuk