ข้ามไปเนื้อหาหลัก

Font Pairing คือ​อะไร จับ​คู่​ฟอนต์​ไทย​ให้​คน​ทุก​วัย​อ่าน​ง่าย

อัปเดตล่าสุด 27 กันยายน 2569
เวลาอ่านประมาณ 12 นาที
Font Pairing คือ​อะไร จับ​คู่​ฟอนต์​ไทย​ให้​คน​ทุก​วัย​อ่าน​ง่าย

KEY TAKEAWAYS

3 ประเด็น

การ​ทดลอง​กับ​ผู้​อ่าน​ชาว​ไทย​ที่​จุฬาลงกรณ์​มหาวิทยาลัย​ปี 2567 พบ​ว่า​ฟอนต์​ไทย​แบบ​มี​หัว​อ่าน​ย่อหน้า​ยาว​ได้​เร็ว​กว่า​แบบ​ไม่มี​หัว

ผู้​อ่าน​สูง​วัย​แยก​ตัว​อักษร​ขนาด​เล็ก​แบบ​มี​หัว​ได้​ดี​กว่า ขณะ​ที่​ผู้​อ่าน​อายุ​น้อย​แยก​แบบ​ไม่มี​หัว​ได้​ดี​กว่า ผล​นี้​ชี้​ให้​ใช้​ฟอนต์​มี​หัว​กับ​เนื้อ​ความ และ​เก็บ​ฟอนต์​ไม่มี​หัว​ไว้​กับ​ข้อความ​สั้น

Google Fonts มี​ฟอนต์​ที่​รองรับ​อักษร​ไทย 34 ตระกูล​จาก​ทั้งหมด 1,946 ตระกูล

(นับ​จาก​ข้อมูล​ตั้ง​ต้น​ของ Google Fonts วัน​ที่ 27 กันยายน 2569) 26 ตระกูล​มี​น้ำ​หนัก​ตั้งแต่​สี่​ระดับ​ขึ้น​ไป พอ​สำหรับ​แยก​หัวข้อ​กับ​เนื้อ​ความ​ด้วย​ตระกูล​เดียว

WCAG 2.2 ข้อ 1.4.12 กำหนด​ว่า​เมื่อ​ผู้​ใช้​ขยาย​ระยะ​บรรทัด​เป็น 1.5 เท่า​ของ​ขนาด​ตัว​อักษร เนื้อหา​ต้อง​ไม่​หาย​หรือ​ซ้อน​กัน

ข้อ​นี้​กระทบ​ฟอนต์​ไทย​มากกว่า​ฟอนต์​ละติน เพราะ​อักษร​ไทย​มี​สระ​และ​วรรณยุกต์​ซ้อน​เหนือ​และ​ใต้​บรรทัด

Font Pairing สำหรับ​ฟอนต์​ไทย ผล​ทดลอง​หัว​กลม​กับ​ไม่มี​หัว​ใน​ผู้​อ่าน​ไทย 3 ชุด ฟอนต์​รองรับ​ไทย 34 ตระกูล​บน Google Fonts เงื่อนไข SIL OFL และ​ระยะ​บรรทัด​ตาม WCAG 1.4.12

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

บท​นี้​ใช้​หลัก​ฐาน​สาม​ชุด​ตอบ​คำถาม​เรื่อง​ฟอนต์​ไทย ได้แก่ ผล​ทดลอง​เรื่อง​ฟอนต์​มี​หัว​กับ​ไม่มี​หัว​กับ​ผู้​อ่าน​ชาว​ไทย​ที่​เผย​แพร่​ข้อมูล​ดิบ รายการ​ฟอนต์​ไทย​ที่​ฟิจิ⁠ทัล​นับ​เอง​จาก​ข้อมูล​ของ Google Fonts และ​เกณฑ์​ของ W3C เรื่อง​ระยะ​บรรทัด​กับ​การ​ขยาย​ตัว​อักษร

Font Pairing กับ​ฟอนต์​ไทย

Font Pairing คือ​การ​เลือก​ฟอนต์​สอง​ตระกูล​หรือ​สอง​น้ำ​หนัก​ให้​ทำ​หน้าที่​ต่าง​กัน​ใน​งาน​เดียว ตระกูล​หนึ่ง​ดึง​สายตา​ใน​หัวข้อ อีก​ตระกูล​รับ​ภาระ​การ​อ่าน​ใน​เนื้อ​ความ สำหรับ​ภาษา​ไทย การ​จับ​คู่​มี​ตัวแปร​เพิ่ม​จาก​ภาษา​อังกฤษ​หนึ่ง​ตัว คือ​หัว​กลม​ของ​ตัว​อักษร

Font Pairing คือ​อะไร

Font Pairing คือ​การ​จับ​คู่​ฟอนต์​สำหรับ​หัวข้อ​กับ​ฟอนต์​สำหรับ​เนื้อ​ความ​ให้​ต่าง​กัน​พอที่​ผู้​อ่าน​แยก​ลำดับ​ได้​ทันที แต่​ไม่​ต่าง​จน​ดู​เป็น​งาน​สอง​ชิ้น หลัก​ที่​ใช้​กัน​ทั่วไป​คือ​ให้​สอง​ฟอนต์​ต่าง​กัน​ใน​มิติ​เดียว​ที่​ชัด เช่น มี​เชิง​กับ​ไม่มี​เชิง หรือ​น้ำ​หนัก​หนา​กับ​บาง แล้ว​ให้​ความ​สูง​ของ​ตัว​อักษร​และ​สัดส่วน​ใกล้​กัน ใน​ภาษา​ไทย มิติ​ที่​ต่าง​กัน​ชัด​ที่สุด​คือ​ฟอนต์​มี​หัว​กับ​ฟอนต์​ไม่มี​หัว ซึ่ง​ส่ง​ผล​ทั้ง​ต่อ​ความเร็ว​ใน​การ​อ่าน​และ​ความ​รู้สึก​ที่​ผู้​อ่าน​มี​ต่อ​แบรนด์ นัก​ออกแบบ​หลาย​คน​จึง​เริ่ม​จับ​คู่​ฟอนต์​ไทย​จาก​คำถาม​นี้​ก่อน​เรื่อง​เชิง​หรือ​น้ำ​หนัก

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

ฟอนต์​มี​หัว​กับ​ไม่มี​หัว​ใน​การ​ทดลอง​กับ​ผู้​อ่าน​ไทย

การ​ทดลอง​ที่​ละเอียด​ที่สุด​เท่า​ที่​เปิด​ข้อมูล​ดิบ​ให้​ตรวจ​ได้​คือ​ชุด The Contemporary Effects of Loops ของ Héctor Mangas เผย​แพร่ 15 กุมภาพันธ์ 2568 การ​ทดลอง​ใน​ห้อง​ปฏิบัติ​การ​ทำ​ที่​จุฬาลงกรณ์​มหาวิทยาลัย​ช่วง​มกราคม​ถึง​กุมภาพันธ์ 2567 ผู้​วิจัย​ทำงาน​ให้ Typotheque ซึ่ง​เป็น​ผู้​ผลิต​ฟอนต์ และ​ฟอนต์​หลัก​ที่​ทดสอบ​คือ​ฟอนต์ Zed Text ของ​ผู้​ผลิต​ราย​เดียวกัน ผู้​อ่าน​ควร​รู้​ข้อ​นี้​ประกอบ​การ​ตีความ

การ​ทดลอง ผู้​ร่วม​ทดลอง สิ่ง​ที่​วัด ผล​ที่​พบ
1 อ่าน​จาก​ระยะ​ไกล 41 คน อายุ​เฉลี่ย 34.5 ปี ขนาด​ตัว​อักษร​ที่​อ่าน​ออก​เมื่อ​ข้อความ​ค่อย ๆ ขยาย แบบ​มี​หัว​อ่าน​ง่าย​กว่า ผู้​อ่าน​สูง​วัย​อ่าน​แบบ​ไม่มี​หัว​ได้​ยาก​กว่า ผู้​อ่าน​อายุ​น้อย​อ่าน​แบบ​มี​หัว​ได้​ยาก​กว่า
2 อ่าน​ย่อหน้า​ต่อ​เนื่อง 38 คน เวลา​อ่าน​ต่อ​ตัว​อักษร และ​การ​ตอบ​คำถาม​ความ​เข้าใจ แบบ​มี​หัว​เร็ว​กว่า​เล็ก​น้อย​อย่าง​มี​นัย​สำคัญ อายุ​ไม่มี​ผล ความ​เข้าใจ​ไม่​ต่าง​กัน
3 แบบสอบถาม​ออนไลน์ 139 คน อายุ​เฉลี่ย 42.6 ปี (20-70 ปี) คะแนน​ความ​อ่าน​ง่าย และ​คำ​คุณศัพท์​ที่​ผู้​ตอบ​เลือก ทุก​วัย​ให้​คะแนน​แบบ​มี​หัว​ว่า​อ่าน​ง่าย​กว่า แบบ​มี​หัว​ถูก​เลือก​คำ​ว่า​คลาส​สิก​และ​เป็น​ทางการ แบบ​ไม่มี​หัว​ถูก​เลือก​คำ​ว่า​ทัน​สมัย​และ​แปลก​ตา

ฟอนต์​ไทย​แบบ​มี​หัว​หรือ​ไม่มี​หัว อ่าน​ง่าย​กว่า​กัน

สำหรับ​ย่อหน้า​ยาว แบบ​มี​หัว​อ่าน​ง่าย​กว่า ใน​การ​ทดลอง​ที่ 2 ผู้​ร่วม​ทดลอง​อ่าน​ย่อหน้า​ที่​ตั้ง​ด้วย​ฟอนต์​มี​หัว​เร็ว​กว่า​เล็ก​น้อย​โดย​ความ​เข้าใจ​ไม่​ต่าง​กัน และ​ใน​การ​ทดลอง​ที่ 3 ผู้​ตอบ​ทุก​วัย​ให้​คะแนน​ความ​อ่าน​ง่าย​กับ​แบบ​มี​หัวสูง​กว่า ส่วน​ข้อความ​สั้น​อย่าง​หัวข้อ​หรือ​ป้าย ผล​ต่าง​ออก​ไป​ตาม​วัย ผู้​อ่าน​อายุ​น้อย​แยก​ตัว​อักษร​ขนาด​เล็ก​แบบ​ไม่มี​หัว​ได้​ดี​กว่า และ​เลือก​แบบ​ไม่มี​หัว​เฉพาะ​ใน​งาน​ที่​มี​ข้อความ​น้อย ผู้​วิจัย​สรุป​ให้​ใช้​ฟอนต์​มี​หัว​กับ​การ​อ่าน​ย่อหน้า

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

ฟอนต์​ที่​รองรับ​อักษร​ไทย​บน Google Fonts

ฟิจิ⁠ทัล​นับ​รายการ​ฟอนต์​จากข้อมูล​ตั้ง​ต้น​ของ Google Fonts ซึ่ง​เป็น​ไฟล์​เดียว​กับ​ที่​หน้า​ค้นหา​ฟอนต์​ของ Google ใช้ ดึง​เมื่อ 27 กันยายน 2569 พบ​ฟอนต์​ทั้งหมด 1,946 ตระกูล ใน​จำนวน​นี้ 34 ตระกูล​รองรับ​อักษร​ไทย

กลุ่ม​ตาม​ที่ Google จัด จำนวน​ตระกูล ตัวอย่าง
Sans Serif 21 Sarabun, Kanit, Prompt, Noto Sans Thai, IBM Plex Sans Thai, Anuphan
Handwriting 6 Sriracha, Itim, Mali, Charm
Serif 5 Taviraj, Trirong, Pridi, Maitree, Noto Serif Thai
Display 2 Chonburi, Srisakdi

ข้อมูล​ชุด​เดียวกัน​บอก​อีก​สาม​เรื่อง​ที่​ใช้​ตัดสิน​ใจ​ได้ ข้อ​แรก 26 จาก 34 ตระกูล​มี​น้ำ​หนัก​ตั้งแต่​สี่​ระดับ​ขึ้น​ไป ใช้​ตระกูล​เดียว​ทำ​ทั้ง​หัวข้อ​และ​เนื้อ​ความ​ได้ ข้อ​สอง 6 ตระกูล​เป็น​ฟอนต์​แปรผัน (variable font) ที่​ปรับ​น้ำ​หนัก​ได้​ต่อ​เนื่อง​ใน​ไฟล์​เดียว ข้อ​สาม ฟอนต์​ไทย​ที่​มีชื่อ​บอก​ว่า​เป็น​แบบ​มี​หัว​ชัดเจน​มี​สอง​ตระกูล คือ Noto Sans Thai Looped กับ IBM Plex Sans Thai Looped ซึ่ง​แต่ละ​ตระกูล​มี​รุ่น​ไม่มี​หัว​ชื่อ​เดียวกัน​ให้​จับ​คู่

ฟอนต์​ภาษา​ไทย​บน Google Fonts ใช้​ใน​งาน​เชิง​พาณิชย์​ได้​ไหม

ใช้ได้ ข้อมูล​ตั้ง​ต้น​ของ Google Fonts ระบุ​ว่า​ทั้ง 34 ตระกูล​เป็น​โอ​เพน​ซอร์ส และ​เมื่อ​ตรวจคลัง​ซอร์สโค้ด google/fonts บน GitHub ทั้ง 34 ตระกูล​อยู่​ใน​โฟลเดอร์ ofl คือ​ใช้ SIL Open Font License ซึ่ง​อนุญาต​ให้​ใช้ ฝัง​ใน​เว็บไซต์​และ​เอกสาร แก้ไข และ​แจก​จ่าย​ได้​โดย​ไม่​เสีย​ค่า​ใช้​จ่าย ข้อ​ที่​ต้อง​ทำ​ก่อน​ใช้​กับ​งาน​ของ​ลูกค้า​คือ​เปิด​ไฟล์​สัญญา​ของ​ตระกูล​นั้น​แล้ว​บันทึก​ไว้​ใน​คู่มือ​แบรนด์ เพราะ​ผู้รับ​จ้าง​ราย​ต่อ​ไป​ต้อง​รู้​ว่า​ฟอนต์​นี้​ใช้ได้​ภาย​ใต้​เงื่อนไข​ใด

สัญญา​อนุญาต SIL Open Font License

SIL Open Font License ฉบับ 1.1 อนุญาต​ให้​ทุก​คนใช้ ศึกษา คัด​ลอก รวม ฝัง แก้ไข แจก​จ่าย​ต่อ และ​ขาย​ฟอนต์​ทั้ง​ฉบับ​เดิม​และ​ฉบับ​แก้ไข​ได้​โดย​ไม่มี​ค่า​ใช้​จ่าย ภาย​ใต้​เงื่อนไข​หลักสี่​ข้อ

เงื่อนไข​ใน OFL 1.1 ความ​หมาย​ต่อ​งาน​ของ​ธุรกิจ
ห้าม​ขายตัว​ฟอนต์​ตาม​ลำพัง ขาย​เอกสาร แอป หรือ​สินค้า​ที่​ใช้​ฟอนต์​ได้ ขาย​ไฟล์​ฟอนต์​เปล่า​ไม่​ได้
สำเนา​ทุก​ชุด​ต้อง​แนบ​ประกาศ​ลิขสิทธิ์​และ​สัญญา แอป​หรือ​โปรแกรม​ที่​ฝัง​ฟอนต์​ต้อง​มี​ข้อความ​สัญญา​ให้​ผู้​ใช้​เปิด​ดู​ได้
ฉบับ​แก้ไข​ห้าม​ใช้​ชื่อ​ฟอนต์​สงวน (Reserved Font Name) โดย​ไม่​ได้​รับ​อนุญาต ถ้า​ทีม​ดัดแปลง​ฟอนต์​เป็น​ฟอนต์​ประจำ​แบรนด์ ต้อง​ตั้ง​ชื่อ​ใหม่
ฟอนต์​ต้อง​แจก​จ่าย​ภาย​ใต้​สัญญา​นี้​เท่านั้น ข้อ​บังคับ​นี้​ไม่​ใช้​กับ​เอกสาร​ที่​สร้าง​ด้วย​ฟอนต์

ข้อ​สุดท้าย​สำคัญ​กับ​ธุรกิจ​มาก​ที่สุด สัญญา​เขียน​ไว้​ตรง ๆ ว่า​ข้อ​กำหนด​ให้​ฟอนต์​อยู่​ภาย​ใต้​สัญญา​นี้​ไม่​ใช้​กับ​เอกสาร​ที่​สร้าง​ด้วย​ฟอนต์ โบ​ร​ชัวร์ โลโก้​ที่​เป็น​ตัว​อักษร และ​หน้า​เว็บ​ที่​ตั้ง​ด้วย​ฟอนต์ OFL จึง​ไม่​ต้อง​เผย​แพร่​ภาย​ใต้​สัญญา OFL ตาม

ฟอนต์​อีก​กลุ่ม​ที่​ใช้ได้​โดย​ไม่​ผูก​กับ​ลิขสิทธิ์​ของ​บริษัท​ใด​คือ​ชุด​ฟอนต์​มาตรฐาน​ราชการ​ไทย ซึ่ง​บท Art Director คือ​อะไร ผู้​กำกับ​ศิลป์​ตัดสิน​อะไร​ใน​งาน​โฆษณา อธิบาย​เรื่อง​สิทธิ์​การ​ใช้​ไว้​แล้ว

ระยะ​บรรทัด​และ​การ​ขยาย​ตัว​อักษร​ตาม WCAG

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

เกณฑ์ WCAG 2.2 ระดับ สิ่ง​ที่​ต้อง​ทน​ได้
1.4.12 Text Spacing AA ระยะ​บรรทัด 1.5 เท่า​ของ​ขนาด​ตัว​อักษร ระยะ​หลัง​ย่อหน้า 2 เท่า ระยะ​ห่าง​ตัว​อักษร 0.12 เท่า ระยะ​ห่าง​คำ 0.16 เท่า โดย​เนื้อหา​ไม่​หาย​และ​ใช้​งาน​ได้
1.4.4 Resize Text AA ขยาย​ข้อความ​ได้​ถึง 200% โดย​ไม่​ต้อง​ใช้​เทคโนโลยี​ช่วย และ​ไม่​สูญ​เสีย​เนื้อหา

ระยะ​บรรทัด​ของ​ฟอนต์​ไทย​ควร​เป็น​เท่าไร

ไม่มี​ตัวเลข​เดียว​ที่​ใช้ได้​กับ​ทุก​ฟอนต์ แต่​เกณฑ์ 1.4.12 เป็น​จุด​ตรวจ​ที่​ดี ถ้า​หน้า​เว็บ​ตั้ง​ระยะ​บรรทัด​ไว้​แคบ​แล้ว​ผู้​ใช้​ขยาย​เป็น 1.5 เท่า กล่อง​ข้อความ​ที่​กำหนด​ความ​สูง​ตายตัว​จะ​ตัด​สระ​บน​ของ​บรรทัด​แรก​หรือ​วรรณยุกต์​ที่​ซ้อน​เหนือ​สระ อักษร​ไทย​มี​ชั้น​ของ​สระ​และ​วรรณยุกต์​เหนือ​และ​ใต้​ตัว​พยัญชนะ ฟอนต์​ไทย​จึง​ต้องการ​พื้นที่​แนว​ตั้ง​มากกว่า​ฟอนต์​ละติน​ขนาด​เดียวกัน W3C มี​ข้อ​ยกเว้น​สำหรับ​ระบบ​การ​เขียน​ที่​ไม่​ใช้​คุณสมบัติ​บาง​ข้อ ภาษา​ไทย​ไม่​เว้น​วรรค​ระหว่าง​คำ​ตาม​ปกติ ข้อ​ระยะ​ห่าง​คำ​จึง​มี​ผล​น้อย​กว่า​ข้อ​อื่น

การ​ขยาย​ข้อความ 200% ตาม​ข้อ 1.4.4 อธิบาย​ไว้​ละเอียด​ใน​บริบท​ของ​ไฟล์​อ่าน​บน​จอ​ใน​บท รับ​ทำ Flipbook อี​บุ๊ก วารสาร​ดิจิทัล ให้​อ่าน​จบ​ได้​บน​มือ​ถือ

ฟอนต์​ที่​ฟิจิ⁠ทัล​ใช้บน​เว็บ​ของ​ตัว​เอง

เว็บไซต์ phygital.co.th ใช้​ฟอนต์​สาม​หน้าที่ Prompt สำหรับ​หัวข้อ​ภาษา​ไทย Sarabun สำหรับ​ข้อความ​ทั่วไป และ Noto Serif Thai สำหรับ​เนื้อ​บทความ​ยาว ทั้ง​สาม​ตระกูล​อยู่​ใน​รายการ 34 ตระกูล​ของ Google Fonts และ​โหลด​ผ่าน​ระบบ​ฟอนต์​ของ Next.js ซึ่ง​เก็บ​ไฟล์​ฟอนต์​ไว้​บน​เซิร์ฟเวอร์​ของ​เว็บ​เอง

ใน​โค้ด​ของ​เว็บ​มี​ตัว​ปรับ​ขนาด​ตัว​อักษร​ที่​ผู้​อ่าน​เลือก​ได้ 11 ระดับ ตั้งแต่ 0.70 เท่า​ถึง 1.65 เท่า​ของ​ขนาด​ปกติ ตัว​ปรับ​นี้​ช่วย​ผู้​อ่าน​ที่​ต้องการ​ตัว​ใหญ่​ขึ้น​โดย​ไม่​ต้อง​ขยาย​ทั้ง​หน้า​จอ และ​คู่มือ​แบรนด์​ของ​ฟิจิ⁠ทัล​กำหนด​ให้​ข้อความ​ไทย​ตั้ง word-break: keep-all เพื่อ​ไม่​ให้​เบราว์เซอร์​ตัด​คำ​ไทย​กลาง​คำ​เมื่อ​ขึ้น​บรรทัด​ใหม่

ทำไม​เว็บ​เดียว​ต้อง​ใช้​ฟอนต์​มากกว่า​หนึ่ง​ตระกูล

เพราะ​หัวข้อ​กับ​เนื้อ​ความ​ทำงาน​ต่าง​กัน หัวข้อ​ต้อง​เด่น​ใน​ข้อความ​ไม่​กี่​คำ เนื้อ​ความ​ต้อง​อ่าน​ต่อ​เนื่อง​หลาย​ร้อย​คำ​โดย​ไม่​ล้า การ​ใช้​ตระกูล​เดียว​ทำได้​ถ้า​ตระกูล​นั้น​มี​น้ำ​หนัก​พอ ซึ่ง 26 จาก 34 ตระกูล​บน Google Fonts มี​ตั้งแต่​สี่​น้ำ​หนัก​ขึ้น​ไป แต่​การ​แยก​ตระกูล​ช่วย​ให้​เลือก​ฟอนต์​ที่​เหมาะ​กับ​แต่ละ​หน้าที่​ได้​ตรง​กว่า เช่น หัวข้อ​แบบ​ไม่มี​หัว​ที่​ดู​ทัน​สมัย คู่​กับ​เนื้อ​ความ​ที่​อ่าน​ย่อหน้า​ยาว​ได้​สบาย ข้อ​ควร​ระวัง​คือ​ทุก​ตระกูล​ที่​เพิ่ม​คือ​ไฟล์​ที่​ผู้​ใช้​ต้อง​ดาวน์โหลด​เพิ่ม เว็บ​ที่​ต้อง​โหลด​เร็ว​บน​โทรศัพท์​จึง​ควร​ใช้​ไม่​เกิน​สอง​ถึง​สาม​ตระกูล

เลือก​คู่​ฟอนต์​ห้า​ขั้น

การ​เลือก​ฟอนต์​ไทย​สำหรับ​งาน​ของ​ธุรกิจ​เริ่ม​จาก​หน้าที่​ของ​ข้อความ แล้ว​จึง​ดู​รูป​ทรง ลำดับ​ด้าน​ล่าง​รวม​หลัก​ฐาน​จาก​สาม​ส่วน​ก่อน​หน้า

  1. แยก​ข้อความ​ตาม​ความ​ยาว ข้อความ​สั้น​อย่าง​หัวข้อ ปุ่ม และ​ป้าย กับ​ข้อความ​ยาว​อย่าง​เนื้อ​บทความ​และ​ราย​ละเอียด​สินค้า
  2. เลือก​ฟอนต์​เนื้อ​ความ​ก่อน ถ้า​ผู้​อ่าน​มี​หลาย​วัย​หรือ​เนื้อหา​ยาว ผล​ทดลอง​ชี้​ไป​ทาง​ฟอนต์​มี​หัว
  3. เลือก​ฟอนต์​หัวข้อ​ให้​ต่าง​จาก​เนื้อ​ความ​ใน​มิติ​เดียว เช่น ไม่มี​หัว​คู่​กับ​มี​หัว หรือ​หนา​คู่​กับ​ปกติ แล้ว​ดู​ว่า​ความ​สูง​ของ​ตัว​อักษร​ใกล้​กัน
  4. เปิด​ไฟล์​สัญญา​ของ​ทุก​ตระกูล​แล้ว​จด​ไว้​ใน​คู่มือ​แบรนด์ รวม​ถึง​ชื่อ​ฟอนต์​สงวน​ถ้า​จะ​ดัดแปลง
  5. ทดสอบ​บน​หน้า​จริง​สาม​แบบ ขยาย​ตัว​อักษร​เป็น 200% เพิ่ม​ระยะ​บรรทัด​เป็น 1.5 เท่า และ​เปิด​บน​โทรศัพท์​จอ​เล็ก ดู​ว่า​สระ​บน​และ​วรรณยุกต์​ไม่​ถูก​ตัด

ฟอนต์​ทำงาน​ร่วม​กับ​สี​และ​การ​จัด​วาง ความ​ต่าง​ของ​สี​ตัว​อักษร​กับ​พื้น​หลัง​อธิบาย​ไว้​ใน​บท ทฤษฎี​สี (Color Theory) และ​จิตวิทยา​สี บน​ป้าย​ร้าน​และ​บน​จอ ส่วน​บท Rule of Thirds คือ​อะไร องค์​ประกอบ​ภาพ​ตาม​งาน​วิจัย​การ​มอง​จริง อธิบาย​การ​ใช้​หัวข้อ​เพื่อ​ให้​ผู้​อ่าน​กวาด​สายตา​ได้​เร็ว

สรุป

การ​จับ​คู่​ฟอนต์​ไทย​มี​ตัวแปร​ที่​ภาษา​อังกฤษ​ไม่มี คือ​หัว​กลม​ของ​ตัว​อักษร ผล​ทดลอง​กับ​ผู้​อ่าน​ไทย​ที่​จุฬาลงกรณ์​มหาวิทยาลัย​พบ​ว่า​ฟอนต์​มี​หัว​อ่าน​ย่อหน้า​ยาว​ได้​เร็ว​กว่า​เล็ก​น้อย​และ​ถูก​มอง​ว่า​อ่าน​ง่าย​กว่า​ใน​ทุก​วัย ส่วน​ฟอนต์​ไม่มี​หัว​เหมาะ​กับ​ข้อความ​สั้น​และ​ให้​ภาพ​ที่​ทัน​สมัย​กว่า Google Fonts มี​ฟอนต์​รองรับ​ไทย 34 ตระกูล​ซึ่ง​ทั้งหมด​ใช้​สัญญา OFL ที่​ไม่​ผูก​เอกสาร​ที่​สร้าง​ด้วย​ฟอนต์ และ​หน้า​เว็บ​ต้อง​ทน​ต่อ​ระยะ​บรรทัด 1.5 เท่ากับ​การ​ขยาย​ตัว​อักษร 200% ตาม WCAG โดย​ไม่​ตัด​สระ​และ​วรรณยุกต์

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

ใน​การ​ทดลอง​อ่าน​จาก​ระยะ​ไกล​ของ​ชุด The Contemporary Effects of Loops ฟอนต์ Thonburi ถูก​ใช้​เป็น​ฟอนต์​เปรียบ​เทียบ และ​ผล​คือ​ทุก​กลุ่ม​อายุ​อ่าน​ได้​ใกล้​เคียง​กัน ต่าง​จาก​ฟอนต์ Zed Text ที่​ผล​เปลี่ยน​ตาม​อายุ

ผู้​ตอบ​แบบสอบถาม 139 คนใน​การ​ทดลอง​ที่ 3 เลือก​คำ​ว่า​ทัน​สมัย​และ​แปลก​ตา​กับ​ฟอนต์​ไม่มี​หัว​บ่อย​กว่า และ​เลือก​คำ​ว่า​คลาส​สิก​และ​เป็น​ทางการ​กับ​ฟอนต์​มี​หัว​บ่อย​กว่า ผล​นี้​วัด​ความ​รู้สึก ไม่​ได้​วัด​ยอด​ขาย

ต้อง​อ่าน​สัญญา​ของ​ฟอนต์​นั้น​ก่อน ฟอนต์​เชิง​พาณิชย์​มัก​แยก​สิทธิ์​การ​ใช้บน​เครื่อง การ​ฝัง​ใน​เว็บไซต์ และ​การ​ฝัง​ใน​แอป​ออก​จาก​กัน สิทธิ์​ใช้​ใน​โปรแกรม​ออกแบบ​ไม่​ได้​รวม​สิทธิ์​ฝัง​บน​เว็บ​เสมอ​ไป

WCAG ไม่​ได้​กำหนด​ขนาด​เริ่ม​ต้น แต่​กำหนด​ให้​ขยาย​ได้​ถึง 200% โดย​ไม่​เสีย​เนื้อหา คู่มือ​แบรนด์​ของ​ฟิจิ⁠ทัล​กำหนด​ขนาด​ตัว​อักษร​ด้วย​หน่วย rem ซึ่ง​อิง​จาก​ค่าที่​ผู้​ใช้​ตั้ง​ใน​เบราว์เซอร์ ผู้​ใช้​ที่​ตั้ง​ตัว​ใหญ่​ไว้​แล้ว​จึง​ได้​ตัว​ใหญ่​ตาม​โดย​ไม่​ต้อง​ขยาย​หน้า

ฟอนต์​ไทย​ทั้ง 34 ตระกูล​บน Google Fonts รองรับ​ตัว​อักษร​ละติน​ด้วย แต่​รูป​ทรง​ของ​ตัว​ละติน​อาจ​ไม่​เข้า​กับ​บุคลิก​แบรนด์ หลาย​แบรนด์​จึง​เลือก​ฟอนต์​ละติน​แยก​สำหรับ​หัวข้อ​ภาษา​อังกฤษ เช่น​เว็บ​ของ​ฟิจิ⁠ทัล​ที่​ใช้ Montserrat กับ​ข้อความ​ภาษา​อังกฤษ

PHYGITAL INSIGHT

ฟิจิ⁠ทัล​เห็น​จาก​ผล​ทดลอง​กับ​ผู้​อ่าน​ไทย 139 คน​ว่า​ผู้​อ่าน​ทุก​วัย​ให้​คะแนน​ฟอนต์​มี​หัว​ว่า​อ่าน​ง่าย​กว่า ขณะ​ที่​ผู้​อ่าน​อายุ​น้อย​แยก​ฟอนต์​ไม่มี​หัว​ขนาด​เล็ก​ได้​ดี​กว่า หน้า​เว็บ​ที่​ลูกค้า​หลาย​วัย​ต้อง​อ่าน​จึง​ต้อง​เลือก​ฟอนต์​ตาม​หน้าที่​ของ​ข้อความ​แต่ละ​ส่วน บริการ​ทำ​เว็บไซต์​ของ​ฟิจิ⁠ทัล​ตั้ง​ฟอนต์​หัวข้อ​กับ​เนื้อ​ความ​แยก​กัน ทดสอบ​หน้า​จริง​ที่​ระยะ​บรรทัด 1.5 เท่า​และ​ขยาย​ตัว​อักษร 200% ก่อน​ส่ง​มอบ และ​ใส่​ตัว​ปรับ​ขนาด​ตัว​อักษร​ให้​ผู้​อ่าน​เลือก​เอง​ได้

ให้ PHYGITAL AGENCY ช่วยต่อยอดเรื่องนี้สู่ผลลัพธ์จริง

ฟอนต์​ที่​ดู​สวย​ใน​แบบ​ร่าง​อาจ​ตัด​สระ​บน​ทิ้ง​เมื่อ​ลูกค้า​สูง​วัย​ขยาย​ตัว​อักษร​บน​หน้า​เว็บ

ให้ PHYGITAL AGENCY วาง​ฟอนต์​และ​ทดสอบ​หน้า​เว็บ​ของ​คุณ​กับ​การ​ขยาย​ตัว​อักษร​จริง​ก่อน​เปิด​ใช้​งาน

PARANATH PANARATANA

WRITTEN BY

PARANATH PANARATANA

CHAIRMAN OF PHYGITAL AGENCY

ประธานกรรมการบริษัท ฟิจิทัล เอเจนซี จำกัด มีประสบการณ์ดูแลการตลาดที่ผสานโลกจริงและโลกออนไลน์เข้าด้วยกัน ตลอดจนเป็นที่ปรึกษาในการวินิจฉัยธุรกิจ อีกทั้งยังเคยทำงานในสายวิดีโอโปรดักชั่นและภาพยนตร์ไทยอีกด้วย