Typography Tokens
ตาม font block ใน tokens/bgrimm.tokens.json — จับคู่กับ font family ที่นิยามไว้ที่ Typography
Font Family
| Token | ค่า | ใช้กับ |
|---|---|---|
font.family.heading-en | 'Source Serif Pro', 'Times New Roman', serif | หัวข้อภาษาอังกฤษล้วน (พิมพ์: bold · ดิจิทัล: semibold) |
font.family.body | 'Noto Sans Thai', 'Open Sans', Arial, sans-serif | UI/digital ทั้งหมด รวมหัวข้อภาษาไทย |
font.family.formal-th-heading | 'Sarabun', Arial, sans-serif | หัวข้อไทยในงานพิมพ์/พรีเซนเทชัน |
font.family.formal-th-body | 'Kanit', Arial, sans-serif | เนื้อความไทยในงานพิมพ์/พรีเซนเทชัน |
font.family.formal-letter | 'Browallia New', 'Angsana New', Tahoma, serif | จดหมาย/สัญญา/เอกสารทางการและ letterhead ทั้งฉบับ |
Type Scale
| Token | ขนาด | ใช้กับ |
|---|---|---|
font.size.xs | 12px | Caption, timestamp, legal text |
font.size.sm | 14px | Label, helper text, ปุ่ม |
font.size.md | 16px | Body text (default) |
font.size.lg | 20px | Lead paragraph, h4 |
font.size.xl | 28px | h3 |
font.size.xxl | 40px | h2 |
font.size.xxxl | 56px | h1 / hero headline |
Font Weight
| Token | ค่า | ใช้กับ |
|---|---|---|
font.weight.regular | 400 | Body text |
font.weight.medium | 500 | Label, emphasis เบาๆ |
font.weight.semibold | 600 | Subheading, card title |
font.weight.bold | 700 | Heading, ปุ่ม, ตัวเลขสำคัญใน dashboard |
Line Height
| Token | ค่า | ใช้กับ |
|---|---|---|
font.line-height.tight | 1.2 | Heading ขนาดใหญ่ |
font.line-height.normal | 1.5 | Body text (default) |
font.line-height.relaxed | 1.75 | ย่อหน้ายาว/เนื้อหาอ่านต่อเนื่อง |
ภาษาไทยต้องการ line-height มากกว่าอังกฤษเล็กน้อย
สระบน-ล่างของภาษาไทยกินพื้นที่แนวตั้งมากกว่าอังกฤษ — เนื้อหาไทยที่ผสมกับอังกฤษ ให้ใช้ line-height.normal (1.5) เป็นค่าต่ำสุดเสมอ อย่าลดต่ำกว่านี้แม้ใน UI ที่พื้นที่จำกัด เพราะสระ/วรรณยุกต์จะถูกตัด
