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
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 | 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.
// 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.
// 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-semiboldchỉ khi medium không tách được một nhãn khỏi chữ medium ngay cạnh nó.
// 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.
// 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>