หน้าแรกเครื่องมือสำหรับนักออกแบบตัวคำนวณระยะห่างบรรทัด

ตัวคำนวณระยะห่างบรรทัด

เครื่องคำนวณ Line Height แนะนำค่าความสูงบรรทัด ระยะห่างตัวอักษร และความกว้างย่อหน้าสูงสุดที่เหมาะสม ตามขนาดฟอนต์และการใช้งาน ทั้งเนื้อหา หัวข้อ ป้าย UI หรือตัวอักษรแสดงผลขนาดใหญ่ พร้อมตัวอย่างแบบสดและโค้ด CSS

เกี่ยวกับเครื่องมือนี้

เครื่องคำนวณ Line Height แนะนำค่าความสูงบรรทัด ระยะห่างตัวอักษร และความกว้างย่อหน้าสูงสุดที่เหมาะสม ตามขนาดฟอนต์และการใช้งาน ทั้งเนื้อหา หัวข้อ ป้าย UI หรือตัวอักษรแสดงผลขนาดใหญ่ พร้อมตัวอย่างแบบสดและโค้ด CSS

วิธีใช้

  1. ใส่ขนาดฟอนต์เป็นพิกเซล
  2. เลือกรูปแบบ: เนื้อหา หัวข้อ ป้าย UI หรือ display
  3. ดูย่อหน้าตัวอย่างและค่าที่แนะนำทั้ง 4 ค่า
  4. คลิก Copy CSS เพื่อนำค่าไปใช้ใน stylesheet

ข้อควรรู้

  • เนื้อหาจะอ่านสบายเมื่อ line height ประมาณ 1.5–1.6 เท่าของขนาดฟอนต์
  • หัวข้อขนาดใหญ่และตัวอักษร display ดูดีกว่าเมื่อใช้ line height ที่แน่นขึ้น ประมาณ 1.05–1.2
  • ความยาวบรรทัดที่อ่านง่ายอยู่ที่ประมาณ 45–75 ตัวอักษรต่อบรรทัด
  • WCAG 1.4.12 กำหนดให้เนื้อหายังใช้งานได้เมื่อผู้ใช้ตั้ง line height เป็น 1.5 และ letter spacing เป็น 0.12 em
  • ค่า line-height แบบไม่มีหน่วย (เช่น 1.6) จะปรับตามขนาดฟอนต์ของแต่ละ element

ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ

คำถามที่พบบ่อย

Line height ที่เหมาะกับเนื้อหาคือเท่าไร?

ประมาณ 1.5 ถึง 1.6 เท่าของขนาดฟอนต์ สำหรับตัวอักษร 16 px จะอยู่ที่ราว 24–26 px

หัวข้อควรมี line height น้อยกว่าหรือไม่?

ใช่ ตัวอักษรขนาดใหญ่ต้องการระยะห่างสัมพัทธ์น้อยกว่า หัวข้อจึงมักใช้ 1.1–1.3 และตัวอักษร display จะแน่นกว่านั้นอีก

ความยาวบรรทัดที่เหมาะกับการอ่านคือเท่าไร?

ประมาณ 45–75 ตัวอักษรต่อบรรทัด โดยมักอ้างอิงว่า 65 ตัวอักษรเหมาะที่สุดสำหรับเนื้อหา

ควรใช้ line-height แบบไม่มีหน่วยใน CSS หรือไม่?

โดยทั่วไปควรใช้ ค่าไม่มีหน่วยอย่าง 1.6 จะถูกสืบทอดเป็นอัตราส่วน element ลูกที่มีขนาดฟอนต์ต่างกันจึงยังคงระยะห่างที่ได้สัดส่วน