Kích cỡ chữ quan trọng thế nào trong UI Design?

‍

Typography, hay Kiểu chữ, là nghệ thuật sắp xếp các chữ cái và văn bản sao cho bản sao dễ đọc, rõ ràng và hấp dẫn trực quan đối với người đọc. Một UI/UX Designer sẽ phải để tâm đến rất nhiều điều về Typography khi thiết kế sản phẩm web/app của mình, như nên chọn các Typeface nào cho vừa đẹp mắt vừa phù hợp, xem xét kĩ về tính rõ ràng và khả năng đọc của chúng, v..v. Vậy còn kích cỡ chữ thì sao? Nghe có vẻ chỉ là một khía cạnh nho nhỏ và đơn giản thôi, nhưng không hề nha!

1. Kích cỡ chữ tạo nên sự phân cấp

Phân cấp là nguyên tắc sắp xếp các yếu tố để thể hiện thứ tự quan trọng của chúng. Sự phân cấp trong thiết kế đóng vai trò vô cùng quan trọng, giúp người dùng nhanh chóng nhận biết và tiếp thu những thông tin được ưu tiên, hay đơn giản là để phân biệt các phần thông tin khác nhau.

Kích cỡ chữ khác nhau chắc chắn sẽ thu hút sự chú ý khác nhau, chữ càng to càng rõ thì sẽ càng dễ "đập vào mắt" người đọc. Trong một bản thiết kế UI, Typography sẽ được sắp xếp theo hệ thống cấp bậc như Tiêu đề lớn (Title) - Tiêu đề (Headline) - Body Text (Nội dung) - Subhead (Tiêu đề phụ) - Caption (Chú thích)... Bên cạnh việc sử dụng các Typeface khác nhau hoặc bôi đậm, in nghiêng để phân cấp, chúng ta thường cho thông tin có cấp bậc cao, quan trọng nhất có kích cỡ lớn nhất, còn thông tin ít được ưu tiên hơn sẽ dùng kích cỡ nhỏ hơn.

‍

Tuy nhiên, bạn cần lưu ý rằng trên cùng một giao diện chỉ nên sử dụng tối đa 4 kích cỡ chữ khác nhau, tránh sự phân cấp quá nhiều khiến người đọc rối mắt và khó nhận biết các thông tin có liên quan đến nhau. Thay vì chọn cỡ chữ lớn hơn, bạn có thể in hoa tất cả con chữ để vô hình "phóng to" nội dung đó. Đây cũng là cách thông thường áp dụng cho nội dung các Nút (Button) để làm nổi bật chúng mà không phải tăng kích cỡ!

2. Kích cỡ chữ phù hợp tương ứng với từng màn hình

Đã có ai mà không từng phải chật vật hay cảm thấy ức chế chỉ vì nhiều khi kích cỡ chữ trên web quá nhỏ, nhìn nhoè cả mắt, hay kích thước nút trên mobile app siêu mini, bấm chai cả tay? Hay bạn nghĩ việc chuyển giao diện thiết kế của mình từ màn hình này sang màn hình khác chỉ cần chỉnh lại độ co dãn, sắp xếp các phần tử, thì bạn đã lầm. Một UI/UX Designer luôn phải để ý xem kích thước chữ phù hợp với từng kích cỡ màn hình sẽ khác nhau ra sao.

Rất nhiều cá nhân cũng như tổ chức chuyên về UI/UX phải nghiên cứu kĩ lưỡng, tỉ mỉ về trải nghiệm người dùng để đưa ra đáp án chung cho kích thước chữ hiển thị tốt nhất. Đối với thiết kế web, kích thước chữ phù hợp cho Tiêu đề sẽ là 36px (Tiêu đề lớn 48px), cho Nội dung sẽ là 18px (Nội dung phụ 13px). Còn đối với thiết kế mobile app, kích thước chữ phù hợp cho Tiêu đề sẽ là 26px (Tiêu đề lớn 32px), cho Nội dung sẽ là 16px (Nội dung phụ 11-12px), hoặc kích cỡ. Hơn nữa, có thể bạn chưa biết kích thước chữ 16px cũng chính là kích cỡ chữ thường được sử dụng trong việc in sách. Kích cỡ này sẽ làm cho người dùng cảm thấy thoải mái, không gây tình trạng mỏi mắt nếu có sử dụng điện thoại lâu.

‍

Màn hình đăng nhập UI Web & App - UpLabs

‍

3. Đừng xem nhẹ các khoảng cách

Kích cỡ chữ là một vấn đề lớn, sử dụng các khoảng cách phù hợp với kích cỡ chữ đó cũng là một vấn đề lớn không kém.

Khoảng cách dòng sẽ phụ thuộc vào kích cỡ chữ và tỷ lệ thuận với độ dài chiều ngang của dòng. Khi chữ có kích cỡ nhỏ, chúng ta nên để khoảng cách dòng thoải mái hơn chút cho người dùng dễ đọc và đỡ rối mắt. Còn đối với kích cỡ chữ lớn, khoảng cách dòng thu hẹp lại sẽ là lựa chọn tốt hơn, tránh cảm giác bị trống trải. Dễ thấy, nhiều trường hợp khoảng cách dòng của tiêu đề hẹp hơn hẳn so với khoảng cách dòng của phần nội dung. Khoảng cách giữa các đoạn văn và giữa các chữ cái cũng không phải ngoại lệ. Thông thường, khoảng cách dòng phù hợp sẽ chiếm gấp 1,5 lần so với kích cỡ chữ.

‍

Khoảng cách giữa các đoạn văn và giữa các chữ cái cũng không phải ngoại lệ. Khoảng cách giữa các đoạn văn gấp 2 lần kích cỡ chữ, còn khoảng cách giữa các chữ cái gấp 0,12 lần kích cỡ chữ. Tuy nhiên, bạn không nên điều chỉnh tỷ lệ giữa các ký tự hay kéo ký tự theo nhiều hướng khác nhau với mục đích thay đổi khoảng cách giữa các chữ cái.

Tổng hợp bởi đội ngũ Capi Demy. 

Nếu bạn có câu hỏi nào đừng ngần ngại kết nối với đội ngũ Capi Demy nhé, chúng mình luôn ở đây và làm điểm tựa vững chắc cho các bạn!

Thông tin liên hệ tư vấn: 

Fanpage: Capi Demy

Email: capidemy@gmail.com

Website:

Capidemy.com

Địa chỉ:

Cơ sở 1 HN: Tầng 6, số 35 Tô Vĩnh Diện, Khương Trung, Thanh Xuân, Hà Nội

Cơ sở 2 HN: Tầng 2 số 2 ngách 28, ngõ 93, Hoàng Văn Thái, Thanh Xuân, Hà Nội.

‍