ออกแบบตัวอักษรไทยให้อ่านง่าย ระยะบรรทัด การตัดคำ และการจับคู่ฟอนต์

ระยะบรรทัดต้องเผื่อสระและวรรณยุกต์

อักษรไทยมีส่วนที่ยื่นขึ้นและลงจากแนวฐานมากกว่าละติน เช่น สระอิ สระอี ที่อยู่เหนือพยัญชนะ แล้วยังมีไม้เอกและไม้โทซ้อนอยู่ข้างบนอีกชั้น รวมถึงสระอุ สระอู ที่ห้อยลงล่าง ถ้าระยะบรรทัดแน่นเกินไป ส่วนเหล่านี้จะชนกับบรรทัดข้างเคียงและอ่านยาก

โดยทั่วไปเนื้อหายาวภาษาไทยมักต้องการ line-height ประมาณ 1.5 ถึง 1.8 เท่าของขนาดตัวอักษร ซึ่งหลวมกว่าที่นิยมใช้กับอังกฤษ ส่วนหัวข้อขนาดใหญ่ลดลงได้ แต่ควรทดสอบกับคำที่มีวรรณยุกต์ซ้อนจริง เช่น "ผู้ใหญ่" "กี่" "น้ำ" อย่าทดสอบแค่คำสั้นๆ

• เนื้อความยาว: เริ่มทดลองที่ line-height ประมาณ 1.6 แล้วปรับตามฟอนต์
• หัวข้อใหญ่: ลดได้บ้าง แต่ต้องดูว่าสระบนและล่างไม่ชนบรรทัดข้างเคียง
• ปุ่มและ label บรรทัดเดียว: อย่ากำหนดความสูงตายตัวจนตัดสระหรือวรรณยุกต์

ไม่มีช่องว่างระหว่างคำ แล้วตัดบรรทัดอย่างไร

ภาษาไทยเว้นวรรคตามประโยคหรือวลี ไม่ได้เว้นระหว่างคำ เบราว์เซอร์สมัยใหม่ส่วนใหญ่มีพจนานุกรมสำหรับตัดคำไทยอยู่แล้ว ถ้าตั้ง attribute lang="th" ให้ถูกต้อง ข้อความจะขึ้นบรรทัดใหม่ตามขอบเขตคำได้ในหลายกรณี แต่ผลอาจต่างกันเล็กน้อยระหว่างเบราว์เซอร์และอุปกรณ์

ปัญหาที่พบบ่อยคือข้อความในพื้นที่แคบ เช่น ปุ่ม การ์ด หรือหน้าจอมือถือ ที่คำถูกตัดกลางแล้วอ่านเพี้ยน ถ้าต้องควบคุมจริงจัง ให้แทรกตัวอักษรความกว้างศูนย์ (zero-width space) ในตำแหน่งที่อนุญาตให้ขึ้นบรรทัดใหม่ หรือใช้การตัดคำฝั่งเซิร์ฟเวอร์สำหรับข้อความที่มาจากระบบ และอย่าลืมทดสอบกับข้อความยาวที่ไม่มีที่เว้นเลย

ตัวอักษรที่ดีคือตัวอักษรที่ผู้อ่านไม่ต้องคิดถึงมันเลย

จับคู่ฟอนต์ไทยกับละติน

ผลิตภัณฑ์ส่วนใหญ่ต้องแสดงทั้งไทยและอังกฤษในหน้าเดียวกัน ถ้าใช้ฟอนต์ละตินที่สวยแต่ไม่มีอักษรไทย ระบบจะดึงฟอนต์สำรองมาใช้โดยอัตโนมัติ ซึ่งมักมีน้ำหนัก ขนาด และสัดส่วนไม่เข้ากัน จึงควรเลือกฟอนต์ไทยเองและจัดลำดับ fallback ให้ชัดเจน

ทางลัดที่ปลอดภัยคือเลือกตระกูลฟอนต์ที่ออกแบบชุดไทยและละตินมาด้วยกัน เช่น Noto Sans Thai, IBM Plex Sans Thai หรือ Sarabun แต่ถ้าจะจับคู่ฟอนต์ต่างตระกูล ให้ดูที่ความสูงตัวพิมพ์เล็ก น้ำหนักเส้น และความรู้สึกโดยรวม แล้วทดลองวางข้อความผสมไทยอังกฤษในประโยคเดียวกัน

ขนาด น้ำหนัก และตัวเลข

ที่ขนาดเท่ากัน อักษรไทยมักดูเล็กกว่าละติน เพราะตัวพยัญชนะมีความสูงช่วงลำตัวต่ำกว่า ดังนั้นเนื้อความภาษาไทยบนหน้าจอควรขยับขึ้นอีกหนึ่งถึงสองพิกเซลเมื่อเทียบกับอังกฤษ หลายทีมเริ่มที่ 16 พิกเซลขึ้นไป และไม่ควรเล็กกว่านี้สำหรับเนื้อความหลัก

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

ข้อผิดพลาดที่พบบ่อย

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

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