<>Typography trong UI/UX là nghệ thuật và kỹ thuật sắp xếp chữ để đảm bảo văn bản dễ đọc, dễ hiểu và có tính thẩm mỹ cao trong giao diện người dùng. Đây là một thành phần quan trọng trong Base Components vì nó ảnh hưởng trực tiếp đến trải nghiệm và cảm xúc của người dùng khi sử dụng sản phẩm.
/Các thành phần cơ bản của Typography
– Typography trong UI/UX thường bao gồm các yếu tố sau:
1. Font & Typeface (Phông chữ & Họ phông chữ)
– Typeface (Họ phông chữ): Tập hợp các kiểu chữ có đặc điểm chung (VD: Roboto, Open Sans, Inter…).
– Font (Phông chữ cụ thể): Một biến thể của typeface (VD: Roboto Regular, Roboto Bold).
– Font Family: Nhóm font có đặc điểm giống nhau, thường gồm:
+ Serif (Có chân) – Trang trọng, cổ điển (VD: Times New Roman).
+ Sans-serif (Không chân) – Hiện đại, tối giản (VD: Roboto, Arial).
+ Monospace (Ký tự đều nhau) – Dùng cho mã code (VD: Courier New).
2. Font Size (Kích thước chữ)
– Heading (Tiêu đề) – Lớn nhất, nhấn mạnh nội dung chính.
– Subheading (Tiêu đề phụ) – Hỗ trợ tiêu đề chính.
– Body (Nội dung chính) – Kích thước chuẩn, dễ đọc.
– Caption (Chú thích) – Nhỏ hơn, dùng để giải thích hoặc mô tả.
3. Font Weight (Độ đậm của chữ)
– Thin (100-300) – Mảnh, nhẹ.
– Regular (400) – Tiêu chuẩn, dễ đọc.
– Medium (500-600) – Nhấn mạnh nhẹ.
– Bold (700-900) – Nhấn mạnh quan trọng.
4. Line Height (Khoảng cách dòng – Leading)
Khoảng cách giữa các dòng, ảnh hưởng đến khả năng đọc.
– Tối ưu: 120-150% so với font size.
– Body text (16px) → Line height 24px.
5. Letter Spacing (Khoảng cách giữa các ký tự – Tracking)
– Hẹp hơn – Dùng cho tiêu đề (Heading).
– Rộng hơn – Dùng cho chữ nhỏ để tăng độ rõ ràng.
6. Alignment (Căn chỉnh văn bản)
– Left-aligned (Căn trái) – Phổ biến nhất, dễ đọc.
– Center-aligned (Căn giữa) – Dùng trong tiêu đề hoặc typography đặc biệt.
– Right-aligned (Căn phải) – Ít phổ biến, thường dùng cho số liệu.
– Justified (Căn đều hai bên) – Thường gặp trong báo chí, nhưng có thể gây khó đọc.
/Hệ thống phân cấp Typography (Typography Hierarchy)
🔹 Mục đích: Giúp người dùng dễ dàng nhận biết và quét thông tin nhanh chóng.
👉 Ví dụ hệ thống phân cấp phổ biến:H1 – Tiêu đề lớn nhất (32px, Bold) H2 – Tiêu đề phụ (24px, Medium) H3 – Tiêu đề nhỏ hơn (20px, Regular) Body Text – Nội dung chính (16px, Regular) Caption – Chú thích (12px, Light)
🚀 Lưu ý: Heading càng lớn → Tầm quan trọng càng cao.
/Best Practices khi thiết kế Typography trong UI/UX
✅ Ưu tiên readability & legibility (Dễ đọc & rõ ràng)
– Sử dụng font Sans-serif cho UI (VD: Inter, Roboto, Open Sans).
– Giữ font size tối thiểu 14-16px để đọc tốt trên mọi thiết bị.
✅ Hệ thống phân cấp rõ ràng (Clear Hierarchy)
– Heading lớn hơn Body text.
– Màu sắc, độ đậm giúp phân biệt cấp độ nội dung.
✅ Khoảng cách dòng & ký tự hợp lý
– Line height ~1.5x so với font size để dễ đọc.
– Không dùng letter-spacing quá sát trong body text.
✅ Tương phản cao giữa chữ & nền (Contrast Ratio tốt)
– Đảm bảo tỷ lệ tương phản ít nhất 4.5:1 (theo WCAG).
– Không dùng chữ xám nhạt trên nền trắng gây khó đọc.
✅ Sử dụng font hệ thống trên mobile để tối ưu hiệu suất
– iOS: San Francisco (SF Pro)
– Android: Roboto
