Typography Basics
เลือกขนาด ระยะบรรทัด และน้ำหนักฟอนต์ให้อ่านง่าย โดยเฉพาะข้อความภาษาไทย
เริ่มอ่านตรงนี้ก่อน
อธิบายแบบง่าย
Typography Basics คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น
ระดับ
เหมาะกับคนเริ่มต้น
ใช้เมื่อไหร่
ข้อความยาวๆ อ่านแล้วล้าตาหรือชนกันแน่น
อ่านแล้วทำอะไรต่อ
ตั้ง font-size 16px และ line-height 1.6 บรรทัดจะไม่ชนสระ ผู้ใช้อ่านยาวๆ ได้ไม่ล้าตา ต่างจากค่า default 1.2 ที่แน่นเกินสำหรับภาษาไทย
ใช้ตอนไหน?
- ข้อความยาวๆ อ่านแล้วล้าตาหรือชนกันแน่น
- ภาษาไทยกับอังกฤษปนกันแล้วระยะบรรทัดดูไม่สม่ำเสมอ
- ตั้งสเกลขนาดหัวข้อ/เนื้อหาให้เป็นมาตรฐานทั้งระบบ
ความหมาย
พื้นฐานตัวอักษร (typography) คือการกำหนดขนาดฟอนต์ ระยะห่างระหว่างบรรทัด (line-height) น้ำหนัก (weight) และความยาวบรรทัด เพื่อให้อ่านสบายตา ภาษาไทยมีสระบนสระล่างและวรรณยุกต์ จึงต้องการระยะบรรทัดมากกว่าภาษาอังกฤษเล็กน้อย ไม่งั้นตัวอักษรจะชนกัน
ค่าตั้งต้นที่อ่านง่าย
ตั้งขนาดเนื้อหาหลักอย่างน้อย 16px ให้ line-height ราว 1.5-1.7 สำหรับภาษาไทย และคุมความยาวบรรทัดไม่ให้ยาวเกินไป ใช้สเกลขนาดไม่กี่ค่าแล้วใช้ซ้ำ
body: 16px, line-height 1.6 (ไทยเผื่อสระบน-ล่าง)
ความยาวบรรทัด: ~45-75 ตัวอักษร
สเกลหัวข้อ: 16 → 20 → 24 → 32 (ใช้ซ้ำ ไม่สุ่ม)
น้ำหนัก: ปกติ 400, เน้น 600 (เลี่ยงหนาทั้งย่อหน้า)ตัวอย่างการใช้
ย่อหน้าเนื้อหาภาษาไทย
ตั้ง font-size 16px และ line-height 1.6 บรรทัดจะไม่ชนสระ ผู้ใช้อ่านยาวๆ ได้ไม่ล้าตา ต่างจากค่า default 1.2 ที่แน่นเกินสำหรับภาษาไทย