Font chữ: Linh hồn và Hệ thống

Typography (Nghiệp vụ chữ) chiếm tới 90% nội dung của một website. Nếu chữ khó đọc, người dùng sẽ rời đi ngay cả khi code của bạn siêu nhanh.

1. Con số ma thuật: 16px

Đừng bao giờ sử dụng font chữ nhỏ hơn 16px cho phần nội dung chính (Body text).

• Lý do: Đây là kích thước mặc định của trình duyệt và là kích thước tối ưu để mắt người đọc không bị mỏi. Đối với người dùng lớn tuổi, con số này có thể lên tới 18-20px.

2. Xây dựng Type Scale (Thang đo)

Đừng tùy tiện đặt size 13px, 19px. Hãy dùng một bội số hoặc một tỷ lệ (thường là 1.25 - Major Third).

Gợi ý bộ size chuẩn:

• H1: 32px (hoặc 40px cho Landing page)
• H2: 24px
• H3: 20px
• Body: 16px
• Small/Caption: 13px hoặc 14px

3. Font Pairing (Phối hợp font)

Nếu bạn không tự tin, hãy tuân thủ quy tắc: Sử dụng duy nhất 1 bộ Font (Sans-serif). Các font chữ "an toàn" và hiện đại (Google Fonts):

• Inter: Chuẩn mực cho ứng dụng SaaS, tool công việc.
• Roboto / Open Sans: Phổ biến, dễ đọc cho mọi nền tảng.
• Outfit / Montserrat: Mang hơi hướng Startup, công nghệ, trẻ trung.

Nếu muốn phối 2 font (Serif & Sans-serif):

• Font có chân (Serif) cho Tiêu đề.
• Font không chân (Sans-serif) cho Nội dung.

4. Line Height (Độ cao dòng) - Bí mật của sự thoáng đãng

Lỗi lớn nhất là để dòng chữ quá sít nhau.

• Quy tắc: Line-height nên bằng 1.5 lần font-size.
• Ví dụ: Font 16px -> Line-height 24px (leading-relaxed trong Tailwind).

5. Giới hạn độ dài dòng (Line Length)

Đừng để văn bản trải dài hết chiều ngang màn hình.

• Con số tối ưu: 45 - 75 ký tự mỗi dòng (khoảng 600px - 800px chiều rộng).
• Vượt quá con số này, người dùng sẽ rất khó để tìm thấy điểm bắt đầu của dòng tiếp theo khi xuống hàng.

6. Contrast & Weight (Độ đậm nhạt)

Dùng Font Weight để tạo sự khác biệt thay vì kích thước:

• Tiêu đề: font-bold (700) hoặc font-semibold (600).
• Nội dung: font-normal (400) hoặc font-light (300).

Kết luận

Typography tốt là typography "tàng hình". Khi người dùng đọc mà không để ý rằng họ đang đọc, đó là lúc bạn thành công. Hãy ưu tiên sự rõ ràng trên mọi thiết bị trước khi nghĩ đến việc tìm một font chữ "độc lạ".