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
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.
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.
// 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.
// 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-1to-3set it). Don't add a weight class on top. - Emphasis inside text, labels, button text:
font-medium. font-semiboldonly when medium can't separate a label from medium text right next to it.
// 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.
// 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>