# Kiểu chữ

Hai font: Geist cho chữ trên giao diện và gợi ý phím Kbd, JetBrains Mono cho code, ID và số trong bảng. Chữ nội dung cỡ 14px, và cả thang chữ được chỉnh quanh cỡ này.

## Font

Geist là font của giao diện, gồm cả gợi ý phím Kbd. JetBrains Mono dùng cho code, ID và số trong bảng.

| Dùng cho | Chuỗi font | Token |
| --- | --- | --- |
| Giao diện | Geist, ui-sans-serif, system-ui, sans-serif | `font-family-sans` |
| Code | 'JetBrains Mono', ui-monospace, monospace | `font-family-mono` |

Quá nhiều khoảng trắng làm chữ khó đọc. 0123456789

Cả hai dùng giấy phép SIL Open Font License 1.1.

## Vai trò chữ

Một vai trò đặt cỡ chữ, độ đậm và khoảng cách dòng cùng lúc. Dùng vai trò cho tiêu đề và đoạn văn, đừng ghép cỡ chữ của vai trò này với độ đậm của vai trò khác.

Tiêu đề 1
Tiêu đề 2
Tiêu đề 3
Đoạn văn cỡ 14px, dùng cho văn bản và ô trong bảng.

| Vai trò | Cỡ chữ | Độ đậm | Khoảng cách dòng |
| --- | --- | --- | --- |
| `heading-1` | 32px | 500 | 40px |
| `heading-2` | 24px | 500 | 32px |
| `heading-3` | 20px | 500 | 28px |
| `body` | 14px | 400 | 20px |

## Cỡ chữ trên giao diện

Các cặp cỡ chữ/chiều cao dòng là 12/16, 14/20, 16/24, 18/28 và 20/28px. Mỗi cỡ `text-*` dùng token `line-height-*` tương ứng. Đoạn văn giữ 14/20px.

| Token | Cỡ chữ | Chiều cao dòng | Dùng cho |
| --- | --- | --- | --- |
| `font-size-xs` | 12px | 16px | Badge, token, chú thích và mốc thời gian. |
| `font-size-sm` | 14px | 20px | Đoạn văn, ô trong bảng, mô tả, gợi ý, lỗi và control `sm`, `md`, `lg`. |
| `font-size-md` | 16px | 24px | Tiêu đề và control `xl`. |
| `font-size-lg` | 18px | 28px | Chữ giao diện lớn hơn. |
| `font-size-xl` | 20px | 28px | Tiêu đề lớn hơn. |
| `font-size-input` | 14px | 20px | Input, select và textarea. Cỡ 16px trên màn hình cảm ứng, để iOS Safari không phóng to trang khi focus. |

## Quy tắc

Bốn luật lấy từ design skill, mỗi luật có một cách nên viết và một cách nên tránh.

### Tiêu đề viết hoa kiểu câu

Chỉ viết hoa từ đầu tiên và danh từ riêng. Tên sản phẩm và tên tính năng giữ cách viết mà chủ của chúng dùng. Title Case và `uppercase` khiến tiêu đề đọc chậm hơn và to hơn nội dung bên dưới.

```tsx
// Do
<h2 className="text-heading-3">Billing history</h2>
// Avoid
<h2 className="text-heading-3">Billing History</h2>
<h2 className="text-heading-3 uppercase">Billing history</h2>
```

### Không đổi khoảng cách chữ

Không dùng class `tracking-*` và không dùng `letter-spacing` trong CSS. Geist và JetBrains Mono đã được giãn đúng cho các cỡ trong thang; siết hoặc nới chúng là cách UI được sinh ra bắt đầu trông như do máy sinh.

```tsx
// Do
<span className="text-xs font-medium text-text-secondary">Last 30 days</span>
// Avoid
<span className="text-xs font-medium tracking-wide uppercase text-text-secondary">Last 30 days</span>
```

### Không dùng bold

Thang có regular (400), medium (500) và semibold (600). Không có 700, và `font-bold` không có tác dụng trong một dự án Werewolf.

- Tiêu đề: độ đậm đi theo vai trò (`text-heading-1` đến `-3` đã đặt sẵn). Đừng thêm class độ đậm lên trên.
- Nhấn trong chữ, nhãn, chữ trên nút: `font-medium`.
- `font-semibold` chỉ khi medium không tách được một nhãn khỏi chữ medium ngay cạnh nó.

```tsx
// Do
<p className="text-body">Payment failed. <span className="font-medium">Update your card</span> to keep access.</p>
// Avoid
<p className="text-body">Payment failed. <b>Update your card</b> to keep access.</p>
```

### Code trong dòng là 0.9em

Chữ mono nằm trong một câu sans trông to hơn các từ xung quanh khi cùng một cỡ. Dùng `code-inline`: nó đặt font mono ở `0.9em`, nên nó theo đúng cỡ của câu.

```tsx
// Do
<p className="text-body">Run <code className="code-inline">npm run build</code> again.</p>
// Avoid
<p className="text-body">Run <code className="font-mono">npm run build</code> again.</p>
```