Tầm quan trọng của typography trong thiết kế giao diện người dùng (UI)

Không chỉ đảm bảo tính thẩm mỹ cho website, typography còn là yếu tố tác động trực tiếp tới trải nghiệm của người dùng. Vậy vai trò của typography trong thiết kế giao diện người dùng (UI) là gì? Bài viết sau đây của Bizfly sẽ chia sẻ kỹ hơn về vấn đề này.

Vai trò của typography trong thiết kế giao diện người dùng (UI)

Typography có thể hiểu đơn giản là nghệ thuật lựa chọn kiểu chữ, màu sắc và cách căn chỉnh, trình bày để thu hút người dùng, nâng cao độ nhận diện truyền tải các thông điệp của thương hiệu. Và typography trong thiết kế giao diện người dùng (UI) cũng quan trọng không kém.

Khảo sát cho thấy, mỗi thiết kế website có 95% là typography vì thế việc tối ưu yếu tố này cũng chính là tối ưu giao diện. Một số vai trò của typography trong UI có thể kể tới như:

- Giúp nội dung dễ đọc hơn, tăng tỷ lệ tương tác, nâng cao trải nghiệm của người dùng.

- Để lại ấn tượng tốt trong mắt khách hàng.

- Nâng cao nhận diện thương hiệu nhờ lựa chọn kiểu chữ phù hợp, tính phân cấp trên giao diện rõ ràng, có tính nhất quán.

- Typography trong thiết kế giao diện người dùng (UI) còn đảm nhận vai trò giữ chân người đọc. Đa số người dùng có thói quen cuộn một lượt trang web trước khi đọc nội dung. Việc website có hệ thống phân cấp rõ ràng dễ đọc sẽ tạo ấn tượng tốt và giữ họ ở lại trang lâu hơn.

- Giúp nội dung trở nên dễ đọc, thu hút, truyền tải đúng thông điệp mong muốn tránh làm cho người đọc bị xao lãng.

Các yếu tố cơ bản của typography trong thiết kế UI

Khi tối ưu typography trong thiết kế giao diện người dùng (UI) các designer cần nắm rõ những yếu tố sau đây.

Typeface

Typeface là tập hợp các font chữ có cùng kiểu dáng, kích thước. Lựa chọn đúng typeface kết hợp thêm các yếu tố khác của typography sẽ giúp tăng tính dễ đọc, truyền tải thông điệp và thể hiện cá tính của sản phẩm. 

Khi nói tới typeface trong thiết kế UI người ta thường nhắc tới một số cái tên như: Serif, Sans serif, trang trí…

Khoảng cách chữ và dòng

Đây là khoảng cách vật lý giữa hai chữ cái và hai dòng. Để đảm bảo tính liền mạch cho văn bản, khoảng cách giữa các chữ và dòng phải vừa đủ, không quá xa cũng không quá gần.

Trọng lượng, chiều cao và kích thước font chữ

Giao diện website hay văn bản cũng cần đảm bảo tính đồng nhất. Ví dụ như các chữ cái cần có cùng kích thước, độ dày và sử dụng một font chữ.

Khoảng trắng

Đây là khoảng cách giữa các yếu tố trong một thành phần thiết kế. Trong trường hợp whitespace không được cân bằng giao diện website sẽ trở nên lộn xộn và khó đọc.

Căn chỉnh

Căn chỉnh để đảm bảo tất cả các yếu tố như chữ, hình ảnh… duy trì khoảng cách đều nhau. Hầu hết các nhà thiết kế web đều tạo ra một lề để căn chỉnh hoàn hảo cho logo, tiêu đề, biểu ngữ, nội dung chính và các yếu tố khác.

Ngoài ra, họ cũng sẽ hướng đến việc kết nối các văn bản ngẫu nhiên thành một bố cục thống nhất. 

Tính nhất quán

Typography trong thiết kế giao diện người dùng (UI) rất coi trọng tính nhất quán. Đặc biệt là  tất cả các thành phần của trang web đều phải dùng cùng kiểu chữ, font chữ .

Ví dụ, bạn sử dụng font chữ Roboto màu đen trong H2 của bài viết và font chữ Arial trong phần nội dung thì hãy áp dụng quy tắc này cho toàn bộ các bài viết khác. Nếu bạn sử dụng font chữ khác sẽ khiến giao diện trở nên lộn xộn, thiếu tính thẩm mỹ.

Hệ thống phân cấp

Typography trong thiết kế giao diện người dùng (UI) phải tuân theo những nguyên tắc phân cấp nhất định. Hệ thống phân cấp được tạo ra bằng cách điều chỉnh các yếu tố chữ bao gồm kiểu chữ, font, kích thước và màu sắc cũng như liên kết chúng để tạo ra sự tương phản trong thiết kế. Làm tốt điều này sẽ giúp các yếu tố quan trọng nổi bật hơn. 

Hệ thống phân cấp typography trong thiết kế UI

Trong các yếu tố cơ bản của typography trong thiết kế giao diện người dùng (UI), thì hệ thống phân cấp gần như đóng vai trò quan trọng nhất. 

Để tạo ra một hệ thống phân cấp typography sẽ cần đảm bảo một vài yếu tố bao gồm kích thước kiểu chữ, lựa chọn kiểu chữ, độ dày, màu sắc, cách viết hoa, kiểu dáng…

Sự kết hợp của tất cả những yếu tố trên sẽ tạo ra giao diện dễ đọc, thân thiện với người dùng.

Kích thước kiểu chữ

Cách đơn giản nhất để tạo ra hệ thống phân cấp typography là sử dụng cỡ chữ khác nhau cho các thành phần khác nhau của văn bản. Kích thước của cỡ chữ sẽ giảm dần từ tiêu đề cho tới tít phụ và cuối cùng là nội dung, chú thích trong bài.

Một sai lầm khi làm typography trong thiết kế giao diện người dùng (UI) mà nhiều người mắc phải là để cỡ chữ quá nhỏ. Kích thước văn bản tiêu chuẩn trong ấn phẩm in là 12pt. Nhưng trên màn hình, font chữ 12pt có thể gây khó chịu nếu đọc trong thời gian dài.

Bạn hãy cân nhắc sử dụng cỡ chữ từ 14px đến 24px cho nội dung và tăng hoặc giảm dần dựa trên mức độ quan trọng.

Ví dụ, nếu bạn bắt đầu với nội dung văn bản có cỡ chữ 18px thì tiêu đề sẽ là 36px, các tít phụ lần lượt là 30px, tít nhỏ là 24px…

Đa dạng kiểu chữ

Hãy nâng cao hệ thống phân cấp kiểu chữ bằng cách sử dụng hơn một kiểu chữ cho các thành phần trên giao diện để người đọc dễ nhận diện nội dung. Tuy nhiên việc kết hợp cùng lúc nhiều kiểu chữ là thách thức với nhiều nhà thiết kế.

Viết hoa, màu sắc, độ đậm - nhạt và kiểu dáng

• Sử dụng chữ hoa toàn bộ cho tiêu đề sẽ làm cho tiêu đề nổi bật so với văn bản xung quanh. Tuy nhiên, nó có thể khó đọc trong khối văn bản lớn hơn.
• Thay đổi màu sắc của kiểu chữ có thể tác động đáng kể đến giao diện. Ví dụ, bôi đỏ 1 đoạn văn bản sẽ giúp người đọc nhận diện được đây là nội dung quan trọng hơn.
• Độ đậm nhạt của chữ cái cũng là một cách hữu ích để tạo ra hệ thống phân cấp. Chữ được bôi đậm sẽ làm cho văn bản nổi bật hơn. Tuy nhiên, hãy thận trọng khi sử dụng các kiểu chữ này cho các  đoạn văn bản dài vì nó có thể ảnh hưởng đến tính dễ đọc. 

Cách tối ưu typography trong thiết kế giao diện người dùng

Có nhiều quy tắc liên quan tới việc dùng typography trong thiết kế giao diện người dùng. Không có nguyên tắc nào đúng hoàn toàn cho mọi trường hợp. Tuy nhiên, vẫn có những thứ bạn cần lưu ý để đảm bảo typography phù hợp với nội dung, đảm bảo tính dễ đọc.

Không dùng nhiều typeface trong cùng một thiết kế

Dùng nhiều hơn 3 typeface trong một giao diện có thể khiến website trở nên hỗn loạn. Bạn nên giới hạn số font được sử dụng từ 1 tới 3 font. Đảm bảo tính thống nhất trên toàn trang.

Nếu bạn muốn dùng nhiều hơn một font, đảm bảo hai bộ font ấy hỗ trợ lẫn nhau. Ví dụ, Georgia và Verdana có một số đặc điểm chung nên tạo ra sự kết hợp hài hòa. Trong khi, cặp Baskerville và Impact lại tương phản quá mạnh, khiến hai font chữ nhìn không liên quan.

Chọn kích thước font phù hợp

Kích thước font chữ cũng ảnh hướng tới trải nghiệm đọc của người dùng: 

• Font chữ quá nhỏ có thể khiến người dùng thấy mệt khi đọc, dễ bỏ qua nhiều thông tin quan trọng nhất là trên giao diện mobile.
• Font quá to cũng khiến người dùng mất tập trung, ảnh hưởng tới phân cấp trên trang.

Một số gợi ý cho bạn khi lựa chọn kích thước font chữ:

• Màn hình máy tính: Dùng 16px hoặc lớn hơn cho body text.
• Với thiết bị iOS: Dùng text không dưới 11 point.
• Với thiết bị Android: Dùng text không dưới 12px, khuyến bị dùng ở 14px.

Căn văn bản bên trái

Đối với typography trong thiết kế giao diện người dùng (UI) bạn nên ưu tiên căn văn bản bên trái để người dùng dễ theo dõi hơn. Khi văn bản được căn trái, mắt chúng ta sẽ biết cần bắt đầu từ đâu và chúng ta cũng dễ để tìm thấy đầu dòng tiếp theo hơn.

Dùng font chữ rõ ràng

Ưu tiên sử dụng những font chữ dễ đọc, tránh dùng các font trang trí hoặc dễ gây nhầm lẫn vì nó gây khó đọc cho người dùng. Ví dụ, nhiều font chữ có chữ “i” và chữ “L”, chữ “n” và chữ “r” nhìn khá giống nhau, dễ nhầm lẫn. 

Giữ khoảng cách dòng hợp lý

Nếu khoảng cách dòng quá nhỏ sẽ khiến mật độ chữ trở nên dày, gây khó đọc. Cần tăng khoảng cách dòng để cải thiện giao diện. Tuy nhiên, việc điều chỉnh này sẽ làm tăng diện tích của cột text. Khoảng cách dòng bắt buộc phải lớn hơn độ cao của chữ. 

Tương phản của văn bản

Bạn nên dùng màu cho văn bản có độ tương phản cao so với nền. Đảm bảo chữ cái hiển thị rõ ràng. Một lỗi thường gặp là dùng màu đen - trắng cho text và nền. Do màu sắc có độ tương phản cao nên nếu đọc trong thời gian dài sẽ dễ gây mỏi mắt.

Vừa rồi là một số thông tin về typography trong thiết kế giao diện người dùng (UI). Mong rằng, qua bài viết này của Bizfly bạn sẽ nắm được cách tối ưu giao diện với typography khi thiết kế website hiệu quả nhất.