บทเรียน typography · intermediate · 25 นาที

ไทย + ลาติน: คู่มือไทโปกราฟีสองภาษา

โดย Narongsak Chaiwong

Typography & Licensing Specialist, ThaiGraph · 16 เมษายน 2569

ตรวจสอบข้อมูลเมื่อ April 2026

สิ่งที่คุณจะได้เรียน

Typography สองภาษาไทย-ลาตินล้มเหลวหรือสำเร็จที่การตัดสินใจทางเทคนิค 6 เรื่องเฉพาะ: สัดส่วน line-height, การจับ x-height, การจับคู่ฟอนต์, การเว้นวรรคอักษร, การจัดการตัวเลข และการส่งฟอนต์บนเว็บ คู่มือนี้ครอบคลุมทั้ง 6 ข้อพร้อมสเปกที่ใช้งานได้ สำหรับนักออกแบบที่ทำงานสองภาษา — ผลิตภัณฑ์ไทยที่มี touchpoint ภาษาอังกฤษ ผลิตภัณฑ์นานาชาติที่เปิดตัวในไทย หรือบริบท editorial ใด ๆ ที่มีทั้งสองสคริปต์ — ที่ต้องการ checklist ครบถ้วนมากกว่าการประมาณโดยสัญชาตญาณ

ปัญหาแนวตั้ง

ภาษาไทยครอบครองโซนแนวตั้ง 4 ชั้น (ตัวห้อยใต้ baseline, baseline พยัญชนะ, สระเหนือพยัญชนะ, วรรณยุกต์) ในขณะที่ลาตินครอบครอง 2 ชั้น (ตัวห้อย, baseline/x-height) ความต่างเชิงโครงสร้างนี้ขับเคลื่อนการตัดสินใจ line-height และ spacing สองภาษาทุกอย่าง เมื่อนักออกแบบลาตินตั้งไทยที่ line-height ลาติน (1.2-1.4) วรรณยุกต์บนบรรทัดหนึ่งจะชนตัวห้อยของบรรทัดเหนือ การแก้ง่ายและตายตัว: line-height ไทยสูงกว่าลาตินเทียบเท่า 10-15% เสมอ (Google Fonts Thai Typography Primer, 2024)

ตัวเลขในการทำงาน: ถ้า body ลาตินคือ 16 px / 24 px (1.5), body ไทยคือ 16 px / 26 px (1.625) ถ้า display ลาตินคือ 48 px / 56 px (1.17), display ไทยคือ 48 px / 72 px (1.5) ความต่างของสัดส่วน display ใหญ่กว่าเพราะวรรณยุกต์ของ display type มีขนาดสัมพัทธ์ใหญ่กว่าและต้องการพื้นที่มากขึ้น ตัวเลขเหล่านี้คือค่าต่ำสุด; ดัน line-height ไทยให้สูงขึ้น (1.7, 1.8) ยอมรับได้สำหรับการอ่านยาว

ใน CSS pattern ที่แนะนำคือ selector ตามภาษา:

html[lang="th"] body { line-height: 1.625; font-size: 17px; }
html[lang="en"] body { line-height: 1.5; font-size: 16px; }

การเพิ่มขนาด (17 px ไทยเทียบ 16 px ลาติน) จัดการปัญหา optical size ที่กล่าวถึงด้านล่าง

ปัญหา optical size

Glyph ไทยดูเล็กกว่า glyph ลาตินที่ point size เดียวกันทางสายตาเพราะ body พยัญชนะครอบครอง em-square ประมาณ 50% เท่านั้น โดยที่เหลือแบ่งระหว่างชั้นสระเหนือกับสระใต้ ที่ 16 px ลาติน, cap-height ลาตินประมาณ 11 px และ x-height 8 px ที่ 16 px ไทย, body พยัญชนะประมาณ 8 px — เล็กกว่าตัวพิมพ์เล็กลาตินที่การตั้งค่าเดียวกันมองเห็นได้ สเปก typography สองภาษาของ Cadson Demak (Typotheque Journal, 2022) แนะนำให้เพิ่ม body ไทย 5-10% เพื่อให้ถึงความเท่าเทียมทางสายตา

ในทางปฏิบัติ: ลาติน 14 px กลายเป็นไทย 15 px ลาติน 16 px กลายเป็นไทย 17 px หรือ 18 px ลาติน 48 px display คงเป็นไทย 48 px ได้ถ้า typeface มี body พยัญชนะสูงกว่า; ฟอนต์ display ส่วนใหญ่ (Kanit Bold, Prompt Black) ใหญ่พอที่ไม่ต้องปรับที่ขนาด display

กฎจับ x-height

เมื่อจับคู่ typeface ลาตินกับ typeface ไทย การวัดที่สำคัญคือการจับ x-height ภายใน 5%: x-height ลาตินและความสูง body พยัญชนะไทยต้องจัดทางสายตาที่ point size เดียวกัน นี่คือกฎทำงานของวินิจฉัยกุล (2018) x-height ที่ไม่จับคู่ให้การจับคู่ที่ดู “ผิด” แม้ทุกอย่างอื่นจะถูก — สายตาจับความไม่สม่ำเสมอแนวตั้งทันที

การจับคู่สองภาษาที่เป็น canon ปัจจุบันผ่านการทดสอบ x-height ทั้งหมด:

• Sarabun + Inter — body heights 500-em ทั้งคู่ จับคู่สมบูรณ์ คำแนะนำ default สำหรับ UI body
• Kanit + Roboto — เรขาคณิตทั้งคู่ ~510-em ทั้งคู่ default ผลิตภัณฑ์ผู้บริโภค
• Prompt + Inter — ไทยไม่มีหัวโมเดิร์น + Inter default SaaS
• IBM Plex Thai + IBM Plex Sans — ออกแบบเป็น family จับคู่สมบูรณ์ default องค์กร
• Noto Sans Thai + Noto Sans — คู่จับคู่ของ Google, default เว็บ
• Sarabun + Source Serif (สำหรับความต้องการ serif) — จับคู่ 500-em
• Charmonman + Dancing Script — คู่จับคู่ลายมือ ไม่เป็นทางการทั้งคู่

การจับคู่ที่ต้องหลีกเลี่ยง: serif ลาตินใดที่มี x-height ต่ำกว่า 450-em (Garamond, Baskerville) จับคู่กับฟอนต์ไทยไม่มีหัวโมเดิร์น ความไม่เข้ากันของ x-height มองเห็นชัดและแก้ไม่ได้

Spacing และ tracking

เนื้อไทยในการทำงานตั้งด้วย letter-spacing 0; tracking บวกบน body ไทยทำลายการเชื่อมสระ-พยัญชนะและผลิตภาษาอ่านไม่ออก convention ลาตินที่เพิ่ม tracking บวกเล็กน้อยสำหรับการอ่านที่ขนาดเล็กไม่ใช้กับไทย สระและวรรณยุกต์ต้องการระยะที่ออกแบบมากับพยัญชนะพอดีไม่งั้นโครงสร้างพยางค์แตกทางสายตา

สำหรับ all-caps-equivalent ของไทย (พาดหัวที่มีแค่พยัญชนะโดยไม่มีสระ — การทำ display แบบหนึ่ง), tracking บวกยอมรับได้ที่ 20-50 units สำหรับเนื้อไทยใด ๆ ที่มีสระ tracking คงที่ 0

Word spacing ทำงานต่างกัน: ไทยไม่มี interword spaces ในข้อความต้นฉบับ แต่มีขอบเขตคำที่ผู้อ่านแยกโดยปริยาย ใช้ Thai-aware word-break library (ICU BreakIterator หรือ libthai) หรือใส่ zero-width spaces (U+200B) ที่ขอบเขตคำที่ทราบในเนื้อหาต้นฉบับ พฤติกรรม CSS word-break default ตัดกลางคำในไทย; ตั้ง word-break: normal พร้อม overflow-wrap: break-word และให้ segmentation library จัดการการตัดบรรทัดจริง

ตัวเลข — ไทยกับอารบิก

ตัวเลขไทย (๐ ๑ ๒ ๓ ๔ ๕ ๖ ๗ ๘ ๙) และตัวเลขอารบิก (0-9) ใช้งานทั้งคู่ แต่ในบริบทที่ต่างกัน พิธีการ ราชวงศ์ ศาสนา และเอกสารทางการใช้เลขไทย; ข้อความเชิงพาณิชย์ เทคนิค และประจำวันใช้เลขอารบิก แนวทางการใช้ภาษาของราชบัณฑิตสถาน (2011) ระบุการแยกนี้ชัดเจน

สำหรับการตัดสินใจออกแบบ:

• การ์ดแต่งงาน ป้ายวัด ประกาศทางราชวงศ์ วันที่ตามปฏิทินพุทธ — เลขไทย
• ใบเสร็จ ราคา มิติสินค้า เบอร์โทร URLs วันที่บนบรรจุภัณฑ์ — เลขอารบิก
• บริบทผสม (การ์ดแต่งงานที่มีเบอร์ RSVP) — เลขไทยสำหรับวันที่พิธี, เลขอารบิกสำหรับเบอร์โทร
• บริบท UI — เลขอารบิกเสมอ แอปผู้บริโภคไทยทุกตัวส่งด้วยเลขอารบิก

กฎ: ห้ามผสมเลขไทยและอารบิกภายใน logical element เดียวกัน พ.ศ. ๒๕๖๙ / CE 2026 ถูก; พ.ศ. 2569 / CE 2026 อ่านว่าเป็นข้อผิดพลาดจากการ copy-paste

การใช้งานบนเว็บ

pattern สำหรับเว็บสองภาษาไทย-ลาตินระดับ production ใช้ CSS unicode-range subsetting เพื่อส่งไฟล์ฟอนต์เฉพาะไทยสำหรับ codepoint ไทยและไฟล์เฉพาะลาตินสำหรับ codepoint ลาติน ป้องกันไม่ให้ผู้ใช้ download glyph ที่ไม่ใช้ เอกสาร unicode-range ของ MDN (2024) ครอบคลุม syntax; pattern ทำงานของไทยคือ:

@font-face {
  font-family: 'Sarabun';
  src: url('/fonts/sarabun-thai.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: 'Sarabun';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-007F, U+2000-206F;
}

body {
  font-family: 'Sarabun', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.625;
}

Browser fetch เฉพาะไฟล์ไทยเมื่อเรนเดอร์ตัวอักษรไทย, เฉพาะไฟล์ลาตินเมื่อเรนเดอร์ตัวอักษรลาติน สำหรับเว็บที่ไทยเป็นหลัก preload ไฟล์ไทยชัดเจน:

<link rel="preload" as="font" type="font/woff2"
      href="/fonts/sarabun-thai.woff2" crossorigin>

ข้าม preload บนเว็บที่ลาตินเป็นหลัก — ไฟล์ไทย fetch แบบ lazy เมื่อต้องการ

Pattern การจัดเลย์เอาต์สองภาษา

สาม pattern เลย์เอาต์จัดการเนื้อหาสองภาษาไทย-ลาตินส่วนใหญ่: คอลัมน์ขนาน, ซ้อนแนวตั้ง, และ inline dominant-language ตัวเลือกที่ถูกต้องขึ้นอยู่กับว่าทั้งสองสคริปต์แบกความหมายเดียวกันหรือไม่ และใครคือผู้ชมหลัก

• คอลัมน์ขนาน — ไทยซ้าย ลาตินขวา น้ำหนักภาพเท่ากัน ใช้สำหรับการ์ดเชิญทางการ เอกสารราชการ brochure สองภาษาที่ทั้งสองภาษาให้ผู้ชมที่ต่างกัน
• ซ้อนแนวตั้ง — ไทยก่อน ลาตินด้านล่าง (เล็กกว่าและอ่อนกว่า) ใช้สำหรับผลิตภัณฑ์ที่ไทยเป็นหลักและภาษาอังกฤษเป็นการอำนวยความสะดวก ไม่ใช่เท่าเทียม ป้ายถนนในกรุงเทพ เมนูร้านอาหารไทยในไทย branding ไทยสำหรับสินค้าท้องถิ่น
• Inline dominant-language — สคริปต์หนึ่งเป็นหลัก อีกสคริปต์ปรากฏเฉพาะสำหรับชื่อเฉพาะหรือคำศัพท์บางคำ ใช้สำหรับเนื้อหา editorial ที่ผู้ชมอ่านภาษาเดียวและอีกภาษาปรากฏเป็น quotation หรือ transliteration

Pattern เลย์เอาต์คือการตัดสินใจแรกในงานออกแบบสองภาษา — การเลือก typography ตามมาไหลจากมัน คอลัมน์ขนานต้องการการจับ x-height เหนือสิ่งอื่นใด เลย์เอาต์ซ้อนอนุญาตให้ภาษารองใช้ typeface ต่างกันได้ เนื้อหาผสม inline ต้องการ font-family fallback chain ที่จัดการทั้งสองสคริปต์ในสาย string เดียว

อ่านต่อ

หน้า การจับคู่ฟอนต์ไทย + ลาติน ระบุการจับคู่ที่แนะนำเฉพาะพร้อมข้อมูล x-height pillar คู่มือครบถ้วนเรื่องไทโปกราฟีไทย ครอบคลุมระบบการเขียนเอง การปฏิวัติฟอนต์ไม่มีหัว อธิบายว่าทำไมฟอนต์ไทยไม่มีหัวจับคู่กับลาตินสะอาดกว่าฟอนต์ไทยมีหัว ฟอนต์เฉพาะที่เกี่ยวข้องที่สุด: Sarabun, Kanit, IBM Plex Thai, Noto Sans Thai

ตรวจสอบข้อมูลเมื่อ April 2026