Cách Typography cứu rỗi UXUI và thoát cảnh thiết kế rẻ tiền

Bạn đã bao giờ hoàn thiện một bản thiết kế trên Figma, màu sắc lung linh, bố cục chuẩn chỉnh nhưng nhìn đi nhìn lại vẫn thấy nó... hơi "phèn"? Thủ phạm giấu mặt thường xuyên nhất trong các giao diện kém sang chính là nghệ thuật xếp chữ, hay còn gọi là Typography.

Rất nhiều bạn mới làm UXUI Design chỉ chăm chăm đi tìm tải font chữ cho đẹp mà quên mất trải nghiệm đọc của người dùng. Một hệ thống Typography tốt không chỉ giúp giao diện nhìn đắt tiền hơn mà còn điều hướng mắt người xem cực kỳ hiệu quả.

Hôm nay, mình sẽ chỉ cho bạn vài mẹo thực chiến để lột xác text trong dự án của bạn ngay lập tức.

Phân cấp thị giác: Dừng ngay việc dùng một size chữ cho tất cả

Mắt người dùng trên môi trường số rất lười. Họ thường không đọc từng chữ, họ chỉ "quét" (scan) qua trang web để tìm thứ mình cần. Nếu tiêu đề (Heading) và nội dung chính (Body) của bạn nhìn na ná nhau, họ sẽ bị ngợp và bỏ đi ngay lập tức.

Bí quyết ở đây là tạo ra sự tương phản cực mạnh giữa các lớp thông tin. Bạn có thể tăng kích thước, nhưng tinh tế nhất là kết hợp Font Weight (độ dày) và màu sắc. Ví dụ: Tiêu đề dùng font dày màu đen tuyền, văn bản phụ dùng font mỏng màu xám nhạt.

Nhưng nếu phân cấp tốt rồi mà chữ vẫn có cảm giác rối rắm thì sao? Chắc chắn bạn đã bỏ quên một thuộc tính cực kỳ quan trọng dưới đây.

Line-height: Cho các dòng chữ "không gian để thở"

Khoảng cách giữa các dòng (line-height) là yếu tố sống còn của Typography trong lập trình web và thiết kế app. Nếu xếp quá sát, các dòng chữ sẽ dính vào nhau và trở thành một khối đen kịt gây nhức mắt.

Nguyên tắc vàng: Đối với các đoạn văn bản dài (body text), hãy set line-height ở mức 140% - 160% (hoặc 1.4 - 1.6 trong CSS) để mắt dễ lia sang dòng mới. Còn với các Heading cỡ lớn, hãy ép khoảng cách này lại quanh mức 110% - 120% để tránh cảm giác rời rạc giữa các từ.

Nếu bạn muốn đọc các tài liệu kỹ thuật chuẩn chỉ về cách các trình duyệt render khoảng cách dòng, MDN Web Docs về line-height là một nguồn cực kỳ đáng tin cậy để ngâm cứu.

Khoảng cách dòng chuẩn rồi, nhưng lỡ một dòng lại kéo dài miên man từ mép trái sang mép phải màn hình thì phải làm sao?

Giới hạn độ dài dòng: Đừng bắt mắt người dùng "chạy marathon"

Một lỗi cực kỳ phổ biến của các bạn mới làm web là để đoạn văn bản chạy tràn màn hình. Mắt người dùng phải lia một quãng đường quá dài để đọc từ đầu dòng đến cuối dòng, rất dễ dẫn đến hiện tượng đọc nhầm lại dòng cũ.

Con số lý tưởng cho một dòng văn bản dễ đọc là từ 45 đến 75 ký tự (bao gồm cả khoảng trắng). Trong CSS, bạn có thể dễ dàng kiểm soát điều này bằng đơn vị ch (character).

p.body-text {
  max-width: 65ch;
  line-height: 1.5;
  color: #334155;
}

Khi bạn kết hợp thuộc tính CSS này cùng kiến thức Cách Figma Auto Layout giúp bạn "cân" mọi loại màn hình và thoát cảnh kéo pixel thủ công, bạn sẽ có một giao diện responsive hoàn hảo mà chữ vẫn luôn nằm gọn gàng trong tầm mắt.

Vậy chốt lại, làm sao để quản lý cả đống quy tắc này cho toàn bộ dự án mà không bị loạn?

Hệ thống hóa Text Styles từ ngày đầu tiên

Đừng bao giờ bôi đen từng dòng và chỉnh size thủ công lặp đi lặp lại. Hãy thiết lập sẵn một bộ Text Styles ngay khi bạn mở file Figma mới lên.

• Quy định rõ ràng H1, H2, H3 dành cho những trường hợp nào.
• Tạo sẵn biến cho màu sắc của chữ: Primary, Secondary, hay Disabled text.
• Giữ số lượng Font Family ở mức tối đa là 2 (một font nổi bật cho heading, một font dễ đọc cho body).

Chỉ cần làm chủ được khoảng cách, độ dày và màu sắc, những dòng text vô tri đã có thể tự "kể chuyện" và dẫn dắt người dùng một cách tinh tế. Một thiết kế xịn thực chất bắt đầu từ những tiểu tiết nhỏ nhất như con chữ.

Thế nhưng, nếu bạn đã chọn được font chữ hoàn hảo rồi mà khi mang lên web lại khiến tốc độ tải trang chậm như rùa vì file font quá nặng thì sao? Có lẽ chúng ta sẽ cần bàn đến nghệ thuật tối ưu Web Font Performance ở một bài viết khác thôi!