10 เคล็ดลับ Typography สำหรับภาษาไทย

Typography ที่ดีไม่ใช่แค่เลือกฟอนต์สวยๆ แต่ยังรวมถึงการจัดวาง ขนาด ระยะห่าง และอีกหลายปัจจัย โดยเฉพาะภาษาไทยที่มีความซับซ้อนกว่าภาษาอังกฤษ บทความนี้รวม 10 เคล็ดลับที่จะทำให้งาน typography ของคุณดีขึ้นทันที

1. ใช้ขนาดตัวอักษรที่เหมาะสม

ภาษาไทยมีสระลอยและวรรณยุกต์ที่อยู่เหนือและใต้พยัญชนะ ทำให้ต้องการพื้นที่แนวตั้งมากกว่าภาษาอังกฤษ

• เนื้อหา (Body text): 16-18px สำหรับหน้าจอ, 10-12pt สำหรับสิ่งพิมพ์
• หัวข้อหลัก (H1): 32-48px
• หัวข้อรอง (H2): 24-32px
• หัวข้อย่อย (H3): 20-24px
• Caption: 12-14px

2. ให้ความสำคัญกับ Line Height

Line height (ระยะห่างระหว่างบรรทัด) สำคัญมากสำหรับภาษาไทย เพราะต้องมีพื้นที่เพียงพอสำหรับสระลอยและวรรณยุกต์

• เนื้อหาทั่วไป: line-height 1.6-1.8
• หัวข้อ: line-height 1.2-1.4
• ข้อความสั้นๆ: line-height 1.4-1.5

CSS: body { line-height: 1.7; }

3. ระวังเรื่องความกว้างของบรรทัด

บรรทัดที่ยาวเกินไปทำให้อ่านยาก ควรจำกัดความกว้างของเนื้อหาให้อยู่ที่ 60-80 ตัวอักษรต่อบรรทัด หรือประมาณ 600-800px

CSS: .content { max-width: 70ch; }

4. ใช้น้ำหนักฟอนต์อย่างเหมาะสม

ฟอนต์ไทยหลายตัวมีน้ำหนักให้เลือกหลายระดับ ใช้ให้เป็นประโยชน์:

• Light (300): ข้อความขนาดใหญ่, หัวข้อแบบ elegant
• Regular (400): เนื้อหาทั่วไป
• Medium (500): เน้นเล็กน้อย, subheading
• SemiBold (600): หัวข้อ, ปุ่ม
• Bold (700): หัวข้อสำคัญ, เน้นหนัก

5. หลีกเลี่ยงการใช้ตัวเอียง (Italic)

ฟอนต์ไทยส่วนใหญ่ไม่มี italic ที่ออกแบบมาโดยเฉพาะ การบังคับให้เอียงด้วย CSS จะทำให้ตัวอักษรบิดเบี้ยว ดูไม่ดี ให้ใช้วิธีอื่นในการเน้นข้อความแทน เช่น Bold หรือสีต่าง

6. ระวังการตัดคำ

ภาษาไทยไม่มีช่องว่างระหว่างคำ ทำให้การตัดคำอัตโนมัติมักผิดพลาด ทางแก้:

• ใช้ word-break: keep-all; สำหรับ CSS
• ใช้ library สำหรับตัดคำไทย เช่น Thai Word Segmentation
• ใส่ soft hyphen (­) หรือ zero-width space ในจุดที่เหมาะสม

7. สร้าง Visual Hierarchy ที่ชัดเจน

ใช้ขนาด น้ำหนัก และสีเพื่อสร้างลำดับความสำคัญของข้อมูล:

• หัวข้อหลัก: ใหญ่ที่สุด, หนาที่สุด
• หัวข้อรอง: เล็กลงมา
• เนื้อหา: ขนาดปกติ, น้ำหนักปกติ
• ข้อความรอง: สีอ่อนกว่า หรือขนาดเล็กลง

8. ใส่ใจเรื่อง Contrast

ความแตกต่างระหว่างสีตัวอักษรและพื้นหลังต้องมากพอให้อ่านง่าย โดยเฉพาะสำหรับผู้มีปัญหาทางสายตา

• อัตราส่วน contrast อย่างน้อย 4.5:1 สำหรับเนื้อหาปกติ
• อย่างน้อย 3:1 สำหรับข้อความขนาดใหญ่
• ทดสอบด้วยเครื่องมือ contrast checker

9. ใช้ font-display: swap

เมื่อใช้ web fonts ควรกำหนด font-display: swap เพื่อให้ข้อความแสดงผลด้วยฟอนต์ fallback ก่อน แล้วค่อยเปลี่ยนเป็นฟอนต์ที่ต้องการเมื่อโหลดเสร็จ ช่วยให้ผู้ใช้เห็นเนื้อหาเร็วขึ้น

CSS: @font-face { font-display: swap; }

10. ทดสอบบนอุปกรณ์จริง

ฟอนต์อาจดูต่างกันบนอุปกรณ์และระบบปฏิบัติการต่างๆ ควรทดสอบบน:

• Windows และ macOS (มีการ render font ต่างกัน)
• Android และ iOS
• หน้าจอขนาดต่างๆ (desktop, tablet, mobile)
• ทั้ง light mode และ dark mode

สรุป

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