Masukkan angka untuk menghitung...
REM
PX
PT
Rumus dasarnya (asumsi standar browser 16px):
1 rem = 16 px = 12 pt
Size Tipografi Web: REM - PX - PT
Biar tidak sering tersesat saat menerjemahkan desain Figma ke kode HTML/CSS, ini rangkuman logis kenapa ketiga makhluk ini punya ego masing-masing:
- PX (Pixel): Satuan absolut paling jujur di layar digital. Jika kamu kunci 16px, maka selamanya dia akan berukuran 16 titik pixel di layar. Masalahnya, PX ini agak keras kepala. Kalau pembaca blogmu memperbesar ukuran font bawaan di pengaturan browser karena faktor mata, elemen bersatuan PX akan menolak untuk ikut membesar. Kurang ramah aksesibilitas.
- REM (Root EM): Satuan relatif yang dinamis dan sangat dicintai robot penilai performa web. Ukurannya merujuk langsung pada font-size elemen root alias tag
<html>. Secara standar browser desktop, 1rem setara dengan 16px. Menggunakan REM memastikan web kamu fleksibel mengikuti preferensi ukuran layar dan kenyamanan mata pengguna. - PT (Point): Satuan fisik kuno yang aslinya lahir di dunia mesin cetak kertas (1pt = 1/72 inci). Di era modern, PT hampir tidak pernah dipakai untuk web harian, kecuali kamu sedang membuat CSS khusus cetak (
@media print) agar layout artikel saat di-print ke kertas kertas A4 ukurannya tetap presisi seperti dokumen resmi.