แม่แบบตัวอักษร

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

หัวข้อ

รูปแบบหัวข้อสำหรับชื่อหน้า หัวข้อส่วน และลำดับชั้นเนื้อหา

ชื่อคลาส	คำอธิบาย	ขนาดตัวอักษร	ความสูงบรรทัด	ระยะห่างตัวอักษร	น้ำหนักตัวอักษร	ตัวอย่าง
.spr-heading-xl	หัวข้อขนาดใหญ่พิเศษ	spr-font-size-900	spr-line-height-1000	spr-letter-spacing-densest	spr-font-medium	หัวข้อ XL
.spr-heading-lg	หัวข้อขนาดใหญ่	spr-font-size-800	spr-line-height-900	spr-letter-spacing-denser	spr-font-medium	หัวข้อใหญ่
.spr-heading-md	หัวข้อขนาดกลาง	spr-font-size-700	spr-line-height-800	spr-letter-spacing-denser	spr-font-medium	หัวข้อกลาง
.spr-heading-sm	หัวข้อขนาดเล็ก	spr-font-size-600	spr-line-height-700	spr-letter-spacing-dense	spr-font-medium	หัวข้อเล็ก
.spr-heading-xs	หัวข้อขนาดเล็กพิเศษ	spr-font-size-500	spr-line-height-600	spr-letter-spacing-dense	spr-font-medium	หัวข้อ XS

หัวข้อย่อย

รูปแบบหัวข้อย่อยสำหรับการแบ่งส่วนและการจัดระเบียบเนื้อหา

ชื่อคลาส	คำอธิบาย	ขนาดตัวอักษร	ความสูงบรรทัด	ระยะห่างตัวอักษร	น้ำหนักตัวอักษร	ตัวอย่าง
.spr-subheading-sm	หัวข้อย่อยเล็ก	spr-font-size-400	spr-line-height-500	spr-letter-spacing-dense	spr-font-medium	หัวข้อย่อยเล็ก
.spr-subheading-xs	หัวข้อย่อยเล็กพิเศษ	spr-font-size-300	spr-line-height-400	spr-letter-spacing-normal	spr-font-medium	หัวข้อย่อย XS

ข้อความเนื้อหา

รูปแบบข้อความเนื้อหาสำหรับย่อหน้า คำอธิบาย และเนื้อหาทั่วไป

คลาสข้อความเนื้อหาพื้นฐาน

ชื่อคลาส	คำอธิบาย	ขนาดตัวอักษร	ความสูงบรรทัด	ตัวอย่าง
.spr-body-lg	ข้อความเนื้อหาใหญ่ฐาน	spr-font-size-400	spr-line-height-600	ข้อความเนื้อหาใหญ่
.spr-body-md	ข้อความเนื้อหากลางฐาน	spr-font-size-300	spr-line-height-500	ข้อความเนื้อหากลาง
.spr-body-sm	ข้อความเนื้อหาเล็กฐาน	spr-font-size-200	spr-line-height-400	ข้อความเนื้อหาเล็ก
.spr-body-xs	ข้อความเนื้อหาเล็กพิเศษฐาน	spr-font-size-100	spr-line-height-300	ข้อความเนื้อหาเล็กพิเศษ

ข้อความเนื้อหาพร้อมรูปแบบน้ำหนักตัวอักษร

ข้อความเนื้อหาใหญ่

ชื่อคลาส	น้ำหนักตัวอักษร	การตกแต่ง	ตัวอย่าง
.spr-body-lg-regular	ปกติ	-	ข้อความใหญ่ปกติ
.spr-body-lg-regular-underline	ปกติ	ขีดเส้นใต้	ข้อความใหญ่ปกติขีดเส้นใต้
.spr-body-lg-regular-medium	กลาง	-	ข้อความใหญ่น้ำหนักกลาง
.spr-body-lg-medium-underline	กลาง	ขีดเส้นใต้	ข้อความใหญ่กลางขีดเส้นใต้

ข้อความเนื้อหากลาง

ชื่อคลาส	น้ำหนักตัวอักษร	การตกแต่ง	ตัวอย่าง
.spr-body-md-regular	ปกติ	-	ข้อความกลางปกติ
.spr-body-md-regular-underline	ปกติ	ขีดเส้นใต้	ข้อความกลางปกติขีดเส้นใต้
.spr-body-md-regular-medium	กลาง	-	ข้อความกลางน้ำหนักกลาง
.spr-body-md-medium-underline	กลาง	ขีดเส้นใต้	ข้อความกลางกลางขีดเส้นใต้

ข้อความเนื้อหาเล็ก

ชื่อคลาส	น้ำหนักตัวอักษร	การตกแต่ง	ตัวอย่าง
.spr-body-sm-regular	ปกติ	-	ข้อความเล็กปกติ
.spr-body-sm-regular-underline	ปกติ	ขีดเส้นใต้	ข้อความเล็กปกติขีดเส้นใต้
.spr-body-sm-regular-medium	กลาง	-	ข้อความเล็กน้ำหนักกลาง
.spr-body-sm-medium-underline	กลาง	ขีดเส้นใต้	ข้อความเล็กกลางขีดเส้นใต้

ข้อความเนื้อหาเล็กพิเศษ

ชื่อคลาส	น้ำหนักตัวอักษร	การตกแต่ง	ตัวอย่าง
.spr-body-xs-regular	ปกติ	-	ข้อความเล็กพิเศษปกติ
.spr-body-xs-regular-underline	ปกติ	ขีดเส้นใต้	ข้อความเล็กพิเศษปกติขีดเส้นใต้
.spr-body-xs-regular-medium	กลาง	-	ข้อความเล็กพิเศษน้ำหนักกลาง
.spr-body-xs-medium-underline	กลาง	ขีดเส้นใต้	ข้อความเล็กพิเศษกลางขีดเส้นใต้

ป้ายกำกับ

รูปแบบป้ายกำกับสำหรับช่องป้อนข้อมูลฟอร์ม ส่วนประกอบ UI และองค์ประกอบข้อความเล็ก

คลาสป้ายกำกับพื้นฐาน

ชื่อคลาส	คำอธิบาย	ขนาดตัวอักษร	ความสูงบรรทัด	ระยะห่างตัวอักษร	ตัวอย่าง
.spr-label-sm	ป้ายกำกับเล็กฐาน	spr-font-size-200	spr-line-height-200	spr-letter-spacing-wide	ป้ายกำกับเล็ก
.spr-label-xs	ป้ายกำกับเล็กพิเศษฐาน	spr-font-size-100	spr-line-height-100	spr-letter-spacing-wide	ป้ายกำกับ XS

รูปแบบน้ำหนักตัวอักษรป้ายกำกับ

ป้ายกำกับเล็ก

ชื่อคลาส	น้ำหนักตัวอักษร	ตัวอย่าง
.spr-label-sm-regular	ปกติ	ป้ายกำกับเล็กปกติ
.spr-label-sm-medium	กลาง	ป้ายกำกับเล็กกลาง

ป้ายกำกับเล็กพิเศษ

ชื่อคลาส	น้ำหนักตัวอักษร	ตัวอย่าง
.spr-label-xs-regular	ปกติ	ป้ายกำกับ XS ปกติ
.spr-label-xs-medium	กลาง	ป้ายกำกับ XS กลาง

ตัวอย่าง

<!-- ลำดับชั้นหน้า -->
<h1 class="spr-heading-xl spr-text-color-strong">หัวข้อหลักของหน้า</h1>
<h2 class="spr-heading-lg spr-text-color-base">หัวข้อส่วน</h2>
<h3 class="spr-subheading-sm spr-text-color-supporting">หัวข้อย่อย</h3>

<!-- บล็อกเนื้อหา -->
<p class="spr-body-lg-regular spr-text-color-base">นี่คือย่อหน้าเนื้อหาหลักที่มีข้อความใหญ่ขึ้นเพื่อให้อ่านง่ายขึ้น</p>

<p class="spr-body-md-regular spr-text-color-base">นี่คือข้อความเนื้อหามาตรฐานสำหรับเนื้อหาส่วนใหญ่</p>

<p class="spr-body-sm-regular spr-text-color-weak">นี่คือข้อความเล็กสำหรับข้อมูลรองหรือคำบรรยาย</p>

<!-- ป้ายกำกับฟอร์ม -->
<label class="spr-label-sm-medium spr-text-color-strong">ป้ายกำกับฟิลด์ฟอร์ม</label>
<input type="text" class="spr-body-md-regular" />

<!-- องค์ประกอบโต้ตอบ -->
<a href="#" class="spr-body-md-regular-medium spr-text-color-brand-base hover:spr-text-color-brand-hover">
  ลิงก์ที่มีน้ำหนักกลาง
</a>

<a href="#" class="spr-body-md-regular-underline spr-text-color-brand-base"> ลิงก์ขีดเส้นใต้ </a>

<!-- ข้อความสถานะ -->
<div class="spr-body-sm-regular spr-text-color-success-base">ข้อความสำเร็จในข้อความเล็ก</div>

<div class="spr-body-xs-regular spr-text-color-danger-base">คำบรรยายข้อผิดพลาดหรือข้อความเตือนเล็ก</div>

แนวทางปฏิบัติที่ดี

• ใช้ลำดับชั้นที่มีความหมาย: เริ่มต้นด้วย spr-heading-xl สำหรับหัวข้อหลักและทำงานลงไป
• รักษาความสม่ำเสมอ: ใช้รูปแบบข้อความเดียวกันสำหรับประเภทเนื้อหาที่คล้ายกัน
• ผสมผสานกับยูทิลิตี้สี: จับคู่คลาสตัวอักษรกับสีข้อความที่มีความหมาย
• พิจารณาการเข้าถึง: ตรวจสอบให้แน่ใจว่ามีความคมชัดเพียงพอระหว่างข้อความและสีพื้นหลัง
• การตอบสนองมือถือ: พิจารณาขนาดที่เล็กลงในอุปกรณ์มือถือ