Font hệ thống nào vẽ đủ dấu tiếng Việt?

Sáng nay mình định soát lại kiểu chữ của mảnh vườn cho đàng hoàng, rồi phát hiện bốn tháng qua mình chỉ nhìn nó bằng đúng một trình duyệt.

Mọi con số dưới đây mình đếm trên một máy Mac chạy macOS 26.5, bằng một script nằm ngay trong repo.

English: Which system fonts draw every Vietnamese letter?.

Chữ vỡ trông ra sao

Mảnh vườn chẳng tải web font nào. Mình hứa vậy trong trang dựng vườn: không font CDN, không request tới server người khác. Cái giá của lời hứa đó là chữ Việt trông ra sao hoàn toàn tuỳ font máy bạn sẵn có.

Một font thiếu một chữ thì trình duyệt mượn đúng chữ đó từ font khác, ngay giữa từ. Chữ ngắm có thể ra ng bằng font này, ắ bằng font kia, m lại quay về font đầu. Dấu lệch dòng, nét dày mỏng khác nhau, nhìn như ai lấy kéo cắt dán. Người đọc tiếng Việt thấy liền, dù chẳng gọi tên ra.

Hồi tháng Sáu mình đã dính một lần: font serif đứng đầu danh sách là Iowan Old Style, và chữ ự trên trang nào cũng lệch. Mình sửa bằng cách đổi sang ui-serif, nhìn thấy ổn trên Safari, rồi thôi.

Đếm cho đủ 146 chữ

Lần này mình chẳng muốn nhìn bằng mắt nữa. Tiếng Việt có 12 nguyên âm (a ă â e ê i o ô ơ u ư y), mỗi nguyên âm mang 6 thanh, cộng thêm đ. Vậy là 73 chữ thường, nhân đôi cho chữ hoa thành 146.

Câu hỏi "font này có đủ dấu không" thì để máy trả lời, chẳng cần mắt. Trên macOS, CoreText cho hỏi thẳng từng font: chữ này có glyph không. Script scripts/design/vi-fonts.ts dựng 146 chữ đó, đọc các font trong file CSS của mảnh vườn, hỏi CoreText từng chữ một, rồi in ra font nào thiếu chữ nào. Chạy chừng một giây.

Đây là kết quả trên máy mình:

Palatino thiếu đúng một chữ, mà lại là chữ ớ. Nghe thì nhỏ, nhưng lớn, mới, với, nhớ nằm trên mọi trang. Một font đẹp tới 145/146 vẫn vỡ trong câu đầu tiên bạn viết.

Iowan và Charter thiếu trọn 24 chữ mang móc. Đó chính là cái lỗi tháng Sáu, giờ có số đếm: hai font serif đẹp nhất trên Mac chẳng có ơ và ư. Còn Chalkboard thiếu luôn cả đ, nên một chữ đường thôi cũng vỡ.

Bạn thử trên máy bạn

Mấy dòng dưới đây đặt từng font cho cùng một câu. Máy bạn chẳng có font nào thì dòng đó hiện bằng font mặc định, nên mỗi máy sẽ ra một bảng khác nhau.

Trên Chrome, chữ thiếu móc chẳng mượn font khác mà mất luôn cái móc. Mình mở bảng này bằng Chrome, và trong dòng Iowan, mới hoá thành mối, ướt thành uốt, lớn thành lốn, từng thành tùng. Vậy là chẳng phải chuyện xấu đẹp nữa: người đọc đọc ra một chữ khác hẳn nghĩa. Safari thì mượn glyph từ font khác, chữ lệch kiểu nhưng vẫn đúng.

Đếm đủ chữ cũng chưa chắc vẽ đúng. Theo CoreText, Palatino có chữ ầ. Vậy mà trong dòng Palatino ở trên, cả Safari lẫn Chrome đều vẽ mầm với dấu huyền văng sang bên trái, còn dần thì dấu huyền lẩn mất, đọc ra dân. Có glyph là một chuyện, glyph đặt dấu đúng chỗ là chuyện khác, và script của mình chỉ thấy chuyện đầu.

Chrome chẳng biết ui-serif là gì

Cái mình chẳng ngờ nằm ở chỗ khác. Danh sách font serif của mảnh vườn mở đầu bằng ui-serif, nghĩa là "font serif của hệ điều hành". Trên Safari đó là New York, đủ cả 146 chữ, nhìn rất xinh.

Chrome 156 lờ hẳn ui-serif, và cả ui-monospace. Mình dựng một trang thử, đặt font-family: ui-serif, monospace, mở bằng Chrome chạy headless. Chữ ra kiểu máy đánh chữ, tức là Chrome bỏ qua ui-serif rồi rơi thẳng xuống monospace.

Vậy là ai đọc mảnh vườn bằng Chrome trên Mac thì đi tiếp xuống danh sách: Palatino Linotype (font Windows, Mac chẳng có), rồi Times New Roman. Bốn tháng nay họ đọc chữ Times, kiểu chữ của tờ đơn xin nghỉ phép. Đủ dấu, nhưng chẳng giống mảnh vườn chút nào.

Cách sửa chỉ một chữ: thêm Georgia ngay sau Palatino Linotype. Georgia đủ 146/146, Mac và Windows đều có, mà trông ấm hơn Times nhiều. Safari vẫn lấy New York vì ui-serif đứng đầu, Windows vẫn lấy Palatino Linotype như cũ. Chỉ người dùng Chrome trên Mac là đổi, và mình chụp màn hình trước với sau để chắc chắn.

Hai câu mình viết sai hồi tháng Sáu

Đếm xong mình mới thấy hai câu cũ của chính mình sai. Comment trong CSS ghi "Georgia làm rơi dấu chồng", nên mình cố tình loại Georgia ra. Còn ghi chú sửa lỗi thì ghi "Marker Felt thiếu tiếng Việt". Trên máy này cả hai đều đủ 146/146.

Có lẽ hồi đó mình nhìn trang lỗi vì Iowan rồi gom luôn mấy font khác vào cho chắc. Hoặc có lẽ bản Georgia trên macOS đã đổi từ đó tới giờ. Mình chẳng biết bên nào đúng. Bài học thì rõ: một câu "font này lỗi" mà chẳng kèm số đếm thì sống lâu hơn sự thật của nó.

Font viết tay cũng có chuyện. Sau Marker Felt và Chalkboard SE, danh sách dự phòng là Comic Sans MS, mà bản trên Mac chỉ có 54/146. Bài thơ ở trang chủ viết bằng font tay, nên máy nào thiếu hai font Mac kia sẽ thấy bài thơ vỡ gần hết dấu. Mình bỏ Comic Sans, thêm Noteworthy (146/146), rồi cho font tay rơi về font serif. Mất chút nét nghịch, nhưng chữ thì nguyên vẹn.

Chưa biết gì

• Mình chỉ đếm trên một máy Mac. Bản Comic Sans, Cambria hay Georgia trên Windows có thể đủ dấu hơn bản Mac. Mình chưa có máy Windows để hỏi.
• CoreText chỉ trả lời "có glyph hay không", chẳng trả lời "đẹp hay không". Một font có đủ chữ mà dấu đè lên nhau thì script vẫn cho qua.
• Menlo thiếu 46 chữ mà mình vẫn giữ cho code, vì code gần như toàn tiếng Anh và mấy dấu mượn trông khá hoà. Có thể mình sai ở đây.
• Android và Linux mình chưa thử. Noto Serif đủ dấu theo tài liệu, nhưng mình chưa tự đếm.

Nếu bạn mở trang này trên Windows hay điện thoại mà thấy dòng nào trong bảng thử vỡ khác với mình kể, viết cho mình một lá thư bên dưới nha. Mình muốn biết bảng đó trên máy bạn trông ra sao.