Typography được điều khiển bởi một họ các thuộc tính font-* và text-*. Làm chúng đúng là phần lớn những gì khiến một trang trông chỉn chu và dễ đọc.
{
: , system-ui, sans-serif;
: ;
: ;
: italic;
: ;
: ;
}
font-family: "Inter", system-ui, -apple-system, sans-serif;
Trình duyệt thử từng font theo thứ tự cho đến khi có một font khả dụng. Luôn kết thúc bằng một generic family (sans-serif, serif, monospace) để text vẫn render được kể cả khi font tùy chỉnh thất bại. system-ui dùng font gốc của hệ điều hành (nhanh, không cần tải).
.text {
text-align: center; /* left | right | center | justify */
text-decoration: underline;/* underline | line-through | none */
text-transform: uppercase; /* UPPERCASE | lowercase | Capitalize */
white-space: nowrap; /* ngăn xuống dòng */
word-break: break-word; /* ngắt từ/URL dài */
}
line-height: 1.5; /* ✅ 1.5 × font-size của phần tử — co giãn đúng */
line-height: 24px; /* ⚠️ cố định — không thích ứng nếu font-size thay đổi */
Một line-height không đơn vị nhân với chính font-size của mỗi phần tử, nên nó giữ tỷ lệ khi các phần tử lồng nhau có kích thước khác nhau — cách tiếp cận được khuyến nghị.
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* hiện "..." khi text bị cắt */
}
Các thuộc tính text quyết định tính dễ đọc và phân cấp thị giác — font-size/weight để nhấn mạnh, line-height (~1.5) để đọc thoải mái, fallback stack cho độ tin cậy, và text-overflow để cắt ngắn gọn gàng.
Typography tốt là phần lớn của một UI đẹp.