Typography
Chọn font hỗ trợ tiếng Việt, lập thang cỡ chữ, giãn dòng và độ dài dòng hợp lý để trang dễ đọc trên mọi màn hình.
- Chọn font hiển thị đúng dấu tiếng Việt và có giấy phép rõ ràng.
- Lập thang cỡ chữ 4–6 bậc cho điện thoại và máy tính.
- Đặt giãn dòng và độ dài dòng giúp đọc thoải mái.
Phần lớn nội dung Landing Page là chữ: headline, lợi ích, giá, FAQ. Typography tốt không phải để “đẹp” mà để khách đọc nhanh, không mỏi mắt và phân biệt được ngay đâu là tiêu đề, đâu là nội dung, đâu là nút bấm.
Chọn font cho tiếng Việt
- Kiểm tra font hiển thị đúng dấu chồng: gõ thử “Ầ Ẫ Ợ Ữ ỷ ậ ễ” ở cỡ lớn và cỡ nhỏ; dấu không bị lệch, dính hoặc rơi sang font dự phòng.
- Tối đa 2 họ font: một cho tiêu đề, một cho nội dung (hoặc một họ font với nhiều độ đậm).
- Nội dung dài dùng font sans-serif hoặc serif rõ nét; font viết tay, font trang trí chỉ dùng cho vài chữ nhấn.
- Chỉ dùng font có giấy phép rõ ràng (ví dụ nhiều font trên Google Fonts dùng giấy phép SIL Open Font License); đọc giấy phép trước khi dùng cho mục đích thương mại.
- Mỗi file font tải thêm làm trang nặng hơn: chỉ tải các độ đậm thực sự dùng, cân nhắc dùng font hệ thống cho nội dung.
Thang cỡ chữ gợi ý (điểm khởi đầu, chỉnh theo font)
| Vai trò | Điện thoại | Máy tính | Giãn dòng |
|---|---|---|---|
| H1 (headline) | 28–34 px | 40–56 px | 1,15–1,25 |
| H2 (tiêu đề khối) | 22–26 px | 28–36 px | 1,2–1,3 |
| H3 / tiêu đề thẻ | 18–20 px | 20–24 px | 1,3 |
| Nội dung | 16–17 px | 17–18 px | 1,5–1,7 |
| Chú thích, nhãn phụ | 13–14 px | 14 px | 1,4–1,5 |
| Chữ trên nút | 16–17 px, đậm vừa | 16–18 px | 1,2 |
Độ dài dòng và nhịp đọc
- Dòng quá dài khiến mắt khó tìm đầu dòng tiếp theo; khoảng 45–75 ký tự mỗi dòng là mức thường được khuyến nghị trong typography. Trong CSS có thể giới hạn bằng max-width khoảng 60–70ch.
- Đoạn văn trên Landing Page nên ngắn: 2–4 câu, mỗi đoạn một ý.
- Khoảng cách giữa các đoạn lớn hơn khoảng cách giữa các dòng để mắt thấy rõ ranh giới đoạn.
- Tiêu đề gần với nội dung bên dưới nó hơn là với khối phía trên.
Dễ đọc
- Nội dung 16–17 px, giãn dòng khoảng 1,6, màu chữ đậm trên nền sáng.
- H1, H2, nội dung chênh nhau rõ rệt về cỡ.
- Nhấn mạnh bằng chữ đậm cho vài từ khóa.
Khó đọc
- Chữ 13 px màu xám nhạt trên nền trắng cho cả đoạn dài.
- Đoạn văn chữ in hoa toàn bộ, căn đều hai bên tạo khe trắng lớn.
- Bốn font khác nhau trong một màn hình.
Bài tập thực hành
Lập bảng token typography cho trang của bạn: chọn 1–2 font, ghi cỡ chữ và giãn dòng cho 6 vai trò (H1, H2, H3, nội dung, chú thích, nút) trên điện thoại và máy tính. Gõ thử một đoạn có đủ dấu tiếng Việt để kiểm tra.
Gợi ý: Bắt đầu từ cỡ nội dung 16 px, nhân dần theo tỉ lệ khoảng 1,2–1,333 để ra các cấp tiêu đề, rồi làm tròn.
- Font hiển thị đúng mọi dấu tiếng Việt ở cả cỡ lớn và nhỏ.
- Không dùng quá 2 họ font.
- Nội dung trên điện thoại không nhỏ hơn khoảng 16 px.
- Độ dài dòng nội dung trên máy tính được giới hạn.
- Đã kiểm tra giấy phép font.
Kiểm tra kiến thức
- Để làm chữ đẹp hơn
- Để tăng tốc độ tải
- Để kiểm tra font có hỗ trợ dấu chồng tiếng Việt và không bị cắt dấu
- Không cần thiết
Xem đáp án
C. Để kiểm tra font có hỗ trợ dấu chồng tiếng Việt và không bị cắt dấu — Nhiều font thiếu hoặc vẽ dấu chồng chưa chuẩn; trình duyệt sẽ lấy font dự phòng cho ký tự thiếu, làm chữ lệch phông.
- Kéo dòng chữ hết chiều ngang màn hình 1.920 px
- Dùng chữ in hoa toàn bộ
- Giảm giãn dòng xuống 1
- Giới hạn độ dài dòng (ví dụ khoảng 60–70ch) và giãn dòng khoảng 1,5–1,7
Xem đáp án
D. Giới hạn độ dài dòng (ví dụ khoảng 60–70ch) và giãn dòng khoảng 1,5–1,7 — Dòng vừa phải và giãn dòng thoáng giúp mắt dễ chuyển dòng, đọc ít mệt hơn.
- rem tải nhanh hơn
- rem tôn trọng cài đặt cỡ chữ người dùng chọn trong trình duyệt
- px không hoạt động trên điện thoại
- rem làm chữ đậm hơn
Xem đáp án
B. rem tôn trọng cài đặt cỡ chữ người dùng chọn trong trình duyệt — Người cần chữ lớn hơn có thể tăng cỡ chữ mặc định; đơn vị rem sẽ co giãn theo, px cố định thì không.