Satuan absolut

Satuan absolut menetapkan ukuran tanpa memedulikan konteks elemen di sekelilingnya. Topik ini membahas piksel CSS sebagai satuan absolut yang paling sering dipakai, satuan warisan dunia cetak seperti pt, serta batas aksesibilitas ukuran font berbasis piksel. Setelah membacanya, pemakaian satuan absolut menjadi keputusan yang disengaja, bukan kebiasaan bawaan.

Piksel pada CSS#

Satuan px pada CSS adalah piksel CSS (CSS pixel), bukan piksel fisik pada layar. Pada layar berkerapatan tinggi, satu piksel CSS dirender sebagai beberapa piksel fisik sesuai rasio perangkat (device pixel ratio). Konsekuensinya, ukuran 16px tampak hampir sama pada berbagai perangkat karena browser yang menangani konversinya. Piksel CSS inilah yang menjadi acuan seluruh satuan absolut lain, misalnya 1in yang tetap ditetapkan 96px berapa pun kepadatan layar yang sesungguhnya.

Kestabilan itulah yang menjadikan px pilihan aman untuk garis dan detail kecil. Border setebal 1px, offset bayangan 2px 2px, dan radius sudut 8px tidak perlu mengikuti konteks teks karena bentuknya geometris. Nilai piksel juga tidak berubah ketika font-size induk berubah, sehingga detail tersebut konsisten di mana pun dipakai.

Satuan pt dan warisan cetak#

CSS mengenal lima satuan absolut warisan tipografi cetak, yaitu pt, pc, in, cm, dan mm. Hubungan antar satuan itu ditetapkan secara matematis: 1in sama dengan 96px, 1pt sama dengan 1/72in atau 4/3px, dan 1pc sama dengan 12pt. Nilai-nilai tersebut berlaku di CSS tanpa memedulikan ukuran layar yang sesungguhnya. Tabel berikut merangkum definisi dan pemakaian lazimnya.

Pada layar, satuan cetak jarang memberi keuntungan. Browser mengasumsikan kepadatan 96 piksel CSS per inci, padahal kepadatan nyata tiap perangkat berbeda jauh, sehingga satu elemen 1cm tidak dijamin selebar satu sentimeter fisik. Satuan ini layak dipakai ketika berkas stylesheet yang sama melayani media cetak, misalnya melalui @media print, karena ukuran cetak memang dinyatakan dalam inci atau milimeter.

Satuan px untuk garis dan detail#

Piksel wajar dipakai untuk ukuran yang sebaiknya tidak berubah mengikuti konteks: garis pemisah, bingkai tipis, offset bayangan, radius sudut kecil, dan jarak mikro antar ikon. Ukuran semacam ini geometris, bukan tipografis, sehingga bila ikut membesar bersama teks justru terlihat berlebihan. Satu piksel pada satu perangkat dan satu piksel pada perangkat lain tidak selalu sama ukuran fisiknya, tetapi browser menyatukan pembulatan tersebut agar garis tipis tetap terlihat tegas. Contoh berikut menata kartu jadwal piket dengan detail geometris dalam piksel.

.kartu-piket {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
  padding: 12px;
}

Bingkai 1px tetap setipis itu pada teks 14px maupun 24px, dan bayangannya tetap halus pada berbagai ukuran kartu. Apabila seluruh nilai tersebut dinyatakan dalam em yang besarnya mengikuti ukuran font, bingkai dan bayangan akan ikut membesar pada judul, sesuatu yang jarang diinginkan. Pemisahan ini, yaitu geometri dalam piksel dan tipografi dalam satuan relatif, menjadi dasar disiplin satuan yang sehat.

Ukuran font dalam px dan aksesibilitas#

Berbeda dengan detail geometris di atas, ukuran font berbasis piksel membawa konsekuensi aksesibilitas. Teks yang ditetapkan dalam px tidak mengikuti ukuran font bawaan yang dipilih pengguna pada pengaturan browser. Sebagian pengguna menaikkan nilai bawaan tersebut karena kebutuhan penglihatan, dan halaman yang seluruh ukurannya berbasis piksel mengabaikan preferensi itu.

Aturan praktisnya membagi pekerjaan menjadi dua wilayah. Geometri tetap, seperti bingkai dan bayangan, memakai px tanpa kekhawatiran. Ukuran teks dan spasi yang menyertai teks memakai satuan relatif seperti em dan rem agar tetap mengikuti preferensi pengguna.

Kesalahan umum#

Kesalahan pertama adalah menganggap 1px CSS sama dengan satu piksel fisik. Pada layar berkerapatan tinggi, browser mengalikan piksel CSS dengan rasio perangkat, sehingga pengukuran dengan alat fisik tidak akan cocok dengan nilai yang dideklarasikan. Desain yang membutuhkan garis setipis mungkin tetap memakai 1px dan membiarkan browser yang mengonversinya.

Kesalahan kedua adalah menetapkan seluruh ukuran halaman dalam piksel, mulai dari lebar kontainer hingga jarak antar teks. Halaman semacam itu tidak menskala saat pengguna menaikkan ukuran font bawaan, dan tidak menyesuaikan saat font-size induk berubah. Akibatnya, perbaikan skala harus dilakukan satu per satu pada puluhan deklarasi.

Kesalahan ketiga adalah mengharapkan satuan cetak memberikan ukuran fisik yang persis pada layar. Elemen 1in tidak dijamin selebar satu inci fisik karena asumsi kepadatan 96 piksel per inci jarang cocok dengan layar nyata. Untuk media cetak, satuan tersebut justru tepat sasaran, sedangkan untuk layar pilihlah piksel atau satuan relatif.

Ringkasan#

• px adalah piksel CSS yang dikonversi browser ke piksel fisik sesuai rasio perangkat, sehingga tampak konsisten lintas layar.
• Satuan pt, pc, in, cm, dan mm terkait secara matematis dengan piksel, tetapi bermanfaat terutama pada media cetak.
• px wajar dipakai untuk border, bayangan, radius, dan detail geometris lain yang tidak perlu menskala.
• Ukuran font yang seluruhnya dalam px mengabaikan preferensi ukuran font pengguna, sehingga teks lebih aman memakai satuan relatif.

Referensi#

• length — MDN Web Docs — Daftar lengkap satuan panjang CSS beserta definisi px, pt, dan satuan fisik lainnya.
• CSS values and units — MDN Web Docs — Ringkasan kategori satuan CSS, termasuk seluruh satuan absolut.