# Kiểu chữ

Hai font: Geist cho chữ trên giao diện, JetBrains Mono cho code, ID, phím tắt 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. JetBrains Mono dùng cho code, ID, phím tắt 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 | 1.2 |
| `heading-2` | 24px | 500 | 1.25 |
| `heading-3` | 18px | 500 | 1.3 |
| `body` | 14px | 400 | 1.5 |

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

Chữ nhỏ trên giao diện dùng các bậc `font-size-*`, để nhãn và chú thích nằm cùng một thang với các vai trò.

| Token | Cỡ chữ | Dùng cho |
| --- | --- | --- |
| `font-size-xs` | 12px | Badge, token, chú thích và mốc thời gian. |
| `font-size-sm` | 13px | Chữ phụ cạnh dòng chính: mô tả, chữ gợi ý và chữ báo lỗi, và control `sm`. |
| `font-size-md` | 14px | Đoạn văn, giá trị trong input, ô trong bảng, và control mặc định (`md`) và `lg`. |
| `font-size-lg` | 16px | Tiêu đề và control `xl`. |
| `font-size-xl` | 18px | Tiêu đề lớn hơn. |
| `font-size-input` | 14px | 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.

### Headings use sentence case

Capitalize only the first word and proper nouns. Product and feature names keep the casing their owner uses. Title Case and `uppercase` make headings slower to read and louder than the content under them.

```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>
```

### Never change letter spacing

No `tracking-*` classes and no `letter-spacing` in CSS. Geist and JetBrains Mono are already spaced for the sizes in the scale; tightening or loosening them is how generated UI starts to look generated.

```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>
```

### No bold

The scale has regular (400), medium (500) and semibold (600). There is no 700, and `font-bold` does nothing in a Werewolf project.

- Headings: the weight comes with the role (`text-heading-1` to `-3` set it). Don't add a weight class on top.
- Emphasis inside text, labels, button text: `font-medium`.
- `font-semibold` only when medium can't separate a label from medium text right next to it.

```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>
```

### Inline code is 0.9em

Mono text sitting inside a sans sentence looks bigger than the words around it at the same size. Use `code-inline`: it sets the mono family at `0.9em`, so it follows whatever size the sentence is.

```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>
```