ตัวอักษร
เราได้สร้างแบบแผนตัวอักษรเพื่อให้มั่นใจถึงการนำเสนอที่สอดคล้องและเหมาะสมในทุกแพลตฟอร์ม ตัวเลือกเหล่านี้สะท้อนถึงเอกลักษณ์ภาพและหลักการออกแบบที่ชี้นำ UI/UX ของเรา เพื่อให้มั่นใจถึงความชัดเจนและความง่ายในการอ่าน
ครอบครัวตัวอักษร
ครอบครัวตัวอักษรกำหนดตัวอักษรหลักที่ใช้ในการออกแบบผลิตภัณฑ์ของเรา การใช้ครอบครัวตัวอักษรอย่างสม่ำเสมอในทุกแพลตฟอร์มจะรักษาความสอดคล้องของแบรนด์และความสามารถในการอ่าน ครอบครัวตัวอักษรต่อไปนี้ใช้ในระบบตัวอักษรของเรา:
| ครอบครัวตัวอักษร | คลาส | ตัวอย่างข้อความ |
|---|---|---|
| Rubik | spr-font-main | นี่คือข้อความตัวอย่าง |
| Roboto | spr-font-inbound | นี่คือข้อความตัวอย่าง |
| Roboto Mono | spr-font-code | นี่คือข้อความตัวอย่าง |
Rubik
- เป็นตัวอักษรหลักที่ใช้สำหรับข้อความ UI ทั่วไป มีการออกแบบที่ทันสมัยและโค้งมนเพื่อให้มั่นใจถึงความชัดเจนและความสามารถในการอ่านที่ราบรื่น
Roboto
- ใช้โดยเฉพาะสำหรับผลิตภัณฑ์ขาเข้าจาก SAIL
Roboto Mono
- ใช้สำหรับบล็อกโค้ดและเนื้อหาทางเทคนิคเพื่อแยกความแตกต่างอย่างชัดเจนจากข้อความเนื้อหา
ขนาดตัวอักษร
ขนาดตัวอักษรกำหนดลำดับชั้นของการพิมพ์ เพื่อให้มั่นใจว่าข้อมูลนำเสนออย่างชัดเจน อ่านง่าย และน่าดึงดูด ขนาดตัวอักษรต่อไปนี้กำหนดไว้สำหรับการใช้งานทั่วทั้งแอปพลิเคชัน:
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
น้ำหนักตัวอักษร
น้ำหนักตัวอักษรควบคุมความหนาของตัวอักษร ช่วยสร้างความแตกต่างและเน้นทางภาพ ต่อไปนี้คือวิธีการใช้น้ำหนักตัวอักษรต่างๆ:
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
นี่คือข้อความตัวอย่าง
ความสูงของบรรทัด
ความสูงของบรรทัด (หรือ leading) คือพื้นที่แนวตั้งระหว่างบรรทัดของข้อความ ความสูงของบรรทัดที่เหมาะสมจะช่วยปรับปรุงความสามารถในการอ่าน โดยเฉพาะสำหรับเนื้อหาที่มีขนาดใหญ่ เรากำหนดความสูงของบรรทัดดังต่อไปนี้:
| ความสูงของบรรทัด | คลาส |
|---|---|
| 12px | spr-line-height-100 |
| 14px | spr-line-height-200 |
| 16px | spr-line-height-300 |
| 20px | spr-line-height-400 |
| 24px | spr-line-height-500 |
| 32px | spr-line-height-600 |
| 36px | spr-line-height-700 |
| 40px | spr-line-height-800 |
| 48px | spr-line-height-900 |
| 60px | spr-line-height-1000 |
ระยะห่างตัวอักษร
ระยะห่างตัวอักษรส่งผลต่อพื้นที่แนวนอนระหว่างตัวอักษร ระยะห่างที่เหมาะสมสามารถปรับปรุงความสามารถในการอ่านและ สุนทรียภาพโดยรวมของข้อความ ค่าการเว้นระยะห่างตัวอักษรต่อไปนี้กำหนดไว้:
| ระยะห่างตัวอักษร | คลาส |
|---|---|
| -1.3px | spr-letter-spacing-densest |
| -1px | spr-letter-spacing-denser |
| -0.7px | spr-letter-spacing-dense |
| 0px | spr-letter-spacing-normal |
| 0.7px | spr-letter-spacing-wide |
| 1px | spr-letter-spacing-wider |
| 1.3px | spr-letter-spacing-widest |