Konverter PT ke PX

Konverter PT ke PX mengubah poin menjadi piksel — dan piksel kembali menjadi poin — untuk pekerjaan layar maupun cetak. Sebagian besar konverter memberi satu angka berdasarkan rasio CSS tetap 1pt = 1.3333px. Jawaban itu benar di browser dan salah hampir di semua tempat lain karena poin adalah unit fisik, dan jumlah piksel di dalamnya bergantung pada resolusi keluaran. Alat ini memberi Anda keduanya: nilai CSS yang benar-benar akan dirender browser serta nilai piksel perangkat pada 72, 150, 300, 600, atau DPI khusus apa pun, ditambah ukuran fisik sebenarnya dalam milimeter dan inci pada penggaris nyata.

Rumus PT ke PX

Satu poin didefinisikan tepat sebagai satu per tujuh puluh dua inci. Satu inci berisi piksel sebanyak yang ditentukan resolusi keluaran. Gabungkan kedua fakta tersebut dan konversinya menjadi:

Di web, resolusi bukan variabel. Spesifikasi CSS menetapkan 1in = 96px berdasarkan definisi, sehingga browser selalu menggunakan 96 dan rumusnya menjadi konstanta:

Itulah sebabnya 12pt adalah 16px di setiap browser pada perangkat apa pun, baik panel laptop 1× maupun layar ponsel 3×. Piksel CSS adalah unit referensi, bukan piksel perangkat keras.

Satu Inci, Tiga Nama

Cara termudah untuk menjaga unit-unit ini tetap jelas adalah mengingat bahwa semuanya menjelaskan jarak fisik yang sama. Setiap batang di bawah lebarnya tepat satu inci:

Tabel Konversi PT ke PX

Kolom web adalah yang Anda perlukan untuk CSS. Kolom 300 DPI adalah yang Anda perlukan saat mengekspor PDF menjadi gambar raster, menyusun file cetak, atau mengatur ukuran teks dalam bitmap yang akan dicetak.

Mengapa Ukuran Poin yang Sama Menghasilkan Jumlah Piksel Berbeda

Inilah hal utama yang sering membingungkan orang, jadi perlu dijelaskan dengan gamblang. Ukuran fisiknya tidak pernah berubah: 12pt selalu sama dengan seperenam inci. Yang berubah adalah seberapa halus Anda mengambil sampel inci tersebut.

• 72 DPI — resolusi layar Macintosh historis, dipilih tepat agar 1pt = 1px. Masih menjadi default dalam beberapa pipeline gambar lama, sehingga teks 12pt terkadang diekspor hanya menjadi 12 piksel yang mengecewakan.
• 96 DPI — default Windows dan resolusi referensi yang menjadi dasar definisi CSS. Inilah jawaban web dan resolusi yang digunakan browser Anda.
• 150 DPI — kualitas cetak draf, atau pekerjaan format besar yang dimaksudkan untuk dibaca dari jauh.
• 300 DPI — standar cetak komersial. Keterangan 12pt dalam ekspor 300 DPI memerlukan tinggi 50 piksel, bukan 16.
• 600 DPI — gambar garis detail, pekerjaan percetakan kelas atas, dan keluaran laser yang mengutamakan garis sangat tipis.

Jika Anda pernah mengekspor karya pada "ukuran yang tepat" tetapi menemukan teksnya menjadi buram dan berpiksel, rasio ini hampir selalu penyebabnya: tata letak diukur dalam poin sementara raster dibuat pada 72 atau 96 DPI, bukan 300.

Apa yang Sebenarnya Diukur oleh Ukuran Poin

Font 12pt bukan huruf terlihat setinggi 12 poin. Ukuran poin menjelaskan kotak em — kisi desain tak terlihat tempat jenis huruf digambar. Seberapa besar bagian kotak itu yang ditempati huruf sepenuhnya bergantung pada desainer jenis huruf, sehingga dua font dengan ukuran poin yang sama dapat tampak sangat berbeda skalanya.

Haruskah Anda Menggunakan pt atau px dalam CSS?

Untuk gaya layar, gunakan px atau rem. Poin adalah unit absolut dalam CSS, sama seperti px, sehingga memiliki kekurangan aksesibilitas yang sama: teks berukuran pt mengabaikan preferensi ukuran font browser pengunjung. Penggunaan pt juga dapat membingungkan karena rekan yang membaca stylesheet mungkin mengira unit itu berarti poin fisik pada perangkat keluaran, padahal tidak.

Tempat pt benar-benar berguna adalah stylesheet cetak karena keluarannya memang diukur dalam inci:

@media print {
  body { font-size: 11pt; line-height: 1.45; }
  h1   { font-size: 24pt; }
  h2   { font-size: 18pt; }
  .no-print { display: none; }
}

Browser memetakan poin tersebut terhadap ukuran kertas sebenarnya saat membuat pekerjaan cetak, sehingga isi 11pt benar-benar tercetak sebagai 11pt di halaman — sama seperti ukuran yang dihasilkan pengolah kata.

Mengonversi Dokumen Word atau InDesign ke Web

1. Ambil ukuran poin langsung dari stylesheet dokumen — biasanya isi 11pt, subjudul 16pt, dan judul 24pt.
2. Tempel semuanya sekaligus ke kolom nilai, pisahkan dengan koma, dan biarkan resolusi pada 96.
3. Baca kolom piksel CSS. 11pt menjadi 14.67px, 16pt menjadi 21.33px, dan 24pt menjadi 32px.
4. Bulatkan ke skala yang rapi sebelum digunakan. Tipografi cetak dapat menerima pecahan aneh; skala tipe web biasanya lebih nyaman dibaca pada piksel bulat atau setengah piksel, sehingga 14.67px biasanya menjadi 15px atau 16px.
5. Konversikan nilai piksel akhir ke rem jika sistem desain Anda menggunakan unit relatif.

Unit CSS Absolut Terkait

Poin adalah salah satu dari sejumlah kecil unit absolut yang didefinisikan CSS berdasarkan inci 96 piksel yang sama. Mengetahui seluruh keluarga ini membuat konversi menjadi mudah:

• 1in = 96px = 72pt = 6pc = 25.4mm
• 1pc (pica) = 12pt = 16px
• 1cm = 37.795px ≈ 28.35pt
• 1mm = 3.7795px ≈ 2.835pt
• 1Q (seperempat milimeter) = 0.945px

Cara Menggunakan Konverter Ini

1. Pilih arah: pt → px atau px → pt.
2. Masukkan nilai: satu angka atau seluruh skala tipografi yang dipisahkan koma atau spasi (hingga 20 sekaligus). Unit di akhir seperti 12pt diterima dan diabaikan.
3. Atur resolusi keluaran: pertahankan 96 DPI untuk CSS dan pekerjaan web, atau ketuk chip untuk 72, 150, 300, atau 600 DPI.
4. Klik Konversi: baca hasil, perbandingan DPI, pratinjau tipe ukuran sebenarnya, penggaris milimeter, dan tangga referensi.
5. Salin CSS: satu tombol menyalin setiap deklarasi font-size dengan nilai poin sumber tetap berada dalam komentar.

Pertanyaan yang Sering Diajukan

Bagaimana cara mengonversi pt ke px?

Kalikan nilai poin dengan resolusi keluaran lalu bagi dengan 72, karena satu poin adalah satu per tujuh puluh dua inci. Di web, resolusinya tetap 96 DPI, sehingga px = pt × 1.3333. Contohnya, 12pt adalah 16px.

Berapa piksel untuk 12pt?

Dalam CSS dan browser apa pun, 12pt tepat sama dengan 16px. Dalam file cetak atau gambar 300 DPI, teks 12pt yang sama tingginya 50 piksel, dan pada 600 DPI tingginya 100 piksel, karena jumlah piksel meningkat sesuai resolusi sementara ukuran fisiknya tetap sama.

Apakah 1pt selalu sama dengan 1.3333px?

Dalam CSS, nilainya selalu 1.3333px karena spesifikasi CSS menetapkan satu inci tepat sama dengan 96 piksel. Hal itu tidak berlaku untuk keluaran raster: pada 300 DPI, satu poin adalah 4.1667 piksel perangkat, sedangkan pada 72 DPI satu poin tepat sama dengan satu piksel.

Apa perbedaan antara pt dan px?

Poin adalah unit tipografi fisik yang sama dengan satu per tujuh puluh dua inci dan digunakan dalam cetak, pengolah kata, serta penerbitan desktop. Piksel adalah unit tampilan. Dalam CSS, piksel juga ditambatkan pada referensi fisik satu per sembilan puluh enam inci, sehingga kedua unit tersebut dikonversi dengan rasio tetap di web, tetapi tidak dalam file gambar.

Sebaiknya saya menggunakan pt atau px dalam CSS?

Gunakan px atau rem untuk gaya layar dan sisakan pt untuk stylesheet cetak. Poin adalah unit fisik absolut, sehingga teks yang diatur dalam pt mengabaikan preferensi ukuran font browser pengunjung. Di dalam blok @media print, pt adalah unit alami karena keluaran benar-benar diukur dalam inci.

DPI berapa yang sebaiknya digunakan untuk cetak?

300 DPI adalah standar untuk cetak komersial dan keluaran berkualitas foto, 150 DPI cukup untuk draf serta pekerjaan format besar yang dibaca dari jauh, dan 600 DPI digunakan untuk gambar garis detail serta pekerjaan percetakan kelas atas. Atur kolom resolusi ke nilai yang diharapkan printer atau dialog ekspor Anda.

Mengapa teks 12pt tidak setinggi 12 poin di layar?

Ukuran poin menjelaskan kotak em font, yaitu kisi desain tempat huruf digambar, bukan tinggi setiap glif. Tinggi kapital biasanya sekitar 70% dari ukuran em dan tinggi x huruf kecil sekitar 50%, sehingga kapital 12pt tingginya kira-kira 8,4pt.

Apakah rasio piksel perangkat mengubah konversi pt ke px?

Tidak. Pada layar 2× atau 3×, browser tetap melaporkan 12pt sebagai 16 piksel CSS lalu merender 16 piksel CSS tersebut menggunakan 32 atau 48 piksel perangkat keras. Piksel CSS adalah unit referensi, sehingga angka dalam stylesheet Anda tidak pernah berubah — piksel perangkat keras tambahan hanya membuat ukuran yang sama tampak lebih tajam.

Sumber Tambahan

• Unit panjang CSS - MDN
• Panjang absolut - Nilai CSS W3C