Tương quan phức tạp giữa dấu và khoảng trống trong font Tiếng Việt

Kerning, tracking và leading luôn là vấn đề đau đầu của các type designer. Bởi tương quan giữa khoảng âm (khoảng trống) và khoảng dương (chữ) rất quan trọng và nó ảnh hướng lớn tới thẩm mỹ của font chữ. Việc căn chỉnh khoảng trống này không thể chỉ dừng lại ở việc giãn cho đủ rộng để các ký tự không bị chạm vào nhau. Mà chúng cần tìm được một khoảng cách thích hợp để đảm bảo cả độ dễ đọc lẫn thẩm mỹ của font chữ.

Xem thêm: Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ    

Và khi chúng ta xét trong trường hợp của font Tiếng Việt, việc căn chỉnh khoảng cách này càng trở nên phức tạp hơn. Với bộ dấu gồm cả dấu chữ và dấu giọng, thiết kế font Tiếng Việt có thể gặp nhiều vấn đề như:

• Ảnh hưởng tới khoảng cách dòng
• Ảnh hưởng tới khoảng cách khi bắt cặp với các chữ cái khác
• Một số trường hợp sẽ phải lựa chọn giữa tính dễ đọc và thẩm mỹ của font

=> Thiết kế UI: Những yếu tố cơ bản trong Typography những "tay mơ" cần biết    

Chữ cái có móc: ư, ơ trong font Tiếng Việt

Vấn đề chính của ư và ơ là kerning. Trong trường hợp khi nó bắt cặp với những chữ cái như n, m, u, t phía sau, móc của chúng có thể chạm vào stem hoặc ear của chữ cái sau. Đặc biệt là khi font chữ đó là font có chân, chân của n, m, u càng khiến việc kerning trở nên khó khăn.

Có hai hướng giải quyết. Thứ nhất, chúng ta có thể điều chỉnh thiết kế sao cho dấu móc và chân chữ có thể tối ưu được khoảng cách kerning. Hoặc chúng ta phải điều chỉnh khoảng cách ấy rộng hơn so với các cặp tương tự của u và o. Tuy nhiên khoảng cách này không được rộng hơn quá nhiều, tránh để tổng thể font bị lỏng lẻo.

Nếu xét riêng về ơ, vì có cấu trúc là đường tròn nên vị trí trục tung (trục dọc) của dấu móc sẽ lệch sang trái, giúp chữ được gọn hơn và dễ kerning hơn so với chữ ư.

Dù khác cấu trúc nhưng, thiết kế của dấu móc trong cả hai chữ vẫn phải giống nhau, đồng thời vị trí của chúng trên trục hoành (trục ngang) cũng nên tương đồng. Dấu móc này khi đặt vị tró cao hơn (hình trái) chữ sẽ dễ kerning nhưng khó đặt dấu giọng, khó leading. Ngược lại, khi nó đặt ở vị trí thấp hơn sẽ dễ đặt dấu giọng và leading hơn, nhưng nó sẽ khó kerning hơn.

Mốt số designer giải quyết vấn đề này bằng cách biến tấu hoặc xoay dấu móc. Tuy nhiên, nó chỉ có thể ứng dụng cho font display.

Với ư và ơ, khi có một khoảng âm bên phải (móc) việc đặt dấu giọng cần xem xét sao cho có sự cân bằng cả khi chữ cái đứng một mình lẫn khi ghép cặp với chữ cái khác.

Chữ có mũ: Â, â, Ê, ê, Ô, ô trong font Tiếng Việt

Vấn đề lớn nhất của nhóm có mũ đó là khi được thêm dấu giọng chữ sẽ trở thành 2 tầng dấu và nó sẽ ảnh hưởng tới khoảng cách dòng (leading). Khi có 2 tầng dấu, khoảng cách dòng của font buộc phải rộng hơn. Bởi nếu khoảng cách quá nhỏ sẽ khiến dấu dính với dòng trên, đặc biệt là khi dòng trên có những chữ như p, g, y.

Trong trường hợp không thể điều chỉnh khoảng cách, chúng ta sẽ phải điều chỉnh thiết kế và vị trí của font chữ. Với thiết kế chúng ta có thể giảm độ dầy nét để dấu không còn chiếm nhiều không gian. Tuy nhiên, không phải bộ font nào cũng có thể đi với dấu nét mảnh. Bởi vậy chúng ta sẽ cần điều chỉnh vị trí của dấu sao cho tối ưu được không gian giữa hai dòng.

Cụ thể hơn chúng ta sẽ phải điều chỉnh vị trí của dấu giọng, bởi vị trí dấu mũ cần đi theo trục chữ (axis). Chúng ta có ba vị trí có thể đặt dấu giọng là: trái, phải và đỉnh.

Đối với dấu ngã, hầu hết các trường hợp cũng sẽ được đặt theo trục chữ. Bởi nếu đặt bên trái sẽ không đúng với chiều tay viết chữ. Còn đăt bên phải sẽ có thể khiến dấu bị dính vào chữ phía sau. Một số trường hợp với font all caps, nó vẫn được đặt bên phải để làm khối chữ nhìn chắc chắn hơn, đồng thời, tránh ảnh hưởng tới khoảng cách dòng.

Trong khi đó, dấu hỏi có chiều rộng hẹp hơn dấu ngã nên nó thường được đặt bên phải của dấu mũ. Dù vậy, vẫn có thể đặt nó tại đỉnh để chữ được cân bằng hơn, đảm bảo về thẩm mỹ hơn, tuy nhiên vị trí này không tối ưu cho leading. Ngược lại, khi đặt nó bên phải, leading được tối ưu nhưng chữ lại kém cân bằng.

Tương tự với dấu sắc và dấu huyền, chúng sẽ tối ưu hơn nếu đặt bên phải dấu mũ. Một số font chữ, dấu huyền được đặt bên phải, tuy nhiên dấu sắc không bao giờ đặt ở vị trí này. Nguyên nhân vẫn là do ngược với chiều tay viết, gây mất tự nhiên.

Ngoài ra, vị trí dấu còn phụ thuộc vào độ cao của ascender. Đối với font có ascender cao, dấu sẽ có nhiều không gian hơn và ngược lại, ascender thấp dấu sẽ có ít không gian hơn. 

Bên cạnh đó, kerning cũng là một vấn đề đối với nhóm â, ê, ô khi có thêm dấu giọng. Việc kerning cần đảm bảo tính dễ đọc, tránh để dấu dính với những chữ như đ hay t khi bắt cặp.

Một số font chữ, hình dạng dấu khác nhau khi có 1 tầng dấu chuyển thành 2 tầng dấu. Việc này nhằm tối ưu leading, tuy nhiên, nó sẽ ảnh hưởng tới thẩm mỹ của font chữ.

Xem thêm: Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt    

Chữ có mũ ngược: Ă, ă trong font Tiếng Việt

Tương tư như dấu mũ, dấu mũ ngược cũng gặp vấn đề về leading khi thêm dấu giọng. Tuy nhiên, khác với dấu mũ, cấu trúc của dấu mũ ngược có có hai đỉnh kèm không gian trống ở giữa. Điều này khiến cho các dấu giọng khi đi kèm dấu mũ ngược buộc phải đặt ở đỉnh.

Trong trường hợp muốn tối ưu leading của những cặp dấu này, chúng ta buộc phải thay điều chỉnh thiết kế chữ. Nhưng khi xem xét vấn đề này, nó sẽ lại liên quan tới thiết kế của các cặp dấu đi với dấu mũ. Dù dấu giọng khi đi với dấu mũ và khi đi với dấu mũ ngược có thể khác nhau, tuy nhiên chúng ta vẫn phải đảm bảo tính đồng bộ để thiết kế font được hài hòa.

Chữ có gạch ngang: Đ, đ trong font Tiếng Việt

Cấu trúc của đ tương tự như d, chỉ có thêm gạch ngang (ear). Thường gạch ngang này cũng sẽ được thiết kế với vị trí thiên về bên trái với chữ in thường và thiên về phải với in hoa. Vậy nên đ không gây nhiều vấn đề về kerning.

Vấn đề chỉ xảy ra khi nó bắt cặp với các chữ có dấu. Bởi phần gạch ngang ấy cũng sẽ lấn một phần diện tích khoảng trống, trong trường hợp chữ cái bên cạnh có hai tầng dấu, đ có thể dính với dấu giọng của chữ bên cạnh. Đó cũng là lý do nên hạn chế đặt dấu bên trái. Ví dụ với từ “đồng”, nếu dấu huyền ở bên trái sẽ làm khoảng trống giữa đ và ô rối mắt.