Thời lượng: 1 tuần
Level: Beginner
Yêu cầu: Hoàn thành Module 1 (Design Tokens)
Tổng quan Module
Trong Module này, bạn sẽ học cách xây dựng hai hệ thống quan trọng nhất quyết định "nhịp điệu" (rhythm) của giao diện: Typography và Spacing. Chúng ta sẽ không chọn số ngẫu nhiên, mà sử dụng các công thức toán học để đảm bảo sự nhất quán.
Kết quả học tập
Sau module này, bạn sẽ:
- Thiết lập Type Scale (thang bậc chữ) khoa học.
- Xây dựng Spacing Scale dựa trên base-8 rule.
- Hiểu về Line Height và Vertical Rhythm.
- Implement responsive typography & spacing.
Bài 2.1: Type Scale & Hierarchy
Lý thuyết
Type Scale là gì? Thay vì chọn bừa bãi 13px, 15px, 19px... chúng ta sử dụng một tỷ lệ cố định (Ratio) để tạo ra các kích thước chữ.
Các tỷ lệ phổ biến:
- Major Second (1.125): Biến thiên nhẹ (phù hợp dashboard/app).
- Major Third (1.250): Biến thiên rõ rệt (phù hợp marketing/blog).
- Perfect Fourth (1.333): Biến thiên rất mạnh.
Ví dụ với Major Second (Base 16px):
- Text-sm: 16 / 1.125 = 14.22px
- Text-base: 16px
- Text-lg: 16 * 1.125 = 18px
- Text-xl: 18 * 1.125 = 20.25px
- Text-2xl: 20.25 * 1.125 = 22.78px
Nguyên tắc then chốt
"Đừng bao giờ dùng font-size lẻ (như 16.5px). Hãy làm tròn về số nguyên gần nhất."
Demo: Type Scale Explorer
Sử dụng công cụ dưới đây để xem sự khác biệt giữa các Type Scale:
Thực hành
Bài tập: Thiết lập typography tokens.
Checklist:
- Chọn một Type Scale phù hợp với sản phẩm của bạn.
- Định nghĩa tokens cho
font-size. - Định nghĩa tokens cho
line-height(thường là 1.2 cho heading, 1.5 cho body). - Đóng gói thành CSS Variables.
Bài 2.2: Spacing Scale (Hệ thống khoảng cách)
Lý thuyết
Quy tắc 8pt (8pt Grid System): Sử dụng các bội số của 8 (8, 16, 24, 32, 48, 64...) để định nghĩa padding, margin, và kích thước các icon/button.
Tại sao lại là số 8?
- Phân cực tốt (chia hết cho 2, 4).
- Phù hợp với hầu hết các độ phân giải màn hình (số nguyên).
- Tạo ra sự cân bằng thị giác tự nhiên.
Ngoại lệ: Đối với các giao diện cực kỳ compact (như bảng dữ liệu), bạn có thể dùng scale 4pt.
Thực hành
Spacing Tokens System:
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
}Bài tập: Hãy audit một màn hình bất kỳ trong project của bạn và thay thế tất cả padding/margin lẻ (như 15px, 17px) về các giá trị trong hệ thống base-8.
Tổng kết Module
Bạn đã học:
- Cách tạo Type Scale khoa học để tránh chọn kích thước chữ ngẫu nhiên.
- Hệ thống Spacing base-8 để tạo nhịp điệu cho giao diện.
- Tầm quan trọng của tính nhất quán trong Typography và Layout.
Bước tiếp theo
Module 3 sẽ đưa bạn vào thế giới màu sắc và cách xây dựng hệ thống màu sắc hỗ trợ đa giao diện (Dark/Light mode).