Màu sắc và font cho web tiếng Việt

01/08/2026 7 phút đọc

Chuỗi thử 'Ệ Ỡ Ầ ữ ỹ ặ' phát hiện được hầu hết lỗi font tiếng Việt trong 10 giây. Bài này chỉ cách kiểm trong DevTools, cách nhúng font đúng và cách chọn cặp màu đọc được.

Một trung tâm tiếng Anh ở Đà Nẵng gửi mình ảnh chụp màn hình, hỏi “sao chữ trên web em nhìn cứ lệch lệch”. Phóng to ra thì thấy: dòng “Học phí ưu đãi tháng 8” có chữ “Học” và “ưu” đúng font, còn chữ “phí” và “đãi” thì mập hơn, chân chữ khác hẳn. Font họ chọn không có ký tự tiếng Việt, nên trình duyệt phải mượn font dự phòng của máy để vẽ mấy chữ có dấu. Mỗi dòng chữ thành hai font trộn lẫn.

Lỗi này rất phổ biến và rất dễ sửa. Xong nó rồi mới tính tới màu.

Lỗi thiếu bộ ký tự tiếng Việt

Font phương Tây thường chỉ có bộ Latin cơ bản (a–z, á à â) và Latin mở rộng. Tiếng Việt cần thêm những ký tự riêng: ă â đ ê ô ơ ư và toàn bộ tổ hợp dấu chồng lên chúng — ế ệ ỗ ữ ợ ằ ẵ. Font thiếu là hỏng theo hai kiểu:

Kiểu 1 — rơi về font dự phòng. Chữ có dấu bị vẽ bằng font khác, thường là Arial hoặc Times của hệ điều hành. Cùng một dòng có hai bề dày, hai chiều cao chữ.

Kiểu 2 — dấu bị cắt cụt. Font có ký tự nhưng dấu vượt quá vùng cao của dòng, gặp line-height chật hoặc khối có overflow: hidden là bị xén ngang đỉnh. Chữ hoa dính nặng nhất: Ầ, Ế, Ỗ, Ữ mất luôn cái nón trên đầu.

Kiểm trong 10 giây

Gõ chuỗi này vào tiêu đề trang trong trang quản trị, hoặc dán vào ô tìm kiếm của web:

Ệ Ỡ Ầ ữ ỹ ặ ĐƯỜNG NẮNG

Nhìn ba thứ: các chữ có cùng bề dày nét không, dấu có bị cụt ở đỉnh không, chữ đ có đúng gạch ngang không. Lệch một cái là font có vấn đề.

Kiểm chắc bằng DevTools

Trên máy tính, mở web, bấm chuột phải vào chữ nghi ngờ → Kiểm tra (Inspect) → sang tab Computed, kéo xuống cuối tới mục Rendered Fonts. Chỗ đó ghi tên font trình duyệt thật sự đã dùng để vẽ đoạn chữ đó.

Bấm vào một chữ không dấu, rồi bấm vào một chữ có dấu. Nếu hai chỗ hiện hai tên font khác nhau — ví dụ chỗ này “Poppins”, chỗ kia “Arial” — thì đúng là font của bạn thiếu ký tự Việt.

Cách sửa

1. Chọn font có bộ ký tự Việt đầy đủ. Vài họ font trên Google Fonts hỗ trợ tiếng Việt tốt, dấu vẽ gọn, không cụt:

Font	Hợp với	Kiểu
Be Vietnam Pro	Mọi ngành, thiết kế riêng cho tiếng Việt	Không chân
Inter	Web bán hàng, giao diện nhiều số	Không chân
Source Sans 3	Trung tâm dạy học, phòng khám	Không chân
Lora	Spa, nhà hàng, tiệm muốn nhã	Có chân
Merriweather	Blog, bài dài	Có chân

Nếu chỉ nhớ được một cái thì nhớ Be Vietnam Pro — nó được làm ra để vẽ dấu tiếng Việt.

2. Khi nhúng phải khai bảng chữ Vietnamese. Trên trang Google Fonts, ở phần chọn kiểu chữ có mục Language / Character sets, tích Vietnamese trước khi chép mã. Nếu tự ghép URL thì thêm &subset=vietnamese. Quên bước này là tải về bản chỉ có Latin, và bạn quay lại đúng lỗi ban đầu.

3. Tự host file woff2 và preload. Tải file .woff2 về đặt trong thư mục web mình, rồi khai trong phần <head>:

<link rel="preload" href="/fonts/be-vietnam-pro-400.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("/fonts/be-vietnam-pro-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0102-0103, U+0110-0111, U+0128-0129,
                 U+0168-0169, U+01A0-01B0, U+1EA0-1EF9, U+20AB;
}

Tự host lợi hai chuyện: bớt một lần kết nối ra máy chủ Google (nhanh hơn, và tốc độ có ảnh hưởng tới đơn hàng), và chữ có mặt ngay lần vẽ đầu nên không bị “nháy chữ” — cảnh chữ hiện bằng font hệ thống rồi nhảy sang font thật. font-display: swap giữ cho chữ luôn đọc được trong lúc font đang tải.

4. Chiều cao dòng phải rộng hơn tiếng Anh. Tiếng Việt có dấu chồng hai tầng (ế, ộ) nên chữ chiếm nhiều chiều cao hơn. Đặt line-height: 1.6 cho đoạn văn, 1.7 nếu chữ nhỏ. Tiêu đề lớn thì 1.25–1.3, đừng để 1.0 — dấu của dòng dưới sẽ đụng chân chữ dòng trên.

5. Hạn chế chữ hoa toàn phần. text-transform: uppercase với tiếng Việt cho ra ĐƯỜNG NẮNG ẤM — dấu đội lên đầu chữ hoa vốn đã cao, rất dễ bị cụt và nhìn chật. Dùng chữ hoa toàn phần cho nhãn ngắn 1–2 từ thôi, đừng dùng cho tiêu đề cả dòng. Muốn tiêu đề mạnh thì tăng độ đậm hoặc cỡ chữ.

Cảnh báo: thử luôn với dấu chấm câu và ký hiệu tiền: 1.990.000đ. Vài font vẽ chữ đ thường rất giống chữ d, khách nhìn giá bị lẫn.

Chọn màu: một màu chính, một màu nhấn

Đừng dùng năm màu. Công thức đủ dùng cho web tiệm:

Một màu chính — dùng cho tiêu đề, thanh điều hướng, viền.
Một màu nhấn — chỉ dùng cho nút hành động chính, không dùng chỗ nào khác. Nút nằm trong màn hình đầu mà cùng màu với năm thứ khác thì nó không còn nổi.
Nền trắng hoặc trắng ngà, chữ gần đen (#1a1a1a dễ đọc hơn đen tuyệt đối #000).

Tương phản tối thiểu 4.5:1

Đây là con số duy nhất cần nhớ. Chữ thường phải có độ tương phản với nền ít nhất 4.5:1; chữ to (từ 24px trở lên) thì 3:1 là đủ. Dưới ngưỡng đó, người lớn tuổi và người xem ngoài nắng sẽ không đọc được — mà khách tiệm nhỏ hay xem web đúng lúc đang đứng ngoài đường.

Kiểm miễn phí: vào webaim.org/resources/contrastchecker, dán mã màu chữ và mã màu nền, nó hiện luôn tỷ số và ghi Pass/Fail.

Màu chữ	Màu nền	Tỷ số	Đạt?
`#1a1a1a`	`#ffffff`	18,9:1	Đạt thoải mái
`#ffffff`	`#c62828` (đỏ đậm)	5,9:1	Đạt
`#ffffff`	`#f5c518` (vàng)	1,7:1	Hỏng — không đọc được
`#1a1a1a`	`#f5c518` (vàng)	12,1:1	Đạt
`#8a8a8a` (xám nhạt)	`#ffffff`	3,0:1	Hỏng với chữ thường

Rút ra hai điều: đừng viết chữ trắng trên nền vàng hay nền xanh lá sáng — hãy dùng chữ đen. Và đừng để chữ mô tả màu xám nhạt cho “nhìn nhẹ nhàng”; nó chỉ nhẹ nhàng trên màn hình đắt tiền trong phòng tối.

Hai thứ nên tránh

Gradient tím–xanh dương. Đây là màu mặc định của gần như mọi công cụ dựng web tự động và mọi ảnh minh họa AI. Khách không gọi tên được cảm giác đó, nhưng họ thấy “trang này giống mấy trang kia”. Tiệm bạn có màu thật: màu biển hiệu, màu bao bì, màu tường quán. Lấy màu đó.

Chữ đè lên ảnh không có lớp phủ. Ảnh có chỗ sáng chỗ tối, chữ trắng sẽ mất tiêu ở vùng sáng. Nếu bắt buộc đặt chữ trên ảnh, phủ một lớp đen mờ 40–50% lên ảnh trước.

Màu theo ngành, nói ngắn

Quán ăn, cà phê: đỏ đất, cam nâu, xanh rêu — màu gợi thèm và hợp ảnh món.
Spa, làm đẹp: xanh ngọc nhạt, be, hồng đất; tránh màu chói.
Nha khoa, phòng khám: xanh dương nhạt và trắng nhiều — sạch, yên tâm.
Gara, cơ khí: xanh navy hoặc xám đậm với một màu nhấn cam.
Nông sản, thực phẩm: xanh lá đậm, nâu, kem.

Chọn xong thì dùng nhất quán ở mọi trang, kể cả trang dịch vụ — vì trang dịch vụ mới là trang lên top và cũng là trang khách đọc lâu nhất.

Việc làm tối nay

Dán chuỗi Ệ Ỡ Ầ ữ ỹ ặ ĐƯỜNG NẮNG vào một tiêu đề trên web, xem có lệch font hay cụt dấu không.
Mở DevTools, tab Computed → Rendered Fonts, so một chữ có dấu với một chữ không dấu.
Nếu lệch: đổi sang Be Vietnam Pro và nhớ tích Vietnamese khi lấy mã nhúng.
Đặt line-height: 1.6 cho đoạn văn.
Lấy mã màu chữ và mã màu nền của nút chính, kiểm ở WebAIM Contrast Checker. Dưới 4.5:1 thì đổi.
Tìm chỗ nào đang text-transform: uppercase cả dòng dài, bỏ đi.

Chốt lại

Font và màu không phải chuyện thẩm mỹ riêng của bạn — nó là chuyện khách đọc được hay không, và web nhìn có giống tiệm thật hay giống mẫu dựng sẵn. Riêng với tiếng Việt, chỉ cần kiểm đúng chuỗi ký tự có dấu và đúng tỷ số tương phản là tránh được hai lỗi phổ biến nhất.

Mọi mẫu ở kệ mẫu web của mình đã nhúng sẵn font có bộ ký tự Việt đầy đủ, tự host woff2 và preload, cặp màu đều qua ngưỡng 4.5:1 — bảng giá và thời gian giao xem ở trang bảng giá.

#font tiếng việt
#màu sắc
#thiết kế web