การพิมพ์ถูกควบคุมโดยตระกูลของคุณสมบัติ font-* และ text-* การได้มันให้ถูกต้องเป็นส่วนใหญ่ของสิ่งที่ทำให้หน้าดูเรียบร้อยและอ่านได้
{
: , system-ui, sans-serif;
: ;
: ;
: italic;
: ;
: ;
}
font-family: "Inter", system-ui, -apple-system, sans-serif;
เบราว์เซอร์พยายามใช้แต่ละแบบอักษรตามลำดับจนกว่าแบบอักษรหนึ่งจะพร้อมใช้ได้ จบด้วย generic family (sans-serif, serif, monospace) เสมอเพื่อให้ข้อความแสดงผลแม้ว่าแบบอักษรที่กำหนดเองจะล้มเหลว system-ui ใช้แบบอักษรเจาะจงของระบบปฏิบัติการ (เร็ว ไม่มีการดาวน์โหลด)
.text {
text-align: center; /* left | right | center | justify */
text-decoration: underline;/* underline | line-through | none */
text-transform: uppercase; /* UPPERCASE | lowercase | Capitalize */
white-space: nowrap; /* prevent wrapping */
word-break: break-word; /* break long words/URLs */
}
line-height: 1.5; /* ✅ 1.5 × the element's font-size — scales correctly */
line-height: 24px; /* ⚠️ fixed — doesn't adapt if font-size changes */
line-height ที่ไม่มีหน่วย คูณขนาดแบบอักษรของแต่ละองค์ประกอบของมันเอง ดังนั้นมันจึงยังคงเป็นสัดส่วนเมื่อองค์ประกอบที่ซ้อนกันมีขนาดต่างกัน — วิธีที่แนะนำ
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* shows "..." when text is cut off */
}
คุณสมบัติข้อความขับเคลื่อนความสามารถในการอ่านและลำดับชั้นของภาพ — font-size/weight เพื่อเน้น line-height (~1.5) สำหรับการอ่านที่สบาย fallback stacks เพื่อความน่าเชื่อถือ และ text-overflow เพื่อการตัดที่ชัดเจน
การพิมพ์ที่ดีเป็นส่วนสำหัญของ UI ที่ดูดี