Những thuộc tính nào điều khiển text và font?

Question

Accepted Answer

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.

```css
.text {
  font-family: "Inter", system-ui, sans-serif; /* kèm fallback */
  font-size: 1rem;       /* kích thước (dùng rem cho accessibility) */
  font-weight: 600;      /* 100–900; 400 normal, 700 bold */
  font-style: italic;    /* normal | italic */
  line-height: 1.5;      /* khoảng cách giữa các dòng — không đơn vị là tốt nhất */
  letter-spacing: 0.02em;/* tracking giữa các ký tự */
}
```

## font-family fallback stack

```css
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).

## Các thuộc tính layout text

```css
.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: dùng giá trị không đơn vị

```css
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ị.

## Cắt ngắn text (một nhu cầu thường gặp)

```css
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* hiện "..." khi text bị cắt */
}
```

## Tại sao điều này quan trọng

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.