Typography scale cho tiếng Việt — đừng copy Inter, đây là cách build hệ riêng

Thiết kế typography cho tiếng Việt luôn là nỗi ác mộng với nhiều designer. Tiếng Việt có hệ thống dấu thanh (sắc, huyền, hỏi, ngã, nặng) phức tạp và các nguyên âm có dấu phụ (ă, â, ê, ô, ơ, ư). Khi dùng các font nước ngoài, dấu tiếng Việt thường bị đè lên chữ hoặc bị méo mó, thậm chí bị lỗi ô vuông.

1. Vấn đề: Font chữ quốc tế lỗi diacritics tiếng Việt

Đa số font được thiết kế bởi người phương Tây chỉ chú trọng đến bảng chữ cái Latin cơ bản. Khi gõ tiếng Việt, hệ thống sẽ tự động fallback sang font hệ thống cho các ký tự có dấu, tạo ra sự lệch lạc khó chịu.

Hệ thống dấu tiếng Việt cần khoảng không gian rộng hơn theo chiều dọc. Nếu line-height đặt quá thấp, các dấu như dấu sắc, hỏi, ngã sẽ bị cắt cụt (clipping).

2. Phân tích 12 font Google và pick winner

Sau khi test kỹ khả năng hiển thị tiếng Việt trên mobile, em đề xuất 3 font chữ xuất sắc nhất cho sản phẩm số VN:

• Be Vietnam Pro: Được thiết kế chuyên biệt cho tiếng Việt. Dấu phụ cực kỳ cân đối, không bị dính vào thân chữ.
• Sora: Rất phù hợp cho tiêu đề (headings). Sora mang phong cách hình học cứng cáp và hiện đại.
• IBM Plex Sans: Đa dụng, trung tính, dễ đọc ở kích thước nhỏ (body text).