แปลงพอยต์ (pt) เป็นพิกเซล (px)

ตรวจสอบเนื้อหาล่าสุด:

12 pt เท่ากับ 16 px และกินพื้นที่บนกระดาษ 4.23 มม. หนึ่งนิ้วมี 72 พอยต์และ 96 พิกเซลของ CSS จึงคูณพอยต์ด้วย 4/3 ได้เลย ข้อความขนาด 16 พอยต์ในเอกสารเท่ากับ 21.33 พิกเซลบนหน้าเว็บ ส่วนหัวเรื่อง 18 พอยต์เท่ากับ 24 พิกเซล พิมพ์พอยต์ในช่องแรก แล้วพิกเซลจะขึ้นข้าง ๆ

pt
px
เป็น

พอยต์ (pt) และพิกเซล (px) คืออะไร

พอยต์คือหน่วยของงานพิมพ์ที่ใช้บอกขนาดตัวอักษร โปรแกรมปัจจุบันคิดด้วยพอยต์แบบ DTP ซึ่งเท่ากับ 1/72 นิ้ว หรือราว 0.3528 มม.[1] และ CSS ก็นิยามไว้เท่ากัน[2] ส่วนการเรียงพิมพ์ด้วยโลหะในยุโรปภาคพื้นทวีปใช้พอยต์แบบดีโดต์ ซึ่งเท่ากับราว 0.376 มม.[1]

พิกเซลหรือจุดภาพเป็นหน่วยพื้นฐานของภาพ คือจุดภาพบนจอแสดงผลหรือจุดภาพในรูปภาพที่รวมกันเป็นภาพขึ้น[3] ใน CSS พิกเซลยังเป็นหน่วยความยาวด้วย คือ 1/96 นิ้ว[2] เพราะหนึ่งนิ้วมี 72 พอยต์และ 96 พิกเซล ความยาวเท่ากันจึงให้ตัวเลขเป็นพิกเซลมากกว่าเป็นพอยต์ 4/3 เท่า

หน้าต่างโปรแกรมจัดการฟอนต์ที่ช่องขนาดใส่ไว้ 38 pt พร้อมตัวอย่างตัวอักษร
โปรแกรมจัดการฟอนต์แสดงตัวอย่างตัวอักษรที่ขนาด 38 พอยต์ ซึ่งเป็นค่าที่ใส่ไว้ในช่องขนาดด้านบนหน้าต่าง ตามการคำนวณของ CSS ขนาดนี้เท่ากับ 50.67 พิกเซล เพราะหนึ่งพอยต์เท่ากับ 4/3 พิกเซล ภาพ: Markus Spiske, Unsplash

12 พอยต์เท่ากับกี่พิกเซล

12 พอยต์เท่ากับ 16 พิกเซล วิธีคิดคือคูณพอยต์ด้วย 96 แล้วหารด้วย 72 หรือคูณด้วย 4/3 นั่นเอง 18 พอยต์เท่ากับ 24 พิกเซล ส่วน 72 พอยต์ซึ่งเท่ากับหนึ่งนิ้วพอดี เท่ากับ 96 พิกเซล บนกระดาษ 12 พอยต์กินพื้นที่ 4.23 มม.

อัตราส่วนนี้มาจากมาตรฐาน CSS ที่กำหนดให้หนึ่งนิ้วเท่ากับ 96 พิกเซล และหนึ่งพอยต์เท่ากับ 1/72 นิ้ว[2] ข้อความที่เขียนด้วย font-size: 12pt กับข้อความที่เขียนด้วย font-size: 16px จึงมีขนาดเท่ากันในทุกเบราว์เซอร์ และ 16 พิกเซลยังเป็นขนาดฟอนต์เริ่มต้นที่พบบ่อยในเบราว์เซอร์[4] เวลาย้ายขนาดฟอนต์จากเอกสาร Word ไปหน้าเว็บ ให้แปลงพอยต์เป็นพิกเซลก่อน

เวลาพิมพ์ผลลัพธ์ลงไฟล์ CSS ให้ใช้จุดทศนิยมเสมอ[2] เช่น 21.33px ปุ่ม “คัดลอกผลลัพธ์” จึงคัดลอกตัวเลขโดยไม่มีหน่วยให้อยู่แล้ว และถ้าค่าที่คุณมีเป็นหน่วยอื่น ก็วางลงช่องได้เลย เช่น “16px” “3 มม.” หรือ “๑๒ พอยต์” ระบบจะแปลงให้และเขียนไว้ใต้ช่องว่าได้เท่าไร ส่วนการแปลงมิลลิเมตรเป็นพิกเซลตามความละเอียดที่ต้องการ ดูได้ที่เครื่องมือแปลง มม. เป็น px

แปลงพอยต์เป็นพิกเซลอย่างไร

สูตรคือ px = pt × 96 ÷ 72 ซึ่งก็คือการคูณด้วย 4/3 9 พอยต์เท่ากับ 12 พิกเซล 24 พอยต์เท่ากับ 32 พิกเซล และ 36 พอยต์เท่ากับ 48 พิกเซล ค่าที่หารด้วย 3 ลงตัวจะได้พิกเซลเต็มจำนวน ส่วนค่าอื่นจะมีทศนิยม เช่น 10 พอยต์เท่ากับ 13.33 พิกเซล และ 11 พอยต์เท่ากับ 14.67 พิกเซล

สูตรเดียวกันใช้กับความหนาของเส้นได้ 0.75 พอยต์เท่ากับหนึ่งพิกเซลพอดี และ 1.5 พอยต์เท่ากับสองพิกเซล ถ้าต้องคิดย้อนทาง ใช้เครื่องมือแปลง px เป็น pt ซึ่งคูณพิกเซลด้วย 0.75 ส่วนไพกาที่เท่ากับ 12 พอยต์ แปลงได้ที่เครื่องมือแปลงไพกาเป็น px และหน่วย rem ที่อิงขนาดฟอนต์ของเบราว์เซอร์ แปลงได้ที่เครื่องมือแปลง rem เป็น px

เลข 96 มาจาก Windows ไมโครซอฟท์คิดว่าจอวางห่างจากตาราวหนึ่งในสามมากกว่ากระดาษที่ถืออยู่ในมือ จึงตัดสินใจรายงานความละเอียดของจอที่ราว 72 PPI ว่าเป็น 96 PPI[5] มาตรฐาน CSS เองก็นิยามพิกเซลอ้างอิงว่าเป็นพิกเซลของจอความละเอียด 96 dpi ที่มองจากระยะเหยียดแขน[2]

ตัวพิมพ์โลหะเรียงชิดกันเป็นแถว ถ่ายระยะใกล้
ตัวพิมพ์โลหะเรียงชิดกันเป็นแถว ในการเรียงพิมพ์แบบนี้ ขนาดตัวอักษรคือความสูงของแท่งโลหะที่ตัวอักษรหล่ออยู่ และบอกเป็นพอยต์[1] แท่งขนาด 10 พอยต์สูง 3.53 มม. ส่วนบนจอ ขนาดเดียวกันเท่ากับ 13.33 พิกเซล ภาพ: Alex Zaj, Unsplash

ขนาดฟอนต์แต่ละขนาดเท่ากับกี่พิกเซล

ตารางนี้มีขนาดฟอนต์ 30 ขนาด ตั้งแต่ 6 ถึง 96 พอยต์ ทั้งเป็นพิกเซลที่ 96 DPI และเป็นมิลลิเมตรบนกระดาษ แถวที่เน้นไว้คือ 12 พอยต์ 18 พอยต์ซึ่งเป็นขนาดที่แนวทาง WCAG เริ่มนับว่าเป็นข้อความขนาดใหญ่ (หรือ 14 พอยต์ถ้าเป็นตัวหนา)[6] และ 72 พอยต์ซึ่งเท่ากับหนึ่งนิ้วพอดี
ขนาดฟอนต์พิกเซล (96 DPI)มิลลิเมตร
6 pt8 px2.117 มม.
7 pt9.33 px2.469 มม.
8 pt10.67 px2.822 มม.
9 pt12 px3.175 มม.
10 pt13.33 px3.528 มม.
10.5 pt14 px3.704 มม.
11 pt14.67 px3.881 มม.
12 pt16 px4.233 มม.
13 pt17.33 px4.586 มม.
14 pt18.67 px4.939 มม.
15 pt20 px5.292 มม.
16 pt21.33 px5.644 มม.
18 pt24 px6.350 มม.
20 pt26.67 px7.056 มม.
21 pt28 px7.408 มม.
22 pt29.33 px7.761 มม.
24 pt32 px8.467 มม.
26 pt34.67 px9.172 มม.
28 pt37.33 px9.878 มม.
30 pt40 px10.583 มม.
32 pt42.67 px11.289 มม.
34 pt45.33 px11.994 มม.
36 pt48 px12.700 มม.
40 pt53.33 px14.111 มม.
44 pt58.67 px15.522 มม.
48 pt64 px16.933 มม.
54 pt72 px19.050 มม.
60 pt80 px21.167 มม.
72 pt96 px25.400 มม.
96 pt128 px33.867 มม.
คอลัมน์พิกเซลคำนวณด้วยวิธีเดียวกับเครื่องมือ และแสดงทศนิยมสองตำแหน่ง ส่วนมิลลิเมตรคำนวณจาก 1 พอยต์ = 25.4/72 มม.

ความหนาของเส้นเท่ากับกี่พิกเซล

ในโปรแกรมจัดหน้า ความหนาของเส้นและกรอบก็บอกเป็นพอยต์เช่นกัน ช่วงของค่าแคบกว่าขนาดฟอนต์มาก เราจึงแยกไว้อีกตาราง เส้นหนา 0.75 พอยต์เท่ากับหนึ่งพิกเซลพอดี ซึ่งเท่ากับ border: 1px ในไฟล์ CSS
ความหนาของเส้นพิกเซล (96 DPI)มิลลิเมตร
0.25 pt0.33 px0.088 มม.
0.5 pt0.67 px0.176 มม.
0.75 pt1 px0.265 มม.
1 pt1.33 px0.353 มม.
1.5 pt2 px0.529 มม.
2 pt2.67 px0.706 มม.
3 pt4 px1.058 มม.
4 pt5.33 px1.411 มม.
5 pt6.67 px1.764 มม.
6 pt8 px2.117 มม.
8 pt10.67 px2.822 มม.
10 pt13.33 px3.528 มม.
12 pt16 px4.233 มม.
บนจอ เส้นที่หนา 0.5 พอยต์ลงมาจะบางกว่าหนึ่งพิกเซล คอลัมน์พิกเซลแสดงทศนิยมสองตำแหน่ง

พอยต์ดีโดต์กับพอยต์ใน Word เหมือนกันไหม

ไม่เหมือน พอยต์ดีโดต์ของการเรียงพิมพ์ด้วยโลหะในยุโรปภาคพื้นทวีปเท่ากับราว 0.376 มม. ส่วนพอยต์ DTP ใน Word และในโปรแกรมส่วนใหญ่เท่ากับ 0.3528 มม.[1] ที่ขนาด 12 พอยต์ ส่วนต่างจะถึง 0.28 มม. หรือราวหนึ่งพิกเซลบนจอ ส่วน TeX และ LaTeX เขียน “pt” แทน 1/72.27 นิ้ว และเขียน “bp” แทน 1/72 นิ้ว[1]
พอยต์1 พอยต์12 พอยต์12 พอยต์เป็นพิกเซลพบได้ที่ไหน
พอยต์ DTP (PostScript)0.3528 มม.4.233 มม.16 pxWord, InDesign, PDF และ CSS คือพอยต์ที่เครื่องมือนี้ใช้
พอยต์ดีโดต์0.3760 มม.4.512 มม.17.05 pxการเรียงพิมพ์ด้วยโลหะในยุโรปภาคพื้นทวีป
พอยต์ของ TeX0.3515 มม.4.218 มม.15.94 px“pt” ใน TeX และ LaTeX
คอลัมน์พิกเซลแสดงความยาวแต่ละค่าเป็นพิกเซลที่ 96 DPI เครื่องมือนี้คำนวณด้วยพอยต์ในแถวแรก

ช่องพอยต์ของเครื่องมือนี้รับรูปแบบไหนบ้าง

ช่องพอยต์รับและคำนวณทุกรูปแบบในตารางนี้ คุณจึงไม่ต้องแก้ค่าก่อนวาง ค่าที่คัดลอกมาจาก Word หรือจากไฟล์ CSS พิมพ์พร้อมหน่วยได้เลย เลขไทยก็ใช้ได้ ส่วนค่าที่เขียนด้วยหน่วยอื่น เช่น พิกเซล ระบบจะแปลงเป็นพอยต์ก่อน แล้วเขียนไว้ใต้ช่องว่า “ค่าที่วาง 16px เท่ากับ 12 pt ในช่องนี้” คอลัมน์กลางคือผลลัพธ์ที่เครื่องมือคำนวณเอง
สิ่งที่คุณพิมพ์หรือวางผลลัพธ์ของเครื่องมือช่องอ่านรูปแบบนี้อย่างไร
1216 pxถ้าพิมพ์เฉพาะตัวเลข ช่องจะอ่านเป็นพอยต์
10.514 pxจุดทศนิยมคั่นเศษเหมือนในช่องผลลัพธ์ ช่องคำนวณ 10.5 พอยต์
๑๒16 pxเลขไทยก็ใช้ได้ ช่องอ่านเป็น 12 พอยต์
๑๐.๕ พอยต์14 pxเลขไทยพร้อมชื่อหน่วยก็อ่านได้ ช่องคำนวณ 10.5 พอยต์
12 พอยต์16 pxพิมพ์ชื่อหน่วยต่อจากตัวเลขได้ ช่องคำนวณ 12 พอยต์
12pt16 pxตัวย่อที่คัดลอกมาจาก Word หรือจากไฟล์ CSS เป็นหน่วยของช่องนี้อยู่แล้ว ค่าจึงไม่เปลี่ยน
font-size: 16px;16 pxบรรทัดจากไฟล์ CSS เป็นพิกเซล ค่าจะถูกแปลงเป็นพอยต์ก่อน แล้วเลข 12 จึงเข้าช่อง ชื่อคุณสมบัติและอัฒภาคถูกละไว้
16 พิกเซล16 pxค่าที่เขียนเป็นพิกเซลพร้อมชื่อหน่วยก็อ่านได้ เลขที่เข้าช่องคือ 12
3 มม.11.34 pxมิลลิเมตรจะถูกแปลงเป็นพอยต์ก่อน เลขที่เข้าช่องคือ 8.503937
1 นิ้ว96 pxนิ้วก็ใช้ได้ หนึ่งนิ้วเท่ากับ 72 พอยต์
3/41 pxเศษส่วนก็ใช้ได้ 0.75 พอยต์เท่ากับหนึ่งพิกเซลพอดี
ก่อนเขียนตารางนี้ เราทดลองทุกรูปแบบในช่องจริง รูปแบบที่ช่องพิกเซลรับได้อยู่ในตารางบนหน้าเครื่องมือแปลง px เป็น pt

สลับหน่วยระหว่างพอยต์กับพิกเซลในโปรแกรมต่าง ๆ อย่างไร

  1. Adobe InDesign

    บน Windows เปิด Edit › Preferences › Units & Increments บน macOS เปิด InDesign › Preferences › Units & Increments แล้วเลือก Pixels ใน Ruler Units ทั้งช่อง Horizontal และ Vertical[7] (ชื่อจากหน้าจอภาษาอังกฤษ เพราะโปรแกรมไม่มีภาษาไทย) ไม่ว่าจะเลือกหน่วยใด คุณพิมพ์ค่าพร้อมหน่วยลงช่องได้เสมอ เช่น “6pt” “6ap” หรือ “5px” แล้ว InDesign จะแปลงเป็นหน่วยของเอกสารให้[7]

  2. Adobe Photoshop

    บน Windows เลือก Edit › Preferences › Units & Rulers บน macOS เลือก Photoshop › Preferences › Units & Rulers หรือดับเบิลคลิกที่ไม้บรรทัดก็เปิดหน้าต่างเดียวกัน[8] ถ้าตั้ง Point/Pica Size เป็น “PostScript (72 points per inch)” พอยต์ของ Photoshop จะเท่ากับพอยต์ของเครื่องมือนี้ ส่วนตัวเลือก “Traditional” จะนับ 72.27 พอยต์ต่อนิ้ว[8]

  3. Microsoft Word

    Word แสดงขนาดฟอนต์เป็นพอยต์ในกล่อง “ขนาดฟอนต์” บนแท็บ “หน้าแรก” และรับค่าตั้งแต่ 1 ถึง 1638 เป็นพหุคูณของ 0.5 เช่น 10.5[9] ถ้าอยากได้ขนาดเท่ากับข้อความ 16 พิกเซลบนหน้าเว็บ ให้พิมพ์ 12 ถ้า 14 พิกเซล ให้พิมพ์ 10.5 ค่าอื่นแปลงได้ที่เครื่องมือแปลง px เป็น pt

พิกเซล: แปลงจากหน่วยอื่น

แปลง rem เป็น pxแปลง cm เป็น pxแปลง mm เป็น pxแปลงนิ้วเป็น pxแปลงเมตรเป็น px

แหล่งอ้างอิง

  1. Point (typography) — วิกิพีเดีย (ภาษาอังกฤษ)
  2. CSS Values and Units Module Level 4 — W3C (ภาษาอังกฤษ)
  3. พิกเซล — วิกิพีเดีย
  4. <length> - CSS — MDN Web Docs (ภาษาอังกฤษ)
  5. Where does 96 DPI come from in Windows? — Microsoft Learn (ภาษาอังกฤษ)
  6. แนวทางการทำให้เนื้อหาเว็บสามารถเข้าถึงได้ (WCAG) 2.2 — W3C, คำแปลภาษาไทยโดย NECTEC
  7. Rulers and measurement units — Adobe InDesign Help (ภาษาอังกฤษ)
  8. Rulers — Adobe Photoshop Help (ภาษาอังกฤษ)
  9. เปลี่ยนขนาดฟอนต์ — ฝ่ายสนับสนุนของ Microsoft

เราคำนวณค่าทั้งหมดในตารางจากนิยามของหน่วย และตรวจสอบการคำนวณอีกครั้งก่อนเผยแพร่ ข้อมูลทางประวัติศาสตร์และชื่อหน่วยท้องถิ่นอ้างอิงจากแหล่งที่ระบุไว้ด้านบน

ตรวจสอบเนื้อหาล่าสุด: · เขียนและตรวจสอบโดย ทีมงาน Arteon

คำถามที่พบบ่อยเรื่องการแปลงพอยต์เป็นพิกเซล

16 พอยต์เท่ากับกี่พิกเซล

21.33 พิกเซล เพราะ 16 × 4/3 = 21.333… บางเว็บเขียนว่า 21.28 พิกเซล ซึ่งคลาดเคลื่อน ในไฟล์ CSS เขียนได้เป็น 21.33px

1 พอยต์เท่ากับกี่มิลลิเมตร

พอยต์ใน Word และใน CSS คือ 1/72 นิ้ว หรือราว 0.3528 มม. ส่วนพอยต์ดีโดต์เท่ากับราว 0.376 มม.[1] ดังนั้น 12 พอยต์ใน Word เท่ากับ 4.23 มม. และ 12 พอยต์ดีโดต์เท่ากับ 4.51 มม.

12 px กับ 12 pt ขนาดเท่ากันไหม

ไม่เท่า 12 พอยต์เท่ากับ 16 พิกเซล ส่วน 12 พิกเซลเท่ากับ 9 พอยต์ พอยต์ใช้ใน Word และ InDesign ส่วนพิกเซลใช้ในไฟล์ CSS ตัวเลขเดียวกันจึงหมายถึงขนาดคนละอย่าง

10 พอยต์เท่ากับกี่พิกเซล

13.33 พิกเซล เพราะ 10 หารด้วย 3 ไม่ลงตัว ผลลัพธ์จึงมีทศนิยม และ CSS ก็รับค่าทศนิยมได้

72 พอยต์เท่ากับกี่พิกเซล

96 พิกเซลพอดี คือหนึ่งนิ้วหรือ 25.4 มม. มาตรฐาน CSS ก็กำหนดให้หนึ่งนิ้วเท่ากับ 96 พิกเซล และหนึ่งพอยต์เท่ากับ 1/72 นิ้ว[2]

ช่องรับเลขไทยไหม

รับ คุณพิมพ์ “๑๒” หรือ “๑๐.๕ พอยต์” ได้ ช่องจะอ่านค่าเดียวกันและคำนวณให้ ส่วนผลลัพธ์จะแสดงด้วยเลขอารบิกและจุดทศนิยม แบบเดียวกับที่ไฟล์ CSS ใช้

pt ใน LaTeX กับ pt ในเครื่องมือนี้เหมือนกันไหม

ไม่เหมือน ใน TeX และ LaTeX “pt” คือ 1/72.27 นิ้ว ส่วนพอยต์ 1/72 นิ้วเขียนว่า “bp”[1] ต่างกันราว 0.4% หรือ 0.016 มม. ที่ 12 พอยต์ เครื่องมือนี้คำนวณด้วยพอยต์ DTP ซึ่งตรงกับ “bp”

เส้นหนา 0.5 พอยต์เท่ากับกี่พิกเซล

ราว 0.67 พิกเซล เส้นหนา 0.75 พอยต์เท่ากับหนึ่งพิกเซลพอดี และเส้นหนา 1.5 พอยต์เท่ากับสองพิกเซล

ภาพหน้าจอของเครื่องมือฟรีจาก Arteon: แปลงพอยต์ (pt) เป็นพิกเซล (px)

ช่วยเราปรับปรุงเครื่องมือนี้

เจอค่าที่โปรแกรมของคุณให้ผลต่างออกไป หรือมีข้อเสนอแนะไหม เขียนมาหาเราได้