Nền tảng
Chữ
Đã đặc tảMột họ chữ: Be Vietnam Pro, bốn weight, font cục bộ, giấy phép OFL. Tám vai trò, không phải một thang cỡ — mỗi vai trò mang đủ năm thuộc tính cùng lúc, nên chọn vai trò là chọn cả bộ.
Họ chữ
Họ chữ và weight
font.family là Be Vietnam Pro với sans-serif dự phòng, bốn weight: regular 400, medium 500, semibold 600, bold 700. Font ship cục bộ trong packages/ui/fonts/ ở định dạng woff2, kèm OFL.txt — không CDN. Bốn weight là tất cả những gì có; một weight thứ năm không tồn tại trong repo và sẽ được trình duyệt tổng hợp thành một hình dạng không ai thiết kế.
Token
Tám vai trò
Mỗi specimen đọc đủ năm thuộc tính của chính nó lúc chạy: font-size, font-weight, line-height, letter-spacing. ui và data cùng giá trị hôm nay nhưng vẫn là hai token vì chúng rẽ nhánh được độc lập sau này.
Ag
display
- font-size
- Unknown
- font-weight
- Unknown
- line-height
- Unknown
- letter-spacing
- Unknown
Một dòng trên một trang marketing. Không dùng trong sản phẩm
Ag
heading1
- font-size
- Unknown
- font-weight
- Unknown
- line-height
- Unknown
- letter-spacing
- Unknown
<h1> của trang. Đúng một cái mỗi trang
Ag
heading2
- font-size
- Unknown
- font-weight
- Unknown
- line-height
- Unknown
- letter-spacing
- Unknown
<h2> của section
Ag
heading3
- font-size
- Unknown
- font-weight
- Unknown
- line-height
- Unknown
- letter-spacing
- Unknown
<h3> trong một section
Ag
body
- font-size
- Unknown
- font-weight
- Unknown
- line-height
- Unknown
- letter-spacing
- Unknown
Văn xuôi đọc liền, đoạn nhiều câu
Ag
ui
- font-size
- Unknown
- font-weight
- Unknown
- line-height
- Unknown
- letter-spacing
- Unknown
Nhãn, nút, ô nhập, hàng bảng
Ag
caption
- font-size
- Unknown
- font-weight
- Unknown
- line-height
- Unknown
- letter-spacing
- Unknown
Chú giải, siêu dữ liệu, eyebrow
Ag
data
- font-size
- Unknown
- font-weight
- Unknown
- line-height
- Unknown
- letter-spacing
- Unknown
Số trong bảng và trong thẻ số liệu
Trợ năng
rem và cài đặt chữ của người dùng
Cỡ chữ viết bằng rem, nên khi người dùng tăng cỡ chữ mặc định của trình duyệt, chữ to lên theo — điều kiện để đạt A9 (zoom). Đừng đặt font-size bằng px ở đâu trong sản phẩm. line-height là số không đơn vị, nhân với cỡ chữ của chính phần tử — đừng đổi sang px.
Quy tắc
Do / Don't
| Do | Don't | Vì sao |
|---|---|---|
| Chọn một vai trò | Chọn một cỡ rồi tự ghép weight | Vai trò mang năm thuộc tính; ghép tay là dựng vai trò thứ chín không ai đặt tên |
| Dùng data cho số trong bảng | Dùng ui cho số vì cùng cỡ | Hai token rẽ nhánh được; trùng giá trị hôm nay không phải trùng ý định |
| Dùng body cho đoạn nhiều câu | Dùng ui cho văn xuôi dài | ui có line height chặt hơn; đoạn dài ở line height đó đọc mỏi |
| Giữ đúng một heading1 mỗi trang | Nhảy bậc tiêu đề để lấy cỡ chữ | A28 đòi cấu trúc đọc được bằng máy; cỡ chữ lấy bằng token, không bằng bậc thẻ |
| rem cho cỡ chữ | px cho cỡ chữ | px không co theo cài đặt của người dùng |
Chưa quyết
Open questions
| Question | Owner | Resolves when |
|---|---|---|
| data có cần font-variant-numeric: tabular-nums không? | nexoboxvn@gmail.com | Một bảng số thật cho thấy cột lệch |
| Có cần một họ chữ mono cho mã và cho mã đối soát không? | nexoboxvn@gmail.com | Một bề mặt sản phẩm hiển thị mã |
| display có được phép xuất hiện trong sản phẩm không, hay chỉ marketing? | nexoboxvn@gmail.com | Một bề mặt sản phẩm xin dùng nó và nêu lý do |