Nói luôn kết luận: bài viết dễ đọc không phải là bài được gắn một phông chữ thời thượng. Đó là bài mà vừa mở ra đã biết ngay nói về gì, giữa chừng bị phân tâm vẫn quay lại được, phóng to chữ lên cũng không vỡ, và đổi sang ngôn ngữ nào cũng đọc tự nhiên. Người đọc không đến để "chinh phục" bài viết của bạn. Chính bài viết mới là bên phải chỉ đường.
Tóm tắt trước trong 3 dòng:
- Điểm xuất phát thực tế dễ dùng là chữ nội dung khoảng 17-18px, giãn dòng 1,7-1,9 và độ rộng dòng không quá dài. Đây không phải quy luật áp dụng cho mọi trường hợp.
- Với WCAG 2.2 (chuẩn quốc tế về khả năng tiếp cận web), điều quan trọng là không phá vỡ độ tương phản, phóng to chữ 200%, reflow ở 320 CSS px (nội dung tự sắp xếp lại theo bề rộng màn hình), việc ghi đè khoảng cách chữ và thao tác bằng bàn phím. [R1-R8]
- Với 12 ngôn ngữ, đừng dán cùng một đoạn CSS 12 lần. Hãy dùng nền tảng tiếp cận chung rồi điều chỉnh theo từng hệ chữ viết. [R10-R13]
1. Dễ đọc không phải là gu thẩm mỹ, mà là thiết kế 3 lớp
Độ dễ đọc có ít nhất ba lớp: nhìn thấy chữ, theo kịp mạch văn, và thao tác được trên trang. Chữ 18px mà văn bản là một bức tường thì vẫn mệt. Văn bản đơn giản mà nút bấm quá nhỏ thì cũng mệt. Vì vậy, "chỉ sửa cỡ chữ là xong" chẳng khác nào lau bảng tên nhà cho sáng bóng trong khi tháo mất cầu thang.
2. Người đọc không đọc hết ngay từ đầu, nên hãy làm cho bài đọc được ở 4 mức
Trên web, đọc lướt là chuyện bình thường. Vì thế hãy làm bài viết đọc được ở bốn mức: 5 giây = tiêu đề và phần mở đầu, 30 giây = các tiêu đề H2 và chữ in đậm, 3 phút = các ý chính, đọc sâu = toàn văn. Điều này không có nghĩa là chỉ được viết ngắn. Nó có nghĩa là bài dài cũng phải có thật nhiều trạm dừng giữa đường.
Nếu chỉ riêng các H2 đã kể được mạch câu chuyện, đầu mỗi phần có một kết luận nhỏ, và bảng cùng danh sách gạch đầu dòng giúp so sánh nhanh, thì "người đọc hết" và "người chỉ cần đáp án" có thể cùng dùng một trang.
3. Cỡ chữ nội dung nên bắt đầu từ khoảng 17-18px
Không có cỡ tối ưu tuyệt đối cho chữ nội dung trên web. Tuy nhiên, chữ quá nhỏ làm giảm khả năng nhìn rõ, và trong nghiên cứu theo dõi ánh mắt trên các trang web thật, cỡ chữ lớn hơn đi kèm với thời gian dừng mắt ngắn hơn. [R14] Trong thực tế, hãy xuất phát từ 17-18px cho nội dung và dùng các đơn vị dễ phóng to như rem.
Điều quan trọng là "đặt 18px" không có nghĩa là "đã dễ tiếp cận". Tiêu chí Resize Text của WCAG 2.2 AA yêu cầu nội dung và chức năng không bị mất khi phóng to đến 200%. [R3] Nếu người đọc vừa phóng to mà menu biến mất, thì màn hình đầu tiên 18px đẹp đẽ kia chỉ là tấm ảnh kỷ niệm.
4. Giãn dòng, khoảng cách đoạn và độ rộng dòng giúp giảm "kẹt xe chữ"
Giãn dòng khoảng 1,7-1,9 làm giá trị khởi đầu sẽ giúp bài web dài thoáng hơn. Hãy chừa khoảng trắng rõ ràng giữa các đoạn. Nguyên tắc cơ bản là mỗi đoạn một chủ đề, và tránh những khối khổng lồ không xuống dòng lần nào. [R9]
Với chữ Latinh, có nghiên cứu cho thấy độ dài dòng trung bình khoảng 55 ký tự hiệu quả, và trong thực tế 55-70 ký tự là điểm xuất phát dễ dùng. [R15] Tiêu chí Visual Presentation mức AAA của WCAG nêu mức 80 ký tự trở xuống, và 40 ký tự trở xuống đối với CJK (chữ Trung, Nhật, Hàn). [R8] Ở đây cũng vậy, 55 không phải chân lý vũ trụ. Hãy điều chỉnh theo màn hình, ngôn ngữ và cỡ chữ.
Căn đều hai bên dễ làm khoảng trống giữa các từ giãn lung tung. Trên web, căn một bên thường là đủ. [R8]
5. Phông chữ không phải cây đũa thần. Hãy dùng loại đọc bình thường và hiện nhanh
Giữa chữ có chân và không chân không có người thắng tuyệt đối. Trong thí nghiệm có đối chứng, không thấy hiệu ứng chữ có chân ảnh hưởng lớn đến tốc độ đọc. [R16] Hơn nữa, một phân tích tổng hợp năm 2026 không tìm thấy bằng chứng nhất quán rằng các "phông chữ đặc biệt cho chứng khó đọc" như OpenDyslexic cải thiện thành tích đọc so với phông chuẩn. [R17]
Nghĩa là, hỗ trợ người khuyết tật không đồng nghĩa với việc ép dùng phông đặc biệt. Nền tảng là cỡ chữ đủ lớn, khoảng trắng, hình dạng chữ tự nhiên, bộ ký tự đầy đủ, và người dùng có thể phóng to. Nếu ưu tiên phông hệ thống của thiết bị hoặc phông phổ biến của từng ngôn ngữ, bạn không cần tải các web font nặng.
6. Màu nền và độ tương phản: chữ xám nhạt phải trả "thuế phong cách" rất đắt
WCAG 2.2 AA đặt mức tương phản 4,5:1 cho chữ thường và từ 3:1 trở lên cho chữ lớn. [R2] Không cần đặt chữ xám nhạt trên nền trắng chỉ vì "trông sang", rồi gắn debuff cho mắt người đọc.
Nhiều nghiên cứu cho thấy chữ tối trên nền sáng (phân cực dương) có lợi khi soát lỗi và nhìn chữ nhỏ. [R18] Vì thế với độc giả đại chúng, giao diện sáng là mặc định an toàn. Tuy nhiên cũng có người thích chế độ tối, nên vẫn hãy giữ lựa chọn đó. Chưa có bằng chứng đủ mạnh để khẳng định trắng ngà luôn tốt cho sức khỏe hơn trắng tinh.
7. H1, H2, H3 không phải đồ trang trí, mà là biển báo giao thông của bài viết
H1 là chủ đề của trang. H2 là luận điểm lớn. H3 là phần chi tiết bên trong. Đừng giả làm tiêu đề bằng cách in đậm chữ; hãy cho nó ý nghĩa bằng cấu trúc tiêu đề của HTML. Người dùng trình đọc màn hình di chuyển trong trang bằng các tiêu đề, nên tiêu đề vừa là thiết kế thị giác vừa là điều hướng. [R7][R9]
Bài kiểm tra rất đơn giản: chỉ lấy riêng các H2 ra, có còn hiểu được mạch bài không? Nếu không, nhiều khả năng tiêu đề của bạn thuộc loại "nhà máy sản xuất người lạc đường" như "Chương 2", "Tiếp theo" hay "Chi tiết hơn".
8. Chữ đậm, gạch đầu dòng, bảng và hộp kết luận được dùng như "biển báo thông tin"
Chữ đậm dành cho từ quan trọng. Gạch đầu dòng dành cho thông tin song song. Bảng dành cho so sánh. Hộp kết luận là nơi quyết định hạ cánh. Hãy giao vai trò cho từng thứ. Nếu in đậm toàn bộ bài, chẳng khác nào bật 100 đèn cảnh báo cùng lúc, rốt cuộc không đèn nào nổi bật.
Đừng phân biệt liên kết chỉ bằng màu; hãy thêm dấu hiệu khác như gạch chân. Với thông tin quan trọng cũng đừng dừng ở "màu đỏ nên nguy hiểm"; hãy thể hiện ý nghĩa bằng cả chữ hoặc biểu tượng.
9. Hãy coi như độc giả đang ở chế độ "não nghiện dopamine", nhưng đừng tin thuyết con người chỉ tập trung được 8 giây
"Não nghiện dopamine" ở đây không phải thuật ngữ y khoa. Đó là cách gọi đùa về trạng thái xao nhãng của web hiện đại: thông báo → video ngắn → tab khác → quay lại → "nãy mình đọc tới đâu rồi nhỉ?" Đây không phải từ để chửi chung cả một thế hệ hay người khuyết tật.
Giải pháp không phải là biến cả bài thành video ngắn. Đó là đoạn văn ngắn, tiêu đề cụ thể, một kết luận nhỏ cho mỗi phần, mục lục khi cần, và những danh từ riêng giúp khôi phục ngữ cảnh khi người đọc quay lại. Tự động phát, băng chuyền không liên quan và pop-up chiếm màn hình giữa lúc đang đọc giống như ném cái ghế vào sự tập trung của người đọc, nên hãy giảm bớt. [R9]
10. Khả năng tiếp cận cho người khuyết tật phải là trang bị tiêu chuẩn, không phải "chế độ đặc biệt"
Nền tảng là nhắm tới WCAG 2.2 AA. Các mục tiêu tiêu biểu là phóng to chữ 200%, reflow tương đương 320 CSS px không cần cuộn ngang, tương phản 4,5:1, vùng bấm tối thiểu 24×24 CSS px hoặc có khoảng cách đủ, thao tác bằng bàn phím, tiêu điểm nhìn thấy được, và cơ chế bỏ qua phần lặp lại. [R1-R7]
Các giá trị của Text Spacing ("giãn dòng 1,5, khoảng cách sau đoạn 2, khoảng cách chữ 0,12em, khoảng cách từ 0,16em") không phải mệnh lệnh phải đặt CSS ban đầu theo đúng các giá trị đó. Yêu cầu mức AA là: dù người dùng ghi đè khoảng cách bằng các giá trị đó, chữ cũng không chồng lên nhau hay biến mất và chức năng không bị hỏng. [R5]
Trong thực tế, làm các nút chính khoảng 44px sẽ dễ bấm hơn, nhưng chuẩn tối thiểu của WCAG 2.2 AA là 24×24 CSS px, có kèm ngoại lệ. [R6]
11. 12 ngôn ngữ dùng chung một hệ thống thiết kế, nhưng không ép cùng một cách dàn trang
Phần dùng chung là nền tảng: độ tương phản, thứ bậc tiêu đề, phóng to, reflow, khoảng trắng, khả năng thao tác, tên có thể tiếp cận. Phần thay đổi theo ngôn ngữ là phần phụ thuộc hệ chữ viết: phông chữ, ngắt dòng, dấu gạch nối khi ngắt từ, dấu câu và chiều cao dòng. [R10-R13]
Thuộc tính lang cũng quan trọng. Đừng tự ý làm tròn zh-Hans, zh-Hant, pt-BR thành zh hay pt. Đó là manh mối cho trình duyệt, trình đọc thành tiếng, việc ngắt từ và việc chọn phông.
12. Giá trị khởi đầu thực tế theo ngôn ngữ
| Nhóm | Cách nghĩ về giá trị khởi đầu |
|---|---|
| Tiếng Nhật | Bắt đầu từ 17-18px, giãn dòng khoảng 1,8, khoảng 30-40 ký tự mỗi dòng. Không ép giãn thêm khoảng cách chữ. Tôn trọng cách dàn trang tiếng Nhật. [R10] |
| Tiếng Trung giản thể và phồn thể | Tách riêng phông CJK, không phá quy tắc ngắt dòng và dấu câu. Tách zh-Hans và zh-Hant. [R11] |
| Tiếng Hàn | Dùng phông dành cho Hangul, không chèn khoảng cách chữ thiếu tự nhiên. Kiểm tra cách ngắt dòng tiếng Hàn. [R12] |
| Tiếng Thái | Không phá cách ghép chữ đúng và cách ngắt dòng ở ranh giới từ. Chiều cao dòng rộng hơn một chút sẽ an toàn hơn. Đừng dùng word-break: break-all tùy tiện. [R13] |
| Tiếng Việt | Dùng phông có đầy đủ dấu phụ, và đừng cắt mất phần trên, phần dưới của chữ bằng chiều cao cố định. |
| en/es/pt-BR/id/fr/de | Bắt đầu từ khoảng 55-70 ký tự mỗi dòng, và cân nhắc lang đúng cùng hyphens:auto. Kiểm tra hiện tượng tràn, nhất là với các từ ghép dài của tiếng Đức. |
13. Trên điện thoại, không chỉ cần "đọc được" mà còn phải "hiện ra ngay"
Nếu chất đống web font lớn cho cả 12 ngôn ngữ, người đọc đã bỏ đi trước khi chữ kịp hiện ra. web.dev giải thích rằng web font làm chậm FCP/LCP (tốc độ nội dung đầu tiên và nội dung chính xuất hiện) và việc đổi phông có thể gây CLS (xô lệch bố cục). [R19] Cách làm chắc chắn là ưu tiên phông hệ thống cho phần nội dung, còn phông thương hiệu chỉ dùng ở chỗ cần thiết.
Mục tiêu "tốt" hiện nay của Core Web Vitals, ở phân vị thứ 75, là LCP từ 2,5 giây trở xuống, INP từ 200ms trở xuống và CLS từ 0,1 trở xuống. [R20] Một trang mà đang đọc thì quảng cáo hay phông chữ khiến đoạn văn tụt "uỵch" xuống dưới thì giống như "đang lấy ngón tay giữ trang sách mà nhân viên lại dời cái bàn đi".
14. Bài viết được đọc đều đặn luôn có những thứ giống nhau ở cùng một chỗ
Nền tảng để tăng lượt quay lại không phải hiệu ứng hoành tráng, mà là tính dễ đoán. Nếu diện mạo tiêu đề, diện mạo liên kết, mục lục, độ rộng bài, nút đổi ngôn ngữ, kết quả tìm kiếm và vị trí bài liên quan gần như lần nào cũng giống nhau, người đọc sẽ học được cách dùng.
Nếu bạn cung cấp mục thiết lập "Aa" để đổi cỡ chữ, giãn dòng và giao diện, thì lưu lại lựa chọn đó cũng là ý hay. Khả năng tiếp cận không phải là lần nào cũng bảo người ta "xin hãy bật chế độ người khuyết tật", mà là hình thức khó hỏng ngay từ trạng thái ban đầu, và chỉ ai cần mới tự điều chỉnh.
15. "Bài kiểm tra sức chịu đựng của người đọc" không nên làm
Những ví dụ tiêu biểu cần tránh: chữ nội dung cỡ 12px, màu xám nhạt, dòng dài hơn 100 ký tự, căn đều hai bên, đoạn văn chiếm trọn một màn hình, tiêu đề nhảy cấp, in đậm toàn bộ, giao diện chỉ truyền đạt ý nghĩa bằng màu, tự động phát, pop-up khó đóng, biến nội dung thành hình ảnh, địa ngục cuộn ngang khi phóng to, web font khổng lồ và hiệu ứng chuyển động vô nghĩa.
Người đọc không đến để thi xem mình có đủ trí tuệ và thị lực động để đọc hết trang web của bạn hay không.
16. Khi phân vân, hãy bắt đầu từ các giá trị chuẩn này
| Mục | Giá trị khởi đầu thực tế | Ghi chú |
|---|---|---|
| Nội dung | 17-18px | Không phải giá trị tuyệt đối. Hãy cho phép phóng to |
| Giãn dòng nội dung | 1,7-1,9 | Điều chỉnh theo ngôn ngữ và phông |
| Một dòng chữ Latinh | Khoảng 55-70 ký tự | Điểm xuất phát từ nghiên cứu và thực tế. Tránh dòng quá dài [R15] |
| Một dòng CJK | Khoảng 30-40 ký tự | 40 cũng khớp với hướng dẫn Visual Presentation mức AAA của WCAG [R8] |
| H1 | Khoảng 32-40px | Tạo khác biệt rõ với nội dung |
| H2 | Khoảng 25-30px | Chỉ cần H2 cũng hiểu được mạch bài |
| H3 | Khoảng 21-24px | Giữ khác biệt so với H2 |
| Tương phản chữ thường | 4,5:1 trở lên | WCAG 2.2 AA [R2] |
| Chữ lớn | 3:1 trở lên | WCAG 2.2 AA [R2] |
| Vùng bấm | Chuẩn là 24×24 CSS px trở lên | Có ngoại lệ. Trong thực tế cũng nên cân nhắc khoảng 44px [R6] |
| Phóng to chữ | 200% | Không mất nội dung và chức năng [R3] |
| Reflow | 320 CSS px | Về nguyên tắc không cần cuộn hai chiều [R4] |
17. Hãy lập cổng chất lượng. "Chúng tôi sẽ cẩn thận" không phải đảm bảo chất lượng
Nếu bạn vận hành nhà máy bài viết hay CMS (hệ thống quản trị nội dung), đừng giao độ dễ đọc cho trí nhớ của con người. Dùng kiểm tra tĩnh để xem lang, H1, thứ tự tiêu đề, alt của hình, tên có thể tiếp cận và CSS bị cấm, rồi dùng kiểm tra trên trình duyệt thật để xem 320px, phóng to 200%, ghi đè Text Spacing, bàn phím, tiêu điểm và cuộn ngang.
Những gì sửa được an toàn thì có thể tự động sửa, chẳng hạn lang bị thiếu hay việc áp CSS chung. Nhưng các chỉnh sửa làm thay đổi ý nghĩa, như nghĩa của câu, bản dịch hay nội dung alt, thì tuyệt đối không tự bịa ra. Nếu không sửa được thì đánh dấu FAIL và chuyển cho con người. Cổng chất lượng không phải "ông thầy hay giận" mà là chiếc cổng soát vé không cho hàng hỏng ra ngoài.
18. Tổng kết: bài viết hay không bắt người đọc phải thi
Bản chất của bài viết dễ đọc không phải là phóng chữ thật to hay trang trí khoảng trắng cho sành điệu. Đó là biết nên đọc ở đâu, giữa chừng quay lại được, phóng to được, bấm được, nghe đọc được, tự nhiên trong từng ngôn ngữ, và nhanh. Hãy gộp tất cả vào cùng một hệ thống thiết kế.
Nó tự nhiên với người trưởng thành bình thường, và không dễ hỏng với người hay bị phân tâm, thị lực yếu, khó đọc chữ, hoặc dùng bàn phím và công nghệ hỗ trợ. Đó là điều mạnh nhất. Thay vì dựng một "phiên bản dễ tiếp cận" ở phòng riêng, chi bằng mở rộng cửa chính ngay từ đầu.
