Typography trong một thiết kế chất lượng tốt sẽ hướng người đọc đến phần nội dung chứ không chỉ thu hút riêng về kiểu chữ.

Kiểu chữ đóng một vai trò quan trọng trong thiết kế giao diện. Khi thiết kế một sản phẩm, chữ viết thường có nhiệm vụ truyền tải rõ ràng ý định và mục đích của ứng dụng đó đến người dùng. Đây là lý do tại sao hiệu quả thiết kế  thường đi đôi với phong cách, sự trình bày và hiển thị chữ viết trong việc cải thiện trải nghiệm người dùng một cách tổng thể. Nói cách khác, tối ưu việc dùng typography cũng là tối ưu trải nghiệm người dùng.

Trong khi tối ưu hóa typography bao gồm tối đa hóa khả năng đọc, khả năng truy cập và cân bằng đồ họa thì tính khả dụng vẫn là yếu tố quan trọng nhất. Cuối cùng, mục đích của việc thiết kế là hướng đến giảm thiểu và xóa bỏ những rào cản giữa giao diện và người dùng. Typography trong một thiết kế chất lượng tốt sẽ hướng người đọc đến phần nội dung chứ không chỉ thu hút riêng về kiểu chữ.

Typography trên thực tế không phải là chọn phông chữ hay tạo phông chữ mà đó là cách định hình văn bản để người dùng có trải nghiệm tối ưu nhất.”- Oliver Reichenstein

Tầm quan trọng của typography trong thiết kế UI là rất rõ ràng. Cải thiện yếu tố chữ viết trong thiết kế nhìn chung sẽ là một bước tiến quan trọng để phát triển thiết kế giao diện. Dưới đây là một vài hướng dẫn giúp bạn cải thiện typography.

Phân cấp để làm rõ ràng hơn trong thiết kế typography

Các nhà thiết kế tạo ra bố cục phù hợp bằng cách thiết lập một hệ thống phân cấp trực quan các yếu tố hiển thị để người dùng dễ dàng nhận biết nội dung. Phân cấp chữ viết trong typography được sử dụng để phân chia nội dung thành những phần khác nhau như tiêu tề, phụ đề, thân bài, chú thích, v.v.

Việc sử dụng hệ thống phân cấp chữ viết sẽ khiến chúng dễ đọc và người dùng có thể nắm được thông tin nhanh nhất. Hơn nữa, cách này trong typography sẽ cho phép bạn làm nổi bật các phần chính để thu hút sự chú ý của người dùng. Kinh nghiệm cho bạn là hãy tăng gấp đôi hoặc một nửa kích thước chữ khi thay đổi kích thước điểm. Ví dụ: nếu bạn sử dụng 32px cho tiêu đề, thì hãy sử dụng 16px cho phần thân để tạo độ tương phản.

Tăng gấp đôi kích thước cho tiêu đề, gấp 3 cho điều đề cấp cao hơn và thậm chí gấp 4 lần cho những thông tin ấn tượng hơn nữa.

Hãy để những con chữ được thở

Khoảng cách chữ, chiều cao dòng và chiều dài dòng là những thứ cơ bản của typography, đó là việc điều chỉnh khoảng trắng giữa các yếu tố văn tự. Việc thiếu khoảng trắng sẽ gây khó đọc vì khoảng cách giữa các chữ quá gần nhau. Ngược lại, quá nhiều khoảng trắng có thể khiến quá trình đọc bị ngắt quãng và mất tập trung. 

Khoảng cách dòng (Line Height)

Có nhiều thuật ngữ typography khác nhau được sử dụng để chỉ khoảng cách giữa các dòng. “Leading” được một vài ứng dụng thiết kế như Photoshop dùng để chỉ việc giãn cách các dòng chữ theo chiều thẳng, trong khi một số ứng dụng khác dùng các thuật ngữ như “line spacing” và “line-height”.

Vì phải phụ thuộc vào thiết kế và kích thước của phông chữ nên sẽ không có con số hoàn hảo cho khoảng cách giữa các dòng với nhau. Theo kinh nghiệm thiết kế typography, 1.5x là quy tắc dãn cách phù hợp khi mới bắt đầu và từ đó người thiết kế có thể từ từ điều chỉnh cho phù hợp. Quy tắc này sẽ hài hòa nhất khi sử dụng với phông chữ 16. 

Khoảng cách ký tự (Letter Spacing)

Không nhiều nhà thiết kế tìm hiểu về khoảng cách giữa các ký tự mặc dù nó có thể tạo nên sự khác biệt giữa typography tốt và xuất sắc vì ảnh hưởng đến khả năng đọc của văn bản. Một vài mẹo typography cơ bản khi giãn cách ký tự:

  • Tăng khoảng cách ký tự khi viết in hoa
  • Giảm khoảng cách ký tự khi tăng cỡ chữ
  • Giảm khoảng cách ký tự khi tăng độ đậm của chữ

Độ dài dòng (Line Length)

Về cơ bản, độ dài dòng chính là độ rộng của khung văn bản. Thiết kế typography để dòng chữ càng ngắn thì càng dễ đọc. Với kích thước màn hình là 1440px và cỡ chữ 16px, độ dài được đề xuất cho mỗi dòng là từ 60 đến 80 ký tự. Đối với màn hình điện thoại, 35 đến 45 ký tự mỗi dòng là phù hợp.

Lưu ý rằng cỡ Medium sẽ không kéo dài khung văn bản ra toàn bộ chiều rộng màn hình.

Chọn phông chữ dựa trên ngữ cảnh

Chọn phông chữ phù hợp với nội dung và khách hàng là vô cùng quan trọng. Trong thiết kế nói chung và typography nói riêng có hàng ngàn các phông chữ khác nhau được sử dụng. Mỗi phông chữ sẽ mang đến một cảm xúc riêng và phong cách riêng trong việc hiển thị. Typography được thể hiện trực quan sẽ ảnh hưởng đến ấn tượng đầu tiên của người dùng.

“Các nhà thiết kế coi chữ là nội dung, những nhà thiết kế vĩ đại sẽ coi chữ là UI”- Cameron Moll

Lựa chọn phông chữ phù hợp sẽ giúp thông điệp được truyền tải  một cách hiệu quả tới khách hàng, trong khi lựa chọn sai sẽ dẫn đến hiểu lầm và nhầm lẫn. 

Sử dụng phông chữ trong cùng một bộ

Việc sử dụng quá nhiều phông chữ trong một thiết kế sẽ làm người dùng bị rối. Nếu bạn không phải một chuyên gia typography trong việc kết hợp các phông chữ và kiểu chữ, phương án an toàn là sử dụng các phông chữ trong cùng một nhóm vì chúng được thiết kế cùng với nhau. Nó cũng giúp quá trình thiết kế typography dễ dàng hơn bằng việc tự động tạo ra những liên kết mạch lạc.

Bạn cũng có thể tìm kiếm những bộ chữ với những lựa chọn khác nhau để đảm bảo rằng bạn có đủ sự lựa chọn cho nhiều mục đích khác nhau. Khi kết hợp phông chữ, bạn phải lên ý tưởng kỹ lưỡng trong việc tạo ra những tương phản giữa cỡ chữ, độ đậm nhạt và chữ in hoa để typography được thể hiện tốt nhất.

Bộ phông chữ cung cấp nhiều đặc tính như in nghiêng, phóng to hoặc thu nhỏ sẽ cho phép sắp xếp sáng tạo hơn nhưng hãy giữ nó ở mức tối thiểu. 

Bộ chữ San Francisco của Apple

Nên căn trái cho văn bản

Trên thế giới, người dùng có xu hướng đọc từ trên xuống dưới và từ trái sang phải. Do vậy, căn trái cho văn bản sẽ giúp việc đọc trở nên dễ dàng hơn. Lề trái nhất quán giúp mắt nhanh chóng định vị được dòng đọc tiếp theo sau khi kết thúc một câu.

Ngoài ra, nên hạn chế việc để dòng cuối cùng của một đoạn chỉ có một chữ như một người góa phụ.

Tóm tắt lại

Trong kỷ nguyên số, nắm vững tiêu chuẩn và kỹ năng typography là một trong những yếu tố tối quan trọng của mỗi designer trong thiết kế giao diện ở bất kỳ lĩnh vực nào.

Bài viết này tổng hợp một vài mẹo nhỏ và chỉ dẫn về typography để giúp bạn khởi đầu dễ dàng hơn với công việc thiết kế UI. Tuy nhiên, muốn học hỏi và nâng cao tay nghề nhanh chóng, bạn vẫn nên thực hành việc thiết kế thường xuyên.

Nguồn: Jeremiah Lam

Nguồn ảnh cover: Ouch.pics

https://uxdesign.cc/7-typography-tips-for-interface-design-b7185e9397c4

Tags:

Trả lời