[5] Luật trong Typography Foundation

🔤 Typography Foundation trong Design System

🧠 Mục tiêu

Typography Foundation định nghĩa toàn bộ hệ thống chữ trong Design System, từ kiểu chữ cơ bản đến cách sử dụng trong UI.

Một hệ thống typography tốt không nằm ở việc có nhiều font hay nhiều size, mà ở việc:

• có cấu trúc rõ ràng
• có vai trò cụ thể
• có thể mở rộng và sử dụng nhất quán

🧱 1. Primitive (Raw Typography)

Primitive là các thuộc tính chữ cơ bản, chưa có ý nghĩa sử dụng trong UI.

Bao gồm:

• Font family
• Font weight
• Font size
• Line height
• Letter spacing

🎯 Setup của design system này

👉 Chỉ dùng 1 font:

Font family: Roboto

Font Weight

• 400 – Regular
• 500 – Medium
• 600 – SemiBold
• 700 – Bold

Font Size (base scale)

• 12px
• 14px
• 16px
• 18px
• 20px
• 24px
• 30px
• 36px

Nguyên tắc

• Không dùng primitive trực tiếp trong UI
• Chỉ dùng để build system

🔤 2. Typography Scale

Scale là hệ thống kích thước chữ được chuẩn hóa

🎯 Scale đề xuất

• xs = 12px
• sm = 14px
• md = 16px
• lg = 18px
• xl = 20px
• 2xl = 24px
• 3xl = 30px
• 4xl = 36px

Line Height

• xs → 16px
• sm → 20px
• md → 24px
• lg → 26px
• xl → 28px
• 2xl → 32px
• 3xl → 38px
• 4xl → 44px

Nguyên tắc

• Scale phải đều và có logic
• Không dùng size ngoài hệ thống
• Line-height phải đảm bảo readability

🎯 3. Semantic Typography

Semantic = gán vai trò cho chữ (giống color)

🎯 Các nhóm chính

• text-heading
• text-body
• text-caption
• text-button
• text-label

🎯 Chi tiết

Heading

• heading-1
• - size: 4xl
• - weight: 700
• - line-height: 44px

• heading-2
• - size: 3xl
• - weight: 700

• heading-3
• - size: 2xl
• - weight: 600

Body

• text-body
• - size: md
• - weight: 400
• - line-height: 24px

• text-body-strong
• - size: md
• - weight: 500

Caption

• text-caption
• - size: sm
• - weight: 400

Button

• text-button
• - size: sm hoặc md
• - weight: 500 hoặc 600

Label (form)

• text-label
• - size: sm
• - weight: 500

🎯 Nguyên tắc

• Không dùng font-size trực tiếp
• Chỉ dùng semantic token
• Mỗi role = 1 style rõ ràng

🧩 4. Typography Rules

🧠 4.1 Nguyên tắc cốt lõi

• Không dùng size / weight trực tiếp
• Chỉ dùng semantic
• Không tạo style ngoài system

👉 Câu chốt:

🔥 Không chọn chữ — chỉ dùng đúng vai trò của chữ

🎯 4.2 Hierarchy

• Heading → nổi bật
• Body → dễ đọc
• Caption → phụ

👉 Không dùng quá nhiều cấp độ

🎯 4.3 Readability

• Body ≥ 14px (tốt nhất 16px)
• Line-height: 1.4 – 1.6
• Tránh weight quá mỏng

🎯 4.4 Rule theo context

Content

• dùng text-body, heading-*

Button

• dùng text-button

Form

• dùng text-label

🎯 4.5 Consistency

• cùng role → cùng style
• không chỉnh riêng từng màn

🎯 4.6 Light / Dark Mode

👉 Typography không đổi size / font theo mode

NHƯNG:

• Light mode → text tối
• Dark mode → text sáng

👉 (đã xử lý ở color: text-primary, text-on-primary)

⚠️ Perception quan trọng

• Dark mode: chữ nhìn dày hơn
• Light mode: chữ nhìn mỏng hơn

👉 Vì vậy:

• Không dùng weight quá đậm trong dark
• Không dùng weight quá mỏng trong light

🔧 4.7 Khi typography có vấn đề

Nếu UI:

• khó đọc
• rối
• thiếu hierarchy

👉 Không fix từng màn

👉 Fix:

• semantic
• scale

💀 4.8 Sai lầm cần tránh

• dùng size random
• lạm dụng bold
• không có hierarchy
• dùng body cho button
• dùng nhiều font

🧭 5. Guidelines

🎯 Nguyên tắc

• ưu tiên readability
• typography phải rõ ràng
• dùng chữ để tạo structure

📌 Khuyến nghị

• chỉ dùng 1 font
• 5–8 size là đủ
• body ≥ 16px
• button text rõ ràng
• hạn chế ALL CAPS

🔥 Kết luận

Typography Foundation không chỉ là font và size, mà là hệ thống giúp:

• đọc dễ hơn
• UI rõ ràng hơn
• scale dễ hơn

💥 Câu chốt

👉 Không phải bạn chọn font — mà là bạn dùng đúng vai trò của chữ trong hệ thống

Typography Foundation: https://www.figma.com/design/QwbgeUIRaVa3ETy8O3UOxT/Design-system-2026?node-id=49-142&p=f&t=2mycU61g7VmhADKw-0