Typography tiếng Việt trên web: chọn font đủ dấu, giãn dòng dễ đọc và tải font nhanh

Cập nhật tháng 10/2026. Thông số trong bài lấy từ tài liệu Google Fonts, MDN, web.dev và W3C; con số cụ thể như cỡ chữ hay giãn dòng là mức khởi điểm, nên thử trên chính font và nội dung của bạn.

Hướng dẫn typography trên mạng phần lớn viết cho tiếng Anh. Áp nguyên sang tiếng Việt, bạn dễ gặp tiêu đề có dấu mũ chạm dòng trên, chữ “ệ” hiện bằng font khác hẳn chữ “e” bên cạnh. Bài này gom những lỗi hay gặp nhất và cách sửa có nguồn.

1. Vì sao chữ tiếng Việt khó hơn

Tiếng Việt có rất nhiều ký tự mang dấu, nhiều chữ mang hai dấu chồng nhau như “ầ”, “ặ”, “ễ” (trong Unicode chủ yếu ở dải U+1EA0–U+1EF9). Vì vậy font phải có đủ glyph cho dải này, dòng chữ cần nhiều khoảng trống hơn tiếng Anh, và tệp font nặng hơn nên cách tải font ảnh hưởng thẳng đến tốc độ trang.

2. Chọn font: kiểm tra đủ dấu trước khi mê kiểu chữ

Trên Google Fonts, hãy lọc theo ngôn ngữ Vietnamese ngay từ đầu, rồi mới chọn kiểu chữ. Khi dùng CSS API (css2), Google Fonts trả về nhiều khối @font-face, mỗi khối một subset (vietnamese, latin-ext, latin…) kèm unicode-range. Trình duyệt chỉ tải subset khi trang thật sự có ký tự thuộc dải đó, nên bạn không phải tự cắt font.

Cách thử nhanh: gõ vào ô xem trước câu “Ước mơ của Thuỷ: mở quầy bánh ở Đắk Lắk”, phóng to và nhìn chữ hoa “Ư”, “Ơ”, “Đ”, chữ hai dấu, dấu nặng. Dấu dính vào chữ, lệch hẳn hoặc nét khác chữ gốc thì chọn font khác.

3. Hai lỗi dấu hay gặp và cách sửa

Lỗi thứ hai khó thấy vì máy người soạn có khi vẫn hiển thị ổn. Để chuẩn hoá khi nhập dữ liệu, JavaScript có normalize('NFC'), PHP có lớp Normalizer.

4. Giãn dòng, cỡ chữ và độ dài dòng

Giãn dòng (line-height). MDN khuyên dùng giá trị không đơn vị như 1.6 thay cho px, để phần tử con kế thừa đúng tỉ lệ khi đổi cỡ chữ. Với thân bài tiếng Việt, tôi thường bắt đầu ở 1.6–1.7. Tiêu đề đặt 1.0–1.1 thì chữ hoa có dấu như “Ể”, “Ỗ” dễ chạm dòng trên; 1.25–1.3 an toàn hơn.

Tiêu chí WCAG 1.4.12 (Text Spacing). Nội dung không được mất chữ hay chồng lên nhau khi người dùng tự đặt giãn dòng 1.5 lần cỡ chữ, khoảng cách đoạn 2 lần, giãn ký tự 0.12 lần và giãn từ 0.16 lần cỡ chữ. Lỗi hay gặp: khung cao cố định kèm overflow: hidden làm chữ bị cắt.

Cỡ chữ trên điện thoại. Thân bài từ 16px (1rem), nhiều font cần 17–18px mới dễ đọc. Ô nhập nên từ 16px vì Safari trên iPhone tự phóng to khi chạm ô chữ nhỏ hơn; xem bài thiết kế form liên hệ. Dùng rem để người dùng phóng chữ vẫn có tác dụng; chữ co giãn theo màn hình bằng clamp() có ở bài CSS hiện đại.

Độ dài dòng. Phần giải thích của WCAG 1.4.8 (mức AAA) khuyên dòng chữ không quá 80 ký tự. Trên màn hình rộng, đặt max-width: 65ch hoặc khoảng 70ch cho khối bài viết là cách đơn giản nhất.

5. Tải font nhanh mà không vỡ bố cục

Font là một nguyên nhân hay gặp của chữ “nháy” và trang xô lệch khi tải, ảnh hưởng chỉ số CLS trong Core Web Vitals. Những việc nên làm theo web.dev và tài liệu Google Fonts:

• Chỉ tải weight cần dùng. Tài liệu css2 của Google Fonts nhắc rõ mỗi kiểu thừa là thêm dữ liệu phải tải. Cần 400 và 700 thì ghi wght@400;700, đừng tích cả chín độ đậm.
• Đặt font-display. Theo MDN, swap hiện chữ bằng font dự phòng gần như ngay lập tức rồi đổi sang font web khi tải xong; optional chỉ chờ rất ngắn và nếu font đến muộn thì giữ font dự phòng, không đổi giữa chừng. web.dev gợi ý swap cho tiêu đề, logo và optional cho thân bài nếu ưu tiên tốc độ.
• Preconnect, preload có chọn lọc. Với Google Fonts, preconnect tới fonts.googleapis.com và fonts.gstatic.com (miền sau cần crossorigin). Chỉ preload một hai tệp quan trọng nhất vì preload giành băng thông và bỏ qua unicode-range.
• Tự host chưa chắc nhanh hơn. web.dev lưu ý tự host phát huy khi có CDN và HTTP/2. Nếu tự host: dùng WOFF2, giữ subset vietnamese, kiểm tra giấy phép và đo lại.
• Chỉnh font dự phòng bằng size-adjust để giảm xô lệch khi đổi font.

Ví dụ một cấu hình tự host gọn cho website bán hàng (đường dẫn tệp là ví dụ):

6. Variable font: khi nào đáng dùng

Variable font gói nhiều độ đậm trong một tệp: khai báo font-weight: 100 900 trong CSS, hoặc [email protected] với Google Fonts. web.dev lưu ý tệp variable có thể nặng hơn vài tệp tĩnh, nên chỉ đáng dùng khi website cần nhiều độ đậm. Trang giới thiệu chỉ dùng chữ thường và chữ đậm thì hai tệp tĩnh thường nhẹ hơn.

7. Checklist áp dụng ngay

• Font đã lọc Vietnamese, thử câu có “Ư”, “Ơ”, “Đ”, chữ hai dấu, dấu nặng ở cỡ lớn.
• Không có chữ nào hiện bằng font khác: soi trong DevTools, tab Computed, mục Rendered Fonts.
• Nội dung đã chuẩn hoá NFC, đặc biệt dữ liệu nhập từ tệp cũ.
• Thân bài ≥ 16px, ô nhập ≥ 16px, đơn vị rem.
• Giãn dòng thân bài 1.5–1.7, tiêu đề ≥ 1.25, dùng số không đơn vị.
• Khối bài viết giới hạn khoảng 65–70ch.
• Bật thử giãn chữ theo WCAG 1.4.12: không khung nào cắt chữ.
• Chỉ tải weight đang dùng, có font-display, preload tối đa một hai tệp.
• Đo CLS và LCP trước, sau khi đổi cách tải font.

8. Thuật ngữ cần biết

• Subset và unicode-range: phần tách nhỏ của font theo dải ký tự; trình duyệt chỉ tải phần chứa ký tự có trên trang. Nguồn: MDN unicode-range.
• font-display: thuộc tính quyết định chữ hiển thị thế nào trong lúc font web đang tải. Nguồn: MDN font-display.
• Chuẩn hoá NFC: đưa chữ có dấu về dạng ký tự dựng sẵn thay vì chữ gốc cộng dấu rời. Nguồn: MDN String.normalize().
• Variable font: một tệp font chứa dải độ đậm hoặc các trục biến thể khác. Nguồn: MDN Variable fonts guide.

9. Tìm hiểu thêm

• Google Fonts CSS API (css2): cú pháp chọn weight, dải trục và tham số display.
• Best practices for fonts trên web.dev: preconnect, preload, tự host, font-display, size-adjust.
• Understanding WCAG 1.4.12 Text Spacing của W3C.

10. Câu hỏi thường gặp

PDL Digital đào tạo đội ngũ làm web và marketing dùng AI trong thiết kế, viết nội dung và tối ưu website tiếng Việt. Xem trang đào tạo để chọn khoá phù hợp.