ตัวอักษร

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

ปรัชญาการออกแบบ

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

• Neusa Next Wide ได้รับแรงบันดาลใจจากการออกแบบตัวอักษรในยุคสำรวจอวกาศระยะแรก เพิ่มความเป็นมนุษย์และความแสดงออกให้กับหัวข้อและหัวข้อย่อย
• Proxima Nova นำความเปิดกว้างและสไตล์เรขาคณิตมาสู่ช่วงเวลาที่ต้องการความใช้งานสูง เช่น เนื้อหาหลักและข้อความอรรถประโยชน์

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

ตระกูลฟอนต์

Neusa Next Wide

บทบาท: หัวข้อ หัวข้อย่อย คำพูดเด่น CTA ป้ายกำกับ ตัวเลขสถิติ

ตัวอย่างใน Brand Center แสดงห้าสไตล์:

สไตล์	ค่าน้ำหนัก	CSS font-weight	CSS font-style
Light	300	300	normal
Regular	400	400	normal
Italic	400	400	italic
Medium	500	500	normal
Bold	700	700	normal

Proxima Nova

บทบาท: เนื้อหาหลัก ข้อความอรรถประโยชน์ หัวข้อส่วน องค์ประกอบ UI

ตัวอย่างใน Brand Center แสดงสี่สไตล์:

สไตล์	ค่าน้ำหนัก	CSS font-weight	CSS font-style
Regular	400	400	normal
Regular Italic	400	400	italic
Bold	700	700	normal
Bold Italic	700	700	italic

Proxima Nova มีการออกใบอนุญาตแยกต่างหากและ ไม่ได้ รวมอยู่ในการดาวน์โหลดฟอนต์จาก Brand Center ธีมมาพร้อมกับน้ำหนัก 400, 500, 600 และ 700 ในสไตล์ปกติ

ลำดับชั้นตัวอักษร

หลักการหลัก

• สร้างลำดับชั้นผ่าน ขนาดตัวอักษรที่ลดลง ร่วมกับการ สลับรูปแบบตัวพิมพ์
• ใช้ Neusa Wide Bold, ตัวพิมพ์ประโยค สำหรับหัวข้อแคมเปญและหัวข้อย่อย
• ตั้งค่าการนำหัวข้อเป็น 1.1 เท่าของขนาดตัวอักษร
• ใช้ Proxima Nova Bold, ตัวพิมพ์ใหญ่ทั้งหมด พร้อมระยะตัวอักษรสำหรับหัวข้อส่วน เพื่อสร้างความแตกต่างกับหัวข้อแบบตัวพิมพ์ประโยค
• การปิดท้ายและ CTA ใช้ Neusa Wide Bold พร้อม caret ชี้ขวา (›) สีแดง Cloud เพื่อบ่งบอกการกระทำในประสบการณ์ดิจิทัล

ตารางลำดับชั้น

องค์ประกอบ	ฟอนต์	น้ำหนัก	รูปแบบตัวพิมพ์	หมายเหตุ
หัวข้อหลัก	Neusa Wide	Bold (700)	ตัวพิมพ์ประโยค	การนำ = 1.1× ขนาดตัวอักษร
Eyebrow	Proxima Nova	Bold (700)	ตัวพิมพ์ใหญ่ทั้งหมด	เล็ก พร้อมระยะตัวอักษร
หัวข้อย่อย / บทนำ	Neusa Wide	Medium (500)	ตัวพิมพ์ประโยค	หรือ Proxima Nova หากตามด้วยเนื้อหาหลักทันที
หัวข้อส่วน	Proxima Nova	Bold (700)	ตัวพิมพ์ใหญ่ทั้งหมด	พร้อมระยะตัวอักษร
หัวข้อย่อยระดับสอง	Proxima Nova	Bold (700)	ตัวพิมพ์ประโยค
เนื้อหาหลัก	Proxima Nova	Regular (400)	ตัวพิมพ์ประโยค
หัวข้อย่อย	Proxima Nova	Regular (400)	ตัวพิมพ์ประโยค
คำพูดเด่น	Neusa Wide	Bold (700)	ตัวพิมพ์ประโยค	สีแดง Cloud; เครื่องหมายคำพูดสีแดงขนาดใหญ่พร้อมการระบุแหล่งที่มาด้านล่าง
การปิดท้าย / CTA	Neusa Wide	Bold (700)	ตัวพิมพ์ประโยค	พร้อม caret ชี้ขวา (›) สีแดง Cloud

การปรับแต่งเฉพาะทาง

บริบท	ฟอนต์	น้ำหนัก	ขนาด/การนำ	หมายเหตุ
คำพูดเด่นในสื่อสิ่งพิมพ์	Neusa Wide	Bold (700)	9pt / 14pt	ตัวพิมพ์ประโยค
คำพูดเด่นใน eBook	Neusa Wide	Regular (400)	16pt / 19pt	พร้อมเส้นด้านบน
ตัวเลข/ข้อมูลเด่นในอินโฟกราฟิก	Neusa Wide	Light (300)	—	สำหรับผลกระทบทางภาพที่ขนาดใหญ่
ตัวเลขในแผนภูมิ/แท่ง	Neusa Wide	Regular (400)	—	ป้ายกำกับแผนภูมิมาตรฐาน

การใช้ตัวพิมพ์ใหญ่ทุกคำ (Title Case)

การใช้ตัวพิมพ์ใหญ่ทุกคำอาจใช้สำหรับ:

• หัวข้อย่อย
• คำพูดเด่น
• ตัวเลขสถิติ
• ป้ายกำกับ

องค์ประกอบอื่น ๆ ทั้งหมดใช้รูปแบบตัวพิมพ์ประโยคเป็นค่าเริ่มต้น

ตัวอย่างสด

หัวข้อ

หัวข้อระดับ 2

หัวข้อระดับ 3

หัวข้อระดับ 4

หัวข้อระดับ 5

หัวข้อระดับ 6

รูปแบบข้อความ

นี่คือ ข้อความตัวหนา สำหรับการเน้น

นี่คือ ข้อความตัวเอียง สำหรับการเน้นที่ละเอียดอ่อน

นี่คือ ข้อความขีดฆ่า สำหรับเนื้อหาที่เลิกใช้แล้ว

นี่คือ โค้ดแบบอินไลน์ สำหรับการอ้างอิงทางเทคนิค

นี่คือ ข้อความตัวหนาตัวเอียง สำหรับการเน้นอย่างเข้มแข็ง

นี่คือการรวมกัน: ตัวหนาพร้อม โค้ดแบบอินไลน์ ข้างใน และ ตัวเอียงพร้อม โค้ด ข้างใน

รายการแบบมีลำดับ

1. รายการแรกในรายการแบบมีลำดับ
2. รายการที่สองพร้อม ข้อความตัวหนา
3. รายการที่สามพร้อม โค้ดแบบอินไลน์
4. รายการที่สี่พร้อม ลิงก์ไปยัง Astro

รายการแบบไม่มีลำดับ

• หัวข้อย่อยแรก
• หัวข้อย่อยที่สองพร้อม การเน้น
• หัวข้อย่อยที่สามพร้อม การอ้างอิงโค้ด
• หัวข้อย่อยที่สี่พร้อม ลิงก์

รายการแบบซ้อน

1. รายการมีลำดับระดับบนสุด
   • รายการไม่มีลำดับซ้อน A
   • รายการไม่มีลำดับซ้อน B
     1. รายการมีลำดับซ้อนลึก
     2. รายการซ้อนลึกอีกรายการ
   • กลับไปยังระดับซ้อนแรก
2. รายการมีลำดับระดับบนสุดที่สอง
   • รายการซ้อนอีกรายการ

การยกคำพูด

นี่คือการยกคำพูดบรรทัดเดียว

นี่คือการยกคำพูดหลายบรรทัด

มีหลายย่อหน้าและสามารถมีการจัดรูปแบบ ตัวหนา ตัวเอียง และ โค้ด

การยกคำพูดซ้อน:

นี่คือการยกคำพูดซ้อนอยู่ในอันด้านนอก

สามารถมีการจัดรูปแบบของตัวเองได้

เส้นแนวนอน

เนื้อหาเหนือเส้น

---

เนื้อหาใต้เส้น

ลิงก์

• ลิงก์ภายใน: กลับไปยังภาพรวมเอกสาร
• ลิงก์ภายนอก: เอกสาร Starlight
• ลิงก์พร้อมชื่อเรื่อง: Astro

เชิงอรรถ

นี่คือประโยคพร้อมการอ้างอิงเชิงอรรถ¹

และอีกประโยคพร้อมเชิงอรรถที่แตกต่างกัน²

ไฟล์ฟอนต์

ธีมมาพร้อมกับ ไฟล์ woff2 จำนวน 10 ไฟล์ ในไดเรกทอรี fonts/:

Neusa Next Pro Wide

ไฟล์	น้ำหนัก	สไตล์	ขนาด
neusaNextProWide-300.woff2	300 (Light)	ปกติ	~49 KB
neusaNextProWide-400.woff2	400 (Regular)	ปกติ	~49 KB
neusaNextProWide-400i.woff2	400 (Regular)	ตัวเอียง	~49 KB
neusaNextProWide-500.woff2	500 (Medium)	ปกติ	~49 KB
neusaNextProWide-700.woff2	700 (Bold)	ปกติ	~49 KB
neusaNextProWide-700i.woff2	700 (Bold)	ตัวเอียง	~49 KB

Proxima Nova

ไฟล์	น้ำหนัก	สไตล์	ขนาด
proximaNova-400.woff2	400 (Regular)	ปกติ	~18 KB
proximaNova-500.woff2	500 (Medium)	ปกติ	~18 KB
proximaNova-600.woff2	600 (Semi-Bold)	ปกติ	~18 KB
proximaNova-700.woff2	700 (Bold)	ปกติ	~18 KB

รูปแบบการตั้งชื่อ

ไฟล์ฟอนต์ใช้รูปแบบ familyName-weight.woff2 โดยมีคำต่อท้าย i สำหรับตัวแปรตัวเอียง (เช่น neusaNextProWide-400i.woff2)

ช่องว่างที่ขาดหายไป

ตัวแปรตัวเอียงต่อไปนี้ยังไม่มีในธีม:

ตัวแปรที่ขาดหาย	สาเหตุ
Proxima Nova 400 italic	ไฟล์ต้นฉบับไม่มีในการดาวน์โหลดปัจจุบัน
Proxima Nova 500 italic	ไฟล์ต้นฉบับไม่มีในการดาวน์โหลดปัจจุบัน
Proxima Nova 600 italic (Semi-Bold)	ไฟล์ต้นฉบับไม่มี
Proxima Nova 700 italic (Bold)	ไฟล์ต้นฉบับไม่มี

หากต้องการเพิ่มตัวแปรตัวเอียงของ Proxima Nova ให้รับไฟล์ woff2 ของแท้จากแหล่งที่ได้รับอนุญาต ตั้งชื่อตามรูปแบบ (เช่น proximaNova-400i.woff2) และเพิ่มกฎ @font-face ที่สอดคล้องกันใน font-face.css

การประกาศ @font-face

การลงทะเบียนฟอนต์ทั้งหมดอยู่ใน fonts/font-face.css แต่ละการประกาศใช้:

• font-display: swap — ข้อความแสดงผลทันทีด้วยฟอนต์สำรอง จากนั้นสลับเมื่อฟอนต์กำหนดเองโหลดเสร็จ
• format("woff2") — รูปแบบการบีบอัดสมัยใหม่ที่รองรับโดยเบราว์เซอร์ปัจจุบันทั้งหมด
• URL แบบสัมพัทธ์ — เส้นทาง ./ แก้ไขสัมพัทธ์กับตำแหน่งไฟล์ CSS

หากต้องการเพิ่มตัวแปรฟอนต์ใหม่ ให้ต่อท้ายบล็อก @font-face ใน font-face.css:

@font-face {
  font-family: "familyName";
  font-weight: 400;
  font-style: italic;  /* or normal */
  font-display: swap;
  src: url("./familyName-400i.woff2") format("woff2");
}

การรวม CSS

ปลั๊กอินธีม (index.ts) ฉีดไฟล์ CSS ทั้งสองผ่าน hook config:setup:

index.ts → fonts/font-face.css → styles/custom.css → Starlight renders

การกำหนดฟอนต์

ใน styles/custom.css:

:root {
  --sl-font: "proximaNova", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "neusaNextProWide", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}

• --sl-font (ตัวแปรฟอนต์เนื้อหาของ Starlight) → Proxima Nova สำหรับข้อความเนื้อหาและ UI
• --sl-font-heading (โทเค็นกำหนดเอง) → Neusa Next Pro Wide สำหรับการอ้างอิงฟอนต์หัวข้อ
• h1–h6 → ใช้ฟอนต์แฟมิลี น้ำหนัก และรูปแบบตัวพิมพ์ตามลำดับชั้นตัวอักษร Cloud
• สแต็กสำรอง: system-ui, "Segoe UI", Helvetica, Arial, sans-serif สำหรับการแสดงผลเริ่มต้นที่รวดเร็วก่อนที่ฟอนต์กำหนดเองจะโหลด

โทเค็นตัวอักษรของ Starlight

ธีมแทนที่คุณสมบัติกำหนดเอง CSS ของ Starlight เหล่านี้:

โทเค็น	ค่า	วัตถุประสงค์
--sl-font	"proximaNova", ...	ข้อความเนื้อหา องค์ประกอบ UI
--sl-font-heading	"neusaNextProWide", ...	โทเค็นกำหนดเองสำหรับฟอนต์หัวข้อ
--sl-line-height-headings	1.1	การนำหัวข้อแบรนด์ Cloud
--sl-text-h1	var(--sl-text-5xl)	หัวข้อขนาด 2.625rem
--sl-text-h2	var(--sl-text-3xl)	หัวข้อย่อยขนาด 1.8125rem
--sl-text-h3	var(--sl-text-2xl)	บทนำส่วนขนาด 1.5rem
--sl-text-h4	var(--sl-text-lg)	หัวข้อย่อยส่วนขนาด 1.125rem

การแมปลำดับชั้นหัวข้อ

HTML	ฟอนต์แฟมิลี	น้ำหนัก	รูปแบบตัวพิมพ์	บทบาทในแบรนด์
h1	Neusa Next Wide	700 (Bold)	ตัวพิมพ์ประโยค	หัวข้อหลัก
h2	Neusa Next Wide	700 (Bold)	ตัวพิมพ์ประโยค	หัวข้อย่อย
h3	Neusa Next Wide	500 (Medium)	ตัวพิมพ์ประโยค	บทนำ / หัวข้อย่อยระดับสอง
h4	Proxima Nova	700 (Bold)	ตัวพิมพ์ใหญ่ทั้งหมด	หัวข้อส่วน
h5	Proxima Nova	700 (Bold)	ตัวพิมพ์ใหญ่ทั้งหมด	หัวข้อส่วนย่อย
h6	Proxima Nova	700 (Bold)	ตัวพิมพ์ใหญ่ทั้งหมด	หัวข้อส่วนรอง

การเปลี่ยนฟอนต์

หากต้องการใช้ตระกูลฟอนต์ที่แตกต่างออกไป:

1. เพิ่มไฟล์ woff2 ไปยัง fonts/ โดยใช้รูปแบบการตั้งชื่อ familyName-weight.woff2 (เพิ่มคำต่อท้าย i สำหรับตัวเอียง)
2. อัปเดต fonts/font-face.css ด้วยกฎ @font-face ใหม่ที่ตรงกับชื่อไฟล์ น้ำหนัก และสไตล์ของคุณ
3. อัปเดต styles/custom.css เพื่อตั้งค่า --sl-font และ font-family ของหัวข้อเป็นชื่อตระกูลใหม่ของคุณ
4. คงสแต็กสำรอง (system-ui, "Segoe UI", Helvetica, Arial, sans-serif) ไว้สำหรับการแสดงผลเริ่มต้นที่รวดเร็ว

การตรวจสอบธีม

• H2 และ H3 ใช้ฟอนต์แฟมิลี neusaNextProWide ด้วยน้ำหนัก 700/500
• H4, H5, H6 ใช้ฟอนต์ proximaNova ตัวพิมพ์ใหญ่ทั้งหมด พร้อมระยะตัวอักษร 0.05em
• สีลิงก์เน้นเป็น #f06680 ในโหมดมืด และ #e4002b ในโหมดสว่าง
• โค้ดแบบอินไลน์มีพื้นหลังสีอ่อนจาก --sl-color-gray-5
• เส้นขอบซ้ายของการยกคำพูดมองเห็นได้ในทั้งสองธีม
• การอ้างอิงเชิงอรรถเป็นตัวยกและเชื่อมโยง
• เส้นแนวนอนมีความคมชัดที่เหมาะสม

Footnotes

1. นี่คือเนื้อหาเชิงอรรถแรก ปรากฏที่ด้านล่างของหน้า ↩

2. นี่คือเชิงอรรถที่สอง สามารถมี การจัดรูปแบบ และ โค้ด ↩