Bạn thấy một mẫu website rất đẹp, tiêu đề dùng kiểu chữ mảnh, sang trọng. Nhưng khi thay bằng tên cửa hàng tiếng Việt, chữ “Ư”, “ỗ”, “ặ” bỗng to nhỏ khác nhau, dấu nằm lệch như bị dán vào. Đó là lỗi hay gặp nhất khi chọn font chữ tiếng Việt cho website: font gốc không có đủ chữ có dấu, trình duyệt phải mượn font khác để hiển thị. Bài này giúp bạn tránh lỗi đó và chọn font dễ đọc cho khách.

Vì sao chữ tiếng Việt hay bị lỗi dấu?

Tiếng Việt có rất nhiều chữ cái mang dấu, có chữ mang hai dấu chồng lên nhau như “ẫ”, “ổ”, “ặ”. Một font chỉ được làm cho tiếng Anh sẽ không có những ký tự này. Khi gặp chữ thiếu, trình duyệt tự lấy chữ đó từ một font khác có sẵn trên máy, nên mới có chuyện vài chữ trong một từ trông khác hẳn phần còn lại.

Nguyên nhân thứ hai: kiểu gõ dấu

Ngay cả với font tốt, dấu vẫn có thể lệch nếu văn bản được gõ theo kiểu Unicode tổ hợp (dấu là một ký tự riêng đứng sau chữ cái) hoặc chép từ tài liệu cũ dùng bảng mã khác. Cách xử lý: trước khi dán nội dung lên website, chuyển văn bản sang Unicode dựng sẵn bằng công cụ chuyển mã có trong bộ gõ (ví dụ chức năng chuyển mã của Unikey), và đặt bộ gõ ở chế độ Unicode dựng sẵn.

Thử font bằng một câu nhiều dấu

So sánh font chữ tiếng Việt trên website: font thiếu chữ có dấu bị đổi kiểu, lệch dòng và font hỗ trợ đủ tiếng Việt hiển thị đều nét
Minh họa của WebCut. Khung trên mô phỏng lỗi khi font thiếu chữ có dấu; khung dưới dùng font Be Vietnam Pro.

Đừng thử font bằng tên cửa hàng ngắn hay chữ không dấu. Hãy gõ một câu có đủ các chữ khó:

  • Các chữ riêng của tiếng Việt: ư, ơ, đ, ă, â, ê, ô.
  • Chữ có hai dấu: ẫ, ổ, ặ, ữ, ỡ, ỷ.
  • Cùng câu đó ở dạng in đậm, in nghiêng, CHỮ HOA. Nhiều font có bản thường đủ dấu nhưng bản đậm hoặc nghiêng lại thiếu.

Ví dụ câu thử: “Ưu đãi tuần lễ Quảng Ngãi: giảm phí giao, tặng kẹo gương, mạch nha”. Xem trên cả máy tính và điện thoại. Chữ hoa có dấu chồng như “Ổ”, “Ẫ” cần khoảng cách dòng đủ rộng, nếu không dấu sẽ chạm vào dòng phía trên.

Lọc font hỗ trợ tiếng Việt

Thư viện Google Fonts cho phép lọc theo ngôn ngữ Vietnamese, giúp loại bớt font không hỗ trợ. Một số font được dùng nhiều cho website tiếng Việt và có hỗ trợ tiếng Việt: Be Vietnam Pro, Roboto, Inter, Noto Sans, Montserrat. Dù vậy, vẫn nên tự thử bằng câu nhiều dấu như trên, vì mức độ hoàn thiện của từng kiểu đậm nhạt khác nhau. Nhiều font trên Google Fonts dùng giấy phép mở như SIL Open Font License; với font mua hoặc tải ở nơi khác, hãy kiểm tra giấy phép có cho dùng trên website không.

Chọn bao nhiêu font và dùng thế nào?

Một website doanh nghiệp nhỏ chỉ cần một, nhiều nhất hai font:

  • Một font cho cả trang: chọn font không chân, rõ nét, có đủ kiểu thường, đậm vừa, đậm. Đơn giản và an toàn.
  • Hai font: một font cho tiêu đề (có thể có chân hoặc có cá tính hơn), một font dễ đọc cho nội dung. Không nên quá hai.

Mỗi font, mỗi độ đậm là một tệp trình duyệt phải tải. Dùng quá nhiều sẽ làm trang chậm trên điện thoại, nhất là với mạng di động. Chỉ tải những độ đậm thật sự dùng, thường là thường, đậm vừa và đậm.

Font viết tay, font thư pháp

Có thể dùng cho tên thương hiệu hoặc một câu khẩu hiệu ngắn, nhưng không dùng cho đoạn văn, giá, số điện thoại. Font viết tay thiếu dấu tiếng Việt là chuyện rất thường gặp, nên càng phải thử kỹ. Nếu chỉ cần một dòng chữ cách điệu, có thể làm thành ảnh logo thay vì dùng font.

Cỡ chữ và khoảng cách cho người đọc trên điện thoại

  1. Cỡ chữ nội dung: khoảng 16px trở lên trên điện thoại. Chữ nhỏ hơn bắt khách phải phóng to.
  2. Khoảng cách dòng: khoảng 1,5 đến 1,7 lần cỡ chữ cho đoạn văn, để dấu tiếng Việt không dính vào dòng trên.
  3. Độ dài dòng: trên máy tính, không để một dòng chữ kéo dài hết màn hình; cột chữ vừa phải đọc đỡ mỏi mắt.
  4. Màu chữ: chữ tối trên nền sáng; tránh chữ xám nhạt trên nền trắng chỉ vì trông “sang”.

Chữ trong ảnh: banner, bảng giá, menu

Chữ nằm trong ảnh không bị lỗi font trên máy khách, nhưng lại có nhược điểm khác: Google khó đọc, khách không chép được số điện thoại, và muốn sửa giá phải làm lại ảnh. Giá, số điện thoại, địa chỉ nên là chữ thật trên trang. Nếu vẫn làm banner có chữ, hãy dùng cùng font với website để nhìn đồng bộ, và kiểm tra dấu kỹ trước khi xuất ảnh.

Website đang lỗi dấu thì sửa thế nào?

Nếu chỉ vài chỗ lệch, thường là do nội dung dán từ nơi khác: chuyển mã về Unicode dựng sẵn rồi dán lại. Nếu lỗi ở mọi tiêu đề, nhiều khả năng font đang dùng thiếu tiếng Việt, cần đổi font trong giao diện; đây là phần việc của dịch vụ nâng cấp giao diện website. Muốn xem font hiển thị thế nào trên các bố cục khác nhau, bạn có thể mở thử các mẫu trong kho demo của WebCut trên điện thoại. Doanh nghiệp ở Bình Sơn và các nơi khác trong tỉnh có thể xem thêm về đơn vị làm web ở Quảng Ngãi.

Website của bạn đang bị lệch dấu tiếng Việt? Nhắn Zalo 0947805184 hoặc gọi 0947588971, gửi đường link và ảnh chụp chỗ bị lỗi.

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

Font có chân hay không chân dễ đọc hơn trên web?

Trên màn hình điện thoại, font không chân thường rõ hơn ở cỡ nhỏ. Font có chân hợp cho tiêu đề hoặc bài đọc dài nếu đủ lớn.

Tôi thích một font nhưng nó thiếu tiếng Việt, có cách nào không?

Chỉ nên dùng nó trong ảnh logo hoặc chữ không dấu. Với nội dung, hãy chọn font gần giống mà hỗ trợ đủ tiếng Việt.

Đổi font có làm mất nội dung website không?

Không. Font chỉ thay đổi cách hiển thị; nội dung, bài viết vẫn giữ nguyên.