typography
bốn font families, mỗi font chọn cho một vai trò cụ thể. lowercase là giọng điệu mặc định — ít nhiễu thị giác, tối đa legibility. mỗi text style có sẵn dưới dạng CSS shorthand token duy nhất.
font families
hanken grotesk
--font-display the quick brown fox
inter
--font-text the quick brown fox jumps over the lazy dog.
merriweather
--font-content The quick brown fox jumps over the lazy dog. Serif faces guide the eye along long lines of text, reducing fatigue for extended reading sessions.
space grotesk
--font-number 123,456,789 + 98.5%
type scale
14 cấp từ --text-hero (64px) đến --text-number-sm (16px). mỗi token là CSS shorthand kết hợp font-size, line-height, font-weight, và font-family.
hero the quick brown fox
64px / 1.3 / 700 display h1 the quick brown fox
48px / 1.2 / 700 display h2 the quick brown fox
36px / 1.25 / 700 display h3 the quick brown fox
28px / 1.3 / 700 display h4 the quick brown fox
22px / 1.35 / 600 display body-lg the quick brown fox jumps over the lazy dog.
18px / 1.6 / 400 inter body the quick brown fox jumps over the lazy dog.
16px / 1.625 / 400 inter body-sm the quick brown fox jumps over the lazy dog.
14px / 1.5 / 400 inter ui the quick brown fox
14px / 1.43 / 500 inter ui-sm the quick brown fox
12px / 1.33 / 500 inter content the quick brown fox jumps over the lazy dog.
17px / 1.7 / 400 merriweather number-lg 1,024 px + 98.5%
36px / 1.2 / 700 space grotesk number 1,024 px + 98.5%
24px / 1.3 / 500 space grotesk number-sm 1,024 px + 98.5%
16px / 1.4 / 500 space grotesk font weight
bốn cấp weight có sẵn dưới dạng CSS custom properties.
Aa
normal
400 Aa
medium
500 Aa
semibold
600 Aa
bold
700 brand typography
mỗi brand override --font-display. text, number, và content fonts giữ nguyên giữa các brand.
| brand | display font | text font | number font | content font |
|---|---|---|---|---|
| reputa-blue | Hanken Grotesk | Inter | Space Grotesk | Merriweather |
| reputa-premier | Hanken Grotesk | Inter | Space Grotesk | Merriweather |
| tramnghe | Merriweather | Inter | Space Grotesk | Merriweather |
| 1thay | Space Grotesk | Inter | Space Grotesk | Merriweather |
usage matrix
token nào cho context nào — tham khảo nhanh khi build giao diện.
| context | token | font | size / weight |
|---|---|---|---|
| hero title | --text-hero | display | 64px / 700 |
| page heading | --text-h1 | display | 48px / 700 |
| section heading | --text-h2 | display | 36px / 700 |
| card heading | --text-h3 / --text-h4 | display | 28px / 22px |
| body text | --text-body | text | 16px / 400 |
| small print | --text-body-sm | text | 14px / 400 |
| button label | --text-ui | text | 14px / 500 |
| badge, caption | --text-ui-sm | text | 12px / 500 |
| long article | --text-content | content | 17px / 400 |
| dashboard metric | --text-number-lg | number | 36px / 700 |
| stat value | --text-number | number | 24px / 500 |
| table number | --text-number-sm | number | 16px / 500 |