typography
4 font families cho 4 mục đích khác nhau. viết thường (lowercase) là phong cách mặc định. mỗi font được chọn để tối ưu cho ngữ cảnh sử dụng cụ thể.
font families
display — Hanken Grotesk
hero, heading chính, số liệu lớn · weight: 600–700 · --font-display
trăm nghe không bằng một thấy
text & ui — Inter
body text, label, input, button · weight: 400–500 · --font-text
design system for saas dashboards & infographics
content — Merriweather
bài viết dài, tài liệu, mô tả chi tiết · weight: 400 · --font-content
The quick brown fox jumps over the lazy dog. Serif fonts improve readability for long-form content by guiding the eye along the line.
number — Space Grotesk
số liệu, bảng biểu, metric, dashboard · weight: 500–600 · --font-number
123,456,789 + 98.5% → 1,024px
type scale
14 mức kích thước, mỗi mức có sẵn như một css shorthand (font-weight size/line-height font-family).
font weight
Aa
normal
400 Aa
medium
500 Aa
semibold
600 Aa
bold
700 writing style
lowercase
- ui text, labels, buttons luôn viết thường
- heading cũng viết thường (trừ tên riêng)
không dùng
- uppercase như một phong cách
- title case cho heading