Skip to main content

Type Scale & Pairing

รวมเครื่องมือและตัวอย่างเชิงลึกของระบบตัวอักษร — ขนาด (scale), ระยะบรรทัด (line-height), ลำดับชั้น (hierarchy) และการจับคู่ฟอนต์ไทย–อังกฤษ

Live Type Scale — ปรับดูได้เอง​

สลับฟอนต์ น้ำหนัก และระยะบรรทัดด้านล่าง เพื่อดูว่าลำดับชั้นตัวอักษรเปลี่ยนหน้าตาไปแค่ไหนก่อนเอาไปใช้จริง (ทำงานด้วย CSS ล้วน ไม่มี JavaScript)

Display44px · lh 1.15--font-size-display
พลังงานยั่งยืน Sustainable
H134px · lh 1.2--font-size-h1
พลังงานยั่งยืน Sustainable
H227px · lh 1.25--font-size-h2
พลังงานยั่งยืน Sustainable
H321px · lh 1.35--font-size-h3
พลังงานยั่งยืน Sustainable
Body16px · lh 1.75--font-size-body
พลังงานยั่งยืน Sustainable
Small14px · lh 1.6--font-size-sm
พลังงานยั่งยืน Sustainable
Caption12px · lh 1.5--font-size-caption
พลังงานยั่งยืน Sustainable

ลอง Source Serif ดู แล้วสังเกตว่าคำภาษาไทยไม่เปลี่ยนตาม เพราะฟอนต์นั้นไม่มีตัวอักษรไทย นั่นคือเหตุผลที่กฎด้านบนห้ามใช้กับหัวข้อไทย

ระยะบรรทัดสำหรับภาษาไทย​

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

เป้าหมายของเราคือการเป็นผู้นำด้านพลังงานที่ยั่งยืน ซึ่งมุ่งเน้นการสร้างคุณค่าให้ผู้มีส่วนได้เสียทุกกลุ่มอย่างเท่าเทียม

ทั้งนี้ต้องอาศัยความร่วมมือที่เหนียวแน่นทั้งภายในและภายนอกองค์กร เพื่อให้เกิดผลลัพธ์ที่วัดได้อย่างเป็นรูปธรรม

เส้นสีส้มแนวนอนคือระยะบรรทัดที่กำลังใช้อยู่ ลองกด 1.0 แล้วดูสระบน "ยั่ง" "เหนียว" ที่เริ่มชนบรรทัดข้างเคียง

กฎระยะบรรทัดที่ใช้จริง

เนื้อหาภาษาไทย ใช้ line-height ไม่ต่ำกว่า 1.5 และ 1.75 สำหรับย่อหน้ายาว — หัวข้อขนาดใหญ่ลดลงมาที่ 1.2–1.35 ได้ เพราะมีไม่กี่บรรทัดและตัวอักษรใหญ่พอที่สระจะไม่ชนกัน

Type Hierarchy — h1 ถึง h6 ในบริบทจริง​

หน้าจำลองด้านล่างแสดงลำดับชั้นตัวอักษรทั้ง 6 ระดับในรูปแบบที่เหมือนบทความจริง — มีหัวข้อ บทนำ ย่อหน้า ข้อความเสริม และ caption — เพื่อให้เห็นภาพว่าแต่ละระดับใช้ตอนไหนและมีน้ำหนักภาพต่างกันอย่างไร

ลำดับชั้นตัวอักษรในบริบทจริง

วิสัยทัศน์ด้านพลังงานที่ยั่งยืนขององค์กร

บริษัท บี.กริม เพาเวอร์ จำกัด (มหาชน) ดำเนินธุรกิจผลิตและจำหน่ายไฟฟ้าจากพลังงานหมุนเวียน โดยยึดหลัก “ซื่อสัตย์สุจริตและเป็นธรรม” ในการดำเนินงานทุกมิติมาตั้งแต่ก่อตั้ง

1. กลยุทธ์การเติบโต GreenLeap 2030

แผน GreenLeap 2030 ตั้งเป้าเพิ่มกำลังการผลิตสู่ 10,000 เมกะวัตต์ภายในปี 2030 โดยมุ่งเน้นการลงทุนในโครงการพลังงานแสงอาทิตย์ ลม และระบบกักเก็บพลังงาน (BESS) ทั้งในประเทศและกลุ่มประเทศเอเชียตะวันออกเฉียงใต้

1.1 พลังงานแสงอาทิตย์ — โครงการ Solar Farm

โครงการโซลาร์ฟาร์มของบี.กริม ครอบคลุมพื้นที่กว่า 5,000 ไร่ในจังหวัดฉะเชิงเทรา ด้วยกำลังการผลิตปัจจุบัน 257 เมกะวัตต์ และกำลังขยายเพิ่มอีก 200 เมกะวัตต์ในปี 2027–2028

รายละเอียดทางเทคนิค

แผงโซลาร์เซลล์ที่ใช้เป็นชนิด Mono PERC Half-Cut 550Wp จากผู้ผลิต Tier 1 ร่วมกับระบบ Mounting Structure แบบ Fixed-Tilt ที่คำนวณองศาให้เหมาะสมกับละติจูดของประเทศไทย

มาตรฐานความปลอดภัย

ทุกโครงการผ่านการประเมิน EIA และ EHIA ตามกฎหมายไทย มีการติดตั้ง SCADA สำหรับมอนิเตอร์ แบบ Real-time พร้อมระบบ Fire Suppression อัตโนมัติในทุกสถานีไฟฟ้าย่อย

เอกสารอ้างอิง

B.Grimm Power Annual Report 2025 · EGAT PPA Schedule v3.2 · IEAT Factory License No. สค.0204/2564

💡 ลองสังเกตน้ำหนักภาพ — h1 มีเส้นใต้สีส้มหนักแน่นสุด h2-h3 แบ่งโครงสร้างหลัก h4-h5 ใช้แบ่งรายละเอียดย่อย ส่วน h6 ใช้ mono font สำหรับข้อมูลอ้างอิงและ metadata

Thai + English Font Pairing — การจับคู่ฟอนต์ไทย–อังกฤษ​

การจับคู่ฟอนต์ไทยกับอังกฤษในเอกสาร/หน้าเว็บที่มีเนื้อหาสองภาษา เป็นสิ่งที่ต้องทำอย่างตั้งใจ — ฟอนต์ที่เลือกมาต้องมีน้ำหนักเส้น (stroke width) และสัดส่วน (x-height) ที่ใกล้เคียงกัน มิเช่นนั้นข้อความสองภาษาจะดู "ไม่ใช่ชุดเดียวกัน"

ด้านล่างคือสอง pairing ที่แนะนำในคู่มือแบรนด์ แสดงผลด้วยฟอนต์จริง:

Font Pairing Showcase
Noto Sans Thai + Source Serif ProDigital
Heading (Thai — Noto Sans Thai · Bold)

รายงานความยั่งยืน 2025 Sustainability Report

font-family: 'Noto Sans Thai' · weight: 700
Heading EN accent (Source Serif Pro · SemiBold)

Sustainability Report 2025

font-family: 'Source Serif Pro' · weight: 600
Body (Thai — Noto Sans Thai)

เป้าหมายของเราคือการเป็นผู้นำด้านพลังงานที่ยั่งยืน ผ่านการดำเนินงานที่โปร่งใสและตรวจสอบได้ในทุกขั้นตอน

font-family: 'Noto Sans Thai' · weight: 400
Sarabun + Source Serif Pro · Kanit + Open SansPrint / Formal
Heading (Thai — Sarabun · Bold)

รายงานความยั่งยืน 2025

font-family: 'Sarabun' · weight: 700
Heading (English — Source Serif Pro)

Sustainability Report 2025

font-family: 'Source Serif Pro' · weight: 700
Body (Thai — Kanit)

ด้วยบริษัท บี.กริม เพาเวอร์ จำกัด (มหาชน) ขอเรียนเชิญท่านเข้าร่วมพิธีลงนามสัญญาซื้อขายไฟฟ้า ณ ห้องประชุมชั้น 14 อาคาร ดร.เกอร์ฮาร์ด ลิงค์

font-family: 'Kanit' · weight: 400
Body (English — Open Sans)

Please find enclosed the signed PPA document for your review and records. Should you have any questions, do not hesitate to contact us.

font-family: 'Open Sans' · weight: 400

Pairing แรกใช้ในงานดิจิทัล — Noto Sans Thai คุมโทนไทย-อังกฤษให้สม่ำเสมอ Source Serif Pro ใช้ accent สำหรับหัวข้อ/quote อังกฤษที่น้ำหนัก semibold (600) · Pairing ที่สองใช้ในงานสิ่งพิมพ์/เอกสาร — Sarabun + Source Serif Pro สำหรับหัวข้อ Kanit + Open Sans สำหรับเนื้อความ · เอกสารทางการ (จดหมาย/สัญญา/letterhead) ใช้ Browallia New ทั้งฉบับแทน

Typography Playground — ลองปรับขนาดและน้ำหนักฟอนต์​

Typography Playground
12px34px72px
100300500700900

พลังงานที่ยั่งยืนเพื่อโลกที่ดีกว่า

Empowering the world compassionately

34px400Noto Sans Thai

เลื่อนแถบปรับขนาดและน้ำหนักฟอนต์ แล้วดูผลลัพธ์แบบทันทีบนตัวอย่างข้อความด้านบน — ลองเปลี่ยนฟอนต์เป็น Source Serif Pro แล้วสังเกตว่าข้อความภาษาไทยจะไม่เปลี่ยนตาม เพราะฟอนต์นั้นไม่มีตัวอักษรไทย