Designing Thai and English in one paragraph

ลองจับคู่ serif ฝรั่งกับ serif ไทย แล้วคุณจะรู้ว่า — มีอะไรบางอย่าง คอยขัดคุณตลอดเวลา

x-height ไม่เท่ากัน ระยะบรรทัดที่หายใจสบายสำหรับภาษาอังกฤษ จะบีบวรรณยุกต์ด้านบนของ ไ ใ จนแน่น ตัวเอียง (italic) ที่สื่อ "น้ำเสียง" ในภาษาอังกฤษ พอเป็นไทยก็แค่…เบลอ ๆ เพราะอักษรไทยดั้งเดิมไม่ได้ออกแบบมาให้เอียง

ผมใช้เวลาอยู่กับเรื่องนี้นานพอสมควร กว่าจะหาจุดที่ทั้งสองภาษาอยู่ในย่อหน้าเดียวกันได้ โดยไม่ทะเลาะกัน

คู่ที่ผมเลือก

• IBM Plex Serif สำหรับ body ภาษาอังกฤษ
• IBM Plex Sans Thai Looped สำหรับ body ภาษาไทย
• ทั้งคู่ออกแบบใต้ family เดียวกัน เลยมีจังหวะที่ใกล้กัน พอสลับภาษากลางย่อหน้า สายตาก็ไม่กระตุก

เคล็ดลับไม่ใช่การเลือกฟอนต์สวย ๆ มันคือการเลือกฟอนต์ที่แชร์เจตนาของคนออกแบบ

ฟอนต์สวยมีเป็นล้าน แต่ฟอนต์ที่ "เคารพกัน" มีน้อยกว่านั้นเยอะครับ พอผมเริ่มมองหา คู่ที่ออกแบบโดยทีมเดียวกัน ปัญหาทางสายตาก็หายไปเกินครึ่ง โดยที่ผมไม่ต้องไปฝืน override อะไรเลย

เรื่องของ line-height

ย่อหน้าภาษาไทยของผมตั้งไว้ที่ line-height: 1.78 ส่วนภาษาอังกฤษอยู่ที่ 1.65 ฟังดูต่างนิดเดียว แต่ในการอ่านจริง ๆ มันคือคนละเรื่อง

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

ภาษาอังกฤษไม่มีปัญหานี้ เพราะตัวอักษรอยู่บนเส้น baseline เดียว — ขึ้นแค่ ascender ลงแค่ descender จบ

ตัวเอียงในไทย

นี่เป็นเรื่องที่ผมยังหาคำตอบที่พอใจไม่ได้

ภาษาอังกฤษใช้ italic เพื่อ เน้น หรือบอกว่าเป็น voice ที่ต่างออกไป แต่ภาษาไทย ดั้งเดิมไม่มี italic พอจับฟอนต์ไทยมาเอียงด้วย CSS มันก็แค่ บิด ไม่ได้สื่ออะไร

ทางออกที่ผมใช้ตอนนี้คือ — เน้นด้วย น้ำหนัก (bold) แทน italic ในภาษาไทย แต่ถ้าย่อหน้าเดียวมีทั้งไทยและอังกฤษ ผมจะใช้ italic กับอังกฤษ และ bold กับไทย ในความหมายเดียวกัน

มันไม่ใช่คำตอบที่สวยที่สุด แต่มันชัดที่สุด และผมว่า "ชัด" สำคัญกว่า "สวย" สำหรับเนื้อหาที่ต้องอ่าน

สิ่งที่ผมเรียนรู้

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

มันเหมือนเขียนโค้ดสองภาษาในไฟล์เดียวกันแหละครับ — TypeScript กับ SQL อยู่คนละ paradigm พยายามให้มัน "เหมือนกัน" ก็ผิดตั้งแต่แรก ปล่อยให้แต่ละอย่าง เป็นตัวเอง แล้วหา interface กลางที่ทั้งคู่เคารพ — แบบนั้นถึงจะเวิร์ก