Digital Platforms

สำหรับงานหน้าจอ (เว็บ, แอป, ดีไซน์ระบบ) ใช้ Noto Sans Thai เป็นฟอนต์หลักแทน Sarabun/Kanit เพื่อความครอบคลุม Unicode ที่กว้างกว่า, น้ำหนักฟอนต์ครบชุดกว่า และ rendering ที่เสถียรกว่าข้ามเบราว์เซอร์/OS — เป็น single source of truth ปัจจุบันของ custom.css ทั้งเว็บไซต์นี้ (บริบทที่ 1 สำหรับงานพิมพ์ดูที่ Print & Formal Documents)

บริบทที่ 2 — ดิจิทัล/โปรดักต์/UI

• Digital body (ไทย/สองภาษา): Noto Sans Thai, fallback Arial
• Digital heading: Noto Sans Thai เป็นหลัก — ผสม Source Serif Pro ได้ สำหรับหัวข้อ/ส่วนภาษาอังกฤษ เพื่อความ premium โดยใช้น้ำหนัก semibold (600) — Source Serif Pro ไม่มีตัวอักษรไทย ห้ามใช้กับข้อความภาษาไทยล้วน
• English headline (premium/formal accent): Source Serif Pro น้ำหนัก semibold (600), fallback Times New Roman
• English body: Open Sans หรือ Noto Sans, fallback Arial

บริบทที่ 2 · ฟอนต์หลักของเว็บไซต์นี้

Noto Sans Thaidigital primary

ไทย Thai Aa

บริษัท บี.กริม เพาเวอร์ — B.Grimm Power

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

ก ข ฃ ค ฅ ฆ ง · ABCDEFG abcdefg · 0123456789 · ๐๑๒๓๔๕๖๗๘๙

น้ำหนักบาง Light 300 300

น้ำหนักปกติ Regular 400 400

น้ำหนักกลาง Medium 500 500

น้ำหนักกึ่งหนา SemiBold 600 600

น้ำหนักหนา Bold 700 700

ใช้กับ: ทุกอย่างบนหน้าจอ — h1 ถึง h6, body, ปุ่ม, ป้ายกำกับ, ตาราง และ chart label

เหตุผลที่งานดิจิทัลไม่ใช้ Sarabun/Kanit: ทั้งสองตัวไม่มี glyph ภาษาอังกฤษที่ออกแบบมาให้เข้ากับตัวไทยในไฟล์เดียว เมื่อเขียนสองภาษาปนกันเบราว์เซอร์จะสลับไปหยิบฟอนต์อังกฤษตัวอื่นมาต่อ ทำให้เส้นและความสูงไม่ตรงกันกลางบรรทัด

CSS Variables

:root {
  --font-heading: 'Source Serif Pro', 'Times New Roman', serif; /* English-only headline — semibold (600) ในดิจิทัล */
  --font-body: 'Noto Sans Thai', 'Open Sans', Arial, sans-serif; /* ทุกอย่างอื่น รวมหัวข้อภาษาไทย */
  --font-formal: 'Browallia New', 'Angsana New', Tahoma, serif; /* จดหมาย/สัญญา/letterhead — ฟอนต์ระบบ Windows */
}

กฎการใช้

หน้าที่เป็นภาษาไทยเป็นหลัก ให้ h1/h2 ใช้ --font-body (Noto Sans Thai) แทน --font-heading เสมอ เพราะ Source Serif Pro ไม่มี glyph ภาษาไทย — สงวน --font-heading ไว้สำหรับหัวข้อภาษาอังกฤษล้วน หรือส่วนภาษาอังกฤษในหัวข้อสองภาษา โดยใช้น้ำหนัก semibold (600) (ไม่ใช่ bold) เพื่อคงความ premium โดยไม่แข่งกับความหนาของตัวไทย

ดูผลจริงของกฎข้อนี้ได้ด้านล่าง — ทั้งสองคอลัมน์ใช้ข้อความชุดเดียวกัน ต่างกันแค่ font-family:

หัวข้อภาษาไทยกับ font-heading

ถูก · หัวข้อไทยใช้ --font-body

พลังงานที่ยั่งยืน B.Grimm Power

ตัวไทยและตัวอังกฤษมาจากฟอนต์เดียวกัน น้ำหนักเส้นและความสูงจึงสม่ำเสมอกันทั้งบรรทัด

font-family: var(--font-body)

ผิด · หัวข้อไทยใช้ --font-heading

พลังงานที่ยั่งยืน B.Grimm Power

ตัวอังกฤษเป็น serif แต่ตัวไทยตกไปใช้ fallback ทำให้สองภาษาในบรรทัดเดียวเป็นฟอนต์คนละตัวและน้ำหนักไม่เท่ากัน

font-family: var(--font-heading)

สังเกตคอลัมน์ขวา: คำภาษาอังกฤษเป็น serif ตามที่สั่ง แต่คำภาษาไทยไม่ได้เป็น serif เพราะ Source Serif ไม่มีตัวอักษรไทยให้ใช้ เบราว์เซอร์จึงหยิบฟอนต์อื่นมาแทนโดยที่เราคุมไม่ได้