CSKH
Typography là nghệ thuật sắp xếp chữ để văn bản dễ đọc, dễ tiếp cận và hấp dẫn — khi được thực hiện đúng, người dùng không nhận ra bạn đang dùng font gì. Họ chỉ cảm thấy thoải mái.
Bạn đã bao giờ vào một website mà không biết tại sao lại cảm thấy "không chuyên nghiệp"? 80% khả năng vấn đề nằm ở typography. Font chữ sai, kích thước sai, khoảng cách sai — tất cả tạo nên cảm giác khó chịu tiềm thức.
Bài viết này sẽ hướng dẫn bạn từng bước chọn font chữ đúng, ghép cặp font hiệu quả và áp dụng typography chuẩn cho website của mình.
Font chữ là gì và vì sao nó quan trọng?
Font chữ (typeface) là tập hợp các ký tự được thiết kế với phong cách nhất quán — bao gồm chữ cái, số, dấu câu và ký tự đặc biệt. Mỗi font mang một "cá tính" riêng: nghiêm túc, vui tươi, sang trọng, hay công nghệ.
4 nhóm font chữ cơ bản bạn cần biết
Phù hợp: báo chí, luật, tài chính, thời trang cao cấp. Tạo cảm giác uy tín, truyền thống.
Phù hợp: công nghệ, startup, app, e-commerce. Hiện đại, sạch sẽ, dễ đọc trên màn hình.
Phù hợp: tiêu đề lớn, banner, landing page, thương hiệu sáng tạo. Gây ấn tượng mạnh.
Phù hợp: website kỹ thuật, dev blog, đoạn code. Tạo cảm giác chuyên nghiệp và chính xác.
5 tiêu chí vàng khi chọn font cho website
Font là ngôn ngữ phi lời nói. Phòng khám y tế cần font gợi sự tin tưởng (Lato, Source Sans). Agency sáng tạo có thể dùng font táo bạo hơn (Raleway, Exo). Đừng chọn font vì thích — hãy chọn vì nó phù hợp.
Kiểm tra font ở kích thước nhỏ (12–14px trên mobile) và kích thước lớn (heading). Font tốt phải đọc được ở mọi size, không bị nhòe hay mất nét. Hãy ưu tiên font có hinting tốt cho web.
Mỗi font weight bổ sung = thêm HTTP request. Chỉ tải các weight cần dùng (400, 600, 700 là đủ). Sử dụng font-display: swap để tránh FOIT (Flash of Invisible Text).
Đây là lỗi cực phổ biến! Nhiều font nước ngoài không có đủ dấu tiếng Việt, khiến chữ bị vỡ hoặc fallback sang font hệ thống xấu. Luôn kiểm tra với đoạn text tiếng Việt thực tế trước khi chọn.
Google Fonts và nhiều font trên Adobe Fonts có license thương mại miễn phí. Tuy nhiên một số font premium có giới hạn số lượng pageview. Luôn kiểm tra license trước khi đưa vào sản phẩm thương mại.
Font pairing — Nghệ thuật ghép cặp font chữ
Nguyên tắc vàng: tối đa 2–3 font trên cùng một trang. Thường là 1 font cho heading + 1 font cho body text. Ghép cặp tốt tạo sự tương phản hài hòa.
Thông số typography chuẩn cho website
Kích thước chữ chuẩn
| Thành phần | Desktop | Mobile |
|---|---|---|
| H1 — Tiêu đề chính | 36–48px | 26–32px |
| H2 — Tiêu đề phụ | 28–36px | 22–26px |
| H3 — Tiêu đề mục | 22–28px | 18–22px |
| Body — Nội dung | 16–18px | 15–16px |
| Caption / Note | 12–14px | 12–13px |
- Heading: 1.2 – 1.35
- Body text: 1.6 – 1.8
- Caption: 1.4 – 1.5
- Heading lớn: -0.02em đến 0
- Body: 0 đến 0.01em
- ALL CAPS label: 0.08 – 0.15em
WCAG 2.1 yêu cầu tỷ lệ tương phản tối thiểu 4.5:1 cho body text và 3:1 cho heading lớn. Văn bản màu #555 trên nền trắng đạt 7.5:1 — đủ chuẩn và dễ đọc.
6 lỗi typography cần tránh khi làm web
Hơn 3 font = hỗn loạn thị giác. Tối đa 2 font, tương phản rõ ràng về role.
Body text dưới 14px trên mobile gây khó đọc và tăng tỷ lệ thoát trang.
Line-height 1.0–1.2 cho body text khiến mắt khó theo dõi từng dòng.
Dấu tiếng Việt bị fallback sang font khác trông rất xấu và thiếu chuyên nghiệp.
Chữ xám nhạt trên nền trắng hoặc chữ trắng trên nền vàng nhạt không đạt chuẩn WCAG.
Load 9 weight của một font = 1–2MB thêm. Chỉ tải weight bạn thực sự dùng.
Top font Google Fonts tốt nhất cho web Việt Nam
Font được thiết kế bởi người Việt, hỗ trợ hoàn hảo. Phù hợp mọi loại website.
Tròn, nhẹ nhàng, rất phù hợp cho app, e-commerce, và website dịch vụ.
Tải nhanh, nhiều weight, phổ biến nhất thế giới — không bao giờ sai khi dùng.
Lý tưởng cho tiêu đề lớn, rất hợp với các brand hiện đại, agency.
Serif hiện đại, rất dễ đọc trong body text dài. Hoàn hảo cho blog, báo.
Dễ đọc, neutral, hoạt động tốt trong mọi ngữ cảnh từ corporate đến startup.
Checklist typography trước khi launch website
font-display: swap 
Chia sẻ nhận xét về bài viết