Hướng dẫn thực tế để chữ dễ đọc trên web hiện đại

Vì sao hầu hết website khó đọc hơn mức nên có

Website trung bình năm 2026 thường đi kèm một bộ font tùy chỉnh, màu thương hiệu được chọn kỹ, và một design system quy định khoảng cách chính xác đến từng pixel. Thế nhưng phần văn bản nội dung—thứ mà đa số khách truy cập thực sự đến để đọc—lại thường chỉ ở 14px, màu xám tương phản thấp, dùng một typeface được tối ưu cho tiêu đề chứ không phải đoạn văn.

Đây không phải là lời chỉ trích designer. Đây là lời nhắc rằng khả năng đọc là một lĩnh vực riêng biệt với thiết kế thị giác, và hai thứ này không phải lúc nào cũng trùng khớp. Một typeface trông sắc nét trong hero section có thể gây mệt khi đọc ở độ dài đoạn văn. Một bảng màu lên ảnh đẹp có thể không đạt kiểm tra độ tương phản. Một bố cục hoạt động tốt trên màn hình 27 inch có thể co lại thành một cột quá hẹp trên mobile.

Tin tốt là: chữ dễ đọc không đòi hỏi bằng cấp về typography. Nó đòi hỏi sự chú ý đến một vài biến số có tác động vượt trội.

Cỡ chữ: lớn hơn bạn nghĩ

Lỗi phổ biến nhất về khả năng đọc trên web là văn bản nội dung quá nhỏ. Designer thường đặt body copy ở 14px hoặc 15px vì nó “trông sạch sẽ” trên desktop, rồi quên rằng một phần đáng kể người đọc đang dùng điện thoại, thường trong điều kiện ánh sáng không lý tưởng.

Một mốc thực tế cho văn bản nội dung năm 2026:

• Desktop: tối thiểu 18px, ưu tiên 20px
• Mobile: tối thiểu 16px, ưu tiên 18px

Những con số này có thể có vẻ lớn nếu bạn quen dùng chữ nhỏ hơn, nhưng chúng phản ánh cách con người thực sự đọc trên màn hình. Chữ lớn hơn giảm mỏi mắt, cải thiện khả năng hiểu, và giúp nội dung dễ tiếp cận hơn với những người đọc bị suy giảm thị lực nhẹ nhưng chưa điều chỉnh cài đặt trình duyệt.

Nếu design system của bạn bắt buộc dùng chữ nhỏ hơn, hãy thử nó trên điện thoại dưới ánh nắng. Nếu bạn phải nheo mắt, nó quá nhỏ.

Line height: cho văn bản không gian để thở

Line height (leading) là khoảng cách dọc giữa các dòng văn bản. Quá chặt, các dòng sẽ nhòe vào nhau. Quá thoáng, mắt sẽ mất mạch khi chuyển giữa các dòng.

Với văn bản nội dung, line height từ 1.5 đến 1.7 phù hợp với hầu hết typeface. Tiêu đề có thể chặt hơn (1.1 đến 1.3), nhưng body copy cần không gian để thở.

CSS:

body {
  font-size: 18px;
  line-height: 1.6;
}

Đây là một trong những cải thiện khả năng đọc dễ nhất. Nếu văn bản nội dung của bạn hiện đang ở line-height: 1.2 hoặc dùng giá trị pixel cố định, hãy thay đổi ngay hôm nay.

Độ dài dòng: ngắn hơn bạn nghĩ

Độ dài dòng tối ưu cho văn bản nội dung là 45 đến 75 ký tự mỗi dòng, khoảng 8 đến 12 từ. Dòng dài hơn 90 ký tự khiến mắt khó quay lại đầu dòng kế tiếp. Dòng ngắn hơn 40 ký tự tạo trải nghiệm đọc bị ngắt quãng, rời rạc.

Hầu hết website làm sai điều này khi để văn bản trải hết toàn bộ chiều rộng viewport, đặc biệt trên desktop. Một màn hình rộng 1920px có thể chứa hơn 150 ký tự mỗi dòng, điều này rất mệt để đọc.

Cách khắc phục là đặt max-width cho vùng chứa văn bản:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

Đơn vị ch chưa được dùng đủ nhiều nhưng rất phù hợp cho việc này: nó co giãn theo cỡ chữ và gần tương ứng với chiều rộng ký tự.

Độ tương phản: không đơn giản là đen trên trắng

WCAG 2.1 quy định tỷ lệ tương phản tối thiểu 4.5:1 cho văn bản nội dung (mức AA) và 7:1 cho khả năng tiếp cận nâng cao (mức AAA). Hầu hết website đạt điều này trên giấy nhưng thất bại trong thực tế vì dùng chữ xám nhạt trên nền trắng.

Những lỗi thường gặp:

• #666666 trên #FFFFFF (4.54:1, vừa đủ đạt)
• #777777 trên #FFFFFF (4.47:1, không đạt)
• Bất kỳ sắc độ nào nhạt hơn #767676 trên nền trắng (không đạt)

Nếu design system của bạn quy định “text-secondary” là màu xám nhạt, hãy kiểm tra nó. WebAIM contrast checker là cách nhanh nhất để xác minh.

Dark mode làm việc này phức tạp hơn. Chữ trắng thuần trên nền đen thuần tạo hiện tượng halation (hiệu ứng phát sáng), khó đọc hơn so với trắng hơi ngả trên nền xám đậm. Một cách tiếp cận tốt hơn:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Lựa chọn typeface: font mặc định tốt hơn bạn nghĩ

Custom web fonts rất phổ biến, nhưng chúng đi kèm đánh đổi. Chúng thêm độ trễ, tăng dung lượng trang, và có thể chặn rendering nếu không được tải cẩn thận. Với văn bản nội dung, system fonts thường là lựa chọn tốt hơn.

Một system font stack vững chắc trong năm 2026:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Cách này cho bạn San Francisco trên macOS/iOS, Segoe UI trên Windows, và Roboto trên Android—tất cả đều là những typeface rất dễ đọc, được thiết kế chuyên nghiệp và tải tức thì.

Nếu bạn dùng custom font cho văn bản nội dung, hãy chọn font được thiết kế cho việc đọc dài, không phải display. Tránh:

• Độ đậm ultra-light hoặc ultra-bold cho body copy
• Biến thể condensed hoặc extended
• Font có x-height thấp (chiều cao của chữ thường)

Hãy thử typeface bạn chọn ở độ dài đoạn văn trước khi cam kết dùng.

Typography responsive: thang chữ fluid

Cỡ chữ cố định không co giãn tốt trên nhiều thiết bị. Một body font 20px thoải mái trên desktop có thể trông quá lớn trên mobile.

Fluid typography dùng clamp() để cỡ chữ co giãn mượt mà giữa một giá trị tối thiểu và tối đa:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Cách này co giãn từ 16px trên màn hình nhỏ đến 20px trên màn hình lớn, với nội suy mượt ở giữa. Nó tinh tế hơn các breakpoint media query và thích nghi với mọi chiều rộng viewport.

Với một type scale đầy đủ (heading, body, chữ nhỏ), các công cụ như Utopia tạo thang fluid dựa trên các ràng buộc của bạn.

Khoảng cách đoạn văn và căn chỉnh văn bản

Hai chi tiết nhỏ nhưng quan trọng:

1. Khoảng cách đoạn văn: Thêm khoảng cách giữa các đoạn (margin-block-end: 1em) hoặc dùng thụt đầu dòng (text-indent: 1.5em), nhưng không dùng cả hai. Hầu hết nội dung web dùng khoảng cách.

1. Căn chỉnh văn bản: Căn trái (hoặc căn phải với ngôn ngữ RTL) hầu như luôn dễ đọc hơn căn đều hai bên, vốn tạo khoảng cách từ không đều nếu không bật hyphenation. Văn bản nội dung căn giữa khó đọc và chỉ nên dành cho các đoạn ngắn.

Kiểm tra khả năng đọc trong thực tế

Khả năng đọc không hoàn toàn khách quan, nhưng bạn có thể kiểm tra:

• Đọc nội dung của chính bạn trên điện thoại trong các điều kiện ánh sáng khác nhau
• Chạy Lighthouse accessibility audit để phát hiện vấn đề về độ tương phản và cỡ chữ (xem cách đọc Lighthouse report mà không hoảng để được hướng dẫn)
• Nhờ một người trên 50 tuổi đọc một trang mà không điều chỉnh cài đặt của họ
• Kiểm tra analytics để xem bounce rate trên các trang nhiều chữ—nếu mọi người rời đi nhanh, khả năng đọc có thể là một yếu tố

Nếu nội dung của bạn khó đọc, mọi người sẽ không đọc nó. Đơn giản vậy thôi.

Trong thực tế trông như thế nào

Một kiểu văn bản nội dung dễ đọc trong năm 2026 có thể trông như sau:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Phần này bao quát cỡ chữ, line height, độ dài dòng, độ tương phản, và khả năng co giãn responsive trong khoảng một tá dòng CSS. Nó không hào nhoáng, nhưng hiệu quả.

Khi nào nên phá vỡ quy tắc

Các hướng dẫn này áp dụng cho văn bản nội dung—những đoạn văn mọi người đọc để lấy thông tin. Tiêu đề, chú thích, nhãn UI, và nội dung marketing có những ràng buộc khác và có thể linh hoạt với các quy tắc này.

Nhưng nếu ai đó đến site của bạn để đọc một bài viết, một trang tài liệu, hoặc một mô tả sản phẩm, chữ dễ đọc không phải là tùy chọn. Đó là kỳ vọng cơ bản.