Typography trong UI design: Cách chọn font và kích thước chữ chuẩn

Khi thiết kế giao diện, nhiều người dành thời gian cho màu sắc, hình ảnh mà quên mất rằng phần lớn thông tin trên màn hình được truyền tải bằng chữ. Một font chữ chọn sai hay một cỡ chữ quá nhỏ cũng đủ khiến người dùng khó chịu và rời đi.

Dưới đây, Capi Demy sẽ giúp bạn hiểu typography trong UI design là gì, cách chọn font chữ dựa trên tâm lý người dùng và cách thiết lập kích thước chữ, khoảng cách chuẩn cho từng thiết kế.

Typography trong UI design là gì?

Typography trong UI design là cách lựa chọn và trình bày chữ trên giao diện sao cho nội dung dễ đọc, rõ ràng và hấp dẫn về mặt thị giác. Typography bao gồm nhiều yếu tố như kiểu chữ (typeface), kích thước chữ, độ đậm, khoảng cách dòng, khoảng cách ký tự, cùng hai tiêu chí quan trọng là legibility (độ dễ nhận diện chữ) và readability (độ dễ đọc cả đoạn văn).

Trong đó, font chữ và kích thước chữ là hai yếu tố bạn cần quyết định đầu tiên. Font chữ quyết định cảm xúc và cá tính của sản phẩm, còn kích thước chữ quyết định người dùng có đọc được và đọc đúng thứ tự ưu tiên hay không.

Typography cũng là cách trực tiếp nhất để áp dụng các nguyên tắc như tính nhất quán và thiết kế tối giản trong 10 Usability Heuristics. Khi kết hợp với một Grid System rõ ràng, chữ trên giao diện sẽ vừa dễ đọc vừa gọn gàng.

Cách chọn font chữ trong UI design theo tâm lý người dùng

Con người có xu hướng gán cảm xúc và tính cách cho mọi thứ họ nhìn thấy, kể cả chữ. Cùng một câu, nhưng đặt ở font khác nhau sẽ khiến sản phẩm trông đáng tin cậy, thân thiện hay sang trọng hơn. Đây là lý do vì sao tâm lý học về font chữ không còn là chuyện riêng của các tập đoàn lớn mà cả doanh nghiệp nhỏ cũng áp dụng.

Trên thực tế, nhiều nghiên cứu cho thấy font chữ có thể thay đổi cách người dùng cảm nhận về sản phẩm và ảnh hưởng đến mức độ ghi nhớ thương hiệu. Dưới đây, Capi Demy sẽ giới thiệu 6 nhóm font phổ biến cùng cảm xúc mà mỗi nhóm mang lại.

1. Serif (Font có chân)

Serif là kiểu chữ tiêu chuẩn của hầu hết sách in cho đến thế kỷ 19, có nguồn gốc từ chữ La Mã cổ và Blackletter. Dù font không chân đầu tiên xuất hiện từ năm 1816, serif vẫn được ưa chuộng đến đầu thế kỷ 20. Lịch sử lâu đời này khiến serif gợi cảm giác bền vững và truyền thống.

• Cảm xúc: ổn định, truyền thống, trí tuệ, trang trọng
• Phù hợp với: công ty luật, ngân hàng, trường đại học, báo chí, thời trang cao cấp
• Logo tiêu biểu: HSBC, Wikipedia, TIME, CBS News, Gap, Dior, Rolex, Vogue, Tiffany & Co.
• Font tham khảo: Baskerville, Addington, Garamond, Caslon

2. Slab Serif (Font chân vùng)

Slab Serif là phiên bản đậm hơn của serif, với phần chân dày gần bằng thân chữ. Kiểu chữ này vẫn giữ được sự ổn định của serif nhưng nổi bật và gân guốc hơn.

• Cảm xúc: bền bỉ, mạnh mẽ, quyền lực, nam tính
• Phù hợp với: hãng sản xuất, điện tử, ô tô
• Logo tiêu biểu: Sony, Honda, Volvo, IBM, Coach
• Font tham khảo: Rockwell, Detroit, Darius, BW Glenn Slab

3. Sans Serif (Font không chân)

Sans Serif ra đời từ đầu thế kỷ 19 nhưng chỉ thực sự phổ biến trong thế kỷ 20, khi các trào lưu thiết kế hiện đại từ bỏ lối chữ truyền thống. Với nét chữ đơn giản, sans serif cũng là lựa chọn phổ biến nhất cho phần nội dung trên giao diện số.

• Cảm xúc: tiến bộ, đơn giản, cởi mở, thân thiện
• Phù hợp với: công ty công nghệ, mạng xã hội, hàng không giá rẻ, logistics, bán lẻ
• Logo tiêu biểu: Nike, Apple, Facebook, Microsoft, Dropbox, Spotify, FedEx, National Geographic
• Font tham khảo: Arial, Modelica, Open Sans

4. Modern Sans Serif (Font không chân hiện đại)

Modern Sans Serif là một nhánh của sans serif, lấy cảm hứng từ phong cách thiết kế hiện đại giữa thế kỷ 20 với các đại diện như Helvetica, Futura, Avenir. Trong phân khúc cao cấp, nếu Dior hay Valentino chọn serif để thể hiện sự thanh lịch, thì Chanel hay Calvin Klein chọn sans serif để tạo hình ảnh tối giản, hướng tới tương lai.

• Cảm xúc: tinh tế, tương lai, sang trọng
• Phù hợp với: thương hiệu thiết kế, kiến trúc, nội thất, thời trang; các biến thể bo tròn còn hợp với thương hiệu dành cho trẻ em
• Logo tiêu biểu: Chanel, Celine, Calvin Klein, Burberry, Netflix, Google, Airbnb
• Font tham khảo: Futura, George Round, Okana

5. Script (Font viết tay)

Script mô phỏng nét chữ viết tay, có thể mang lại cảm giác ngây thơ hoặc mơ màng tùy phong cách. Kiểu chữ này từng rất phổ biến với các thương hiệu những năm 1950, vì vậy Ray-Ban hay Coca-Cola vẫn giữ logo dạng script để kết nối quá khứ với hiện tại.

• Cảm xúc: sáng tạo, vui tươi, trẻ trung, lãng mạn, hoài niệm
• Phù hợp với: thiệp mời, bao bì sản phẩm trẻ em, sô cô la, nước giải khát, quà tặng
• Logo tiêu biểu: Disney, Mailchimp, Ray-Ban, Coca-Cola, Pinterest, Virgin, Kellogg's, Cartier
• Font tham khảo: Moscato Script

6. Display (Font trang trí)

Display là nhóm font khó xếp vào một khuôn mẫu, có thể kết hợp hình ảnh đồ họa với chữ như logo Tour de France hay NASA. Font display chủ yếu dùng cho tiêu đề và logo để tạo hiệu ứng thị giác mạnh, rất hiếm khi dùng cho nội dung chính.

• Cảm xúc: mới lạ, táo bạo, linh hoạt
• Phù hợp với: thương hiệu trẻ, vui nhộn, muốn tạo sự khác biệt
• Logo tiêu biểu: Tour de France, NASA, Lego, Oreo, Greenpeace, MTV
• Font tham khảo: CA Negroni, Cheese Sauce

Lưu ý khi chọn font chữ cho giao diện

Chọn đúng cảm xúc là chưa đủ, font chữ trên UI còn cần dễ đọc trên màn hình. Bạn nên lưu ý:

• Dùng tối đa 2 font chữ cho một sản phẩm: 1 cho tiêu đề, 1 cho nội dung
• Ưu tiên sans serif cho nội dung chính, để script và display cho tiêu đề hoặc logo
• Chọn font hỗ trợ đầy đủ tiếng Việt có dấu
• Chọn font có nhiều độ đậm (Regular, Medium, Bold) để dễ tạo độ phân cấp

Cách chọn kích thước chữ chuẩn trong UI design

Sau khi chọn được font, bước tiếp theo là kích thước chữ. Đây là yếu tố thường bị xem nhẹ vì trông có vẻ nhỏ nhặt, nhưng trên thực tế lại ảnh hưởng rất lớn đến trải nghiệm đọc của người dùng.

1. Kích thước chữ tạo nên sự phân cấp (Hierarchy)

Phân cấp (hierarchy) là cách sắp xếp các thành phần theo mức độ quan trọng, giúp người dùng tìm thấy thông tin ưu tiên và phân biệt các nhóm nội dung khác nhau. Chữ càng lớn, càng rõ thì càng thu hút sự chú ý đầu tiên.

Một thang chữ (type scale) phổ biến trong UI, từ lớn đến nhỏ:

• Large Title
• Headline
• Body Text
• Subhead
• Caption

Ngoài kích thước, bạn có thể tạo phân cấp bằng cách đổi kiểu chữ, in đậm hoặc in nghiêng. Quy tắc chung là nội dung quan trọng nhất có cỡ chữ lớn nhất, nội dung ít quan trọng hơn có cỡ chữ nhỏ hơn.

Ví dụ: thay vì phóng to chữ, bạn có thể viết hoa toàn bộ để làm nổi bật. Đây là cách thường dùng cho nhãn của button.

Lưu ý: không nên dùng quá 4 cỡ chữ khác nhau trên cùng một màn hình để tránh rối mắt.

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

Chữ quá nhỏ trên web hay nút bấm quá nhỏ trên điện thoại đều khiến người dùng mỏi mắt và khó chịu. Vì vậy, kích thước chữ cần được điều chỉnh riêng cho từng màn hình, chứ không chỉ thu phóng hay sắp xếp lại các thành phần.

Dưới đây là kích thước chữ được nhiều chuyên gia UI/UX khuyến nghị:

Trên website:

• Tiêu đề: 36px (Large Title: 48px)
• Nội dung chính: 18px (nội dung phụ: 13px)

Trên ứng dụng di động:

• Tiêu đề: 26px (Large Title: 32px)
• Nội dung chính: 16px (nội dung phụ: 11 - 12px)

Trên thực tế, 16px cũng là cỡ chữ phổ biến trong sách in, giúp giảm mỏi mắt khi dùng điện thoại trong thời gian dài. Nếu thiết kế cho iOS, bạn có thể tham khảo thêm bảng cỡ chữ mặc định trong Apple Human Interface Guidelines – Typography.

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

Khoảng cách phù hợp với kích thước chữ cũng quan trọng không kém bản thân cỡ chữ.

Khoảng cách dòng (Line height): phụ thuộc vào cỡ chữ và tỉ lệ với độ dài dòng. Chữ nhỏ cần khoảng cách dòng rộng hơn để dễ đọc, còn chữ lớn như tiêu đề nên có khoảng cách dòng hẹp hơn để không bị trống. Khoảng cách dòng thường được khuyến nghị là khoảng 1.5 lần cỡ chữ.

Khoảng cách đoạn: khoảng 2 lần cỡ chữ.

Khoảng cách ký tự: khoảng 0.12 lần cỡ chữ. Lưu ý, bạn không nên kéo dãn hay thay đổi tỉ lệ ký tự để điều chỉnh khoảng cách.

Tuy nhiên

Biết đặc điểm từng nhóm font và các thông số kích thước chữ chỉ là bước đầu. Để xây dựng được một hệ thống typography hoàn chỉnh, đúng cá tính thương hiệu và dễ đọc trên mọi thiết kế, bạn cần thực hành qua dự án thực tế.

Khóa học UI Design và Mobile App/Web Design tại Capi Demy sẽ giúp bạn làm được điều đó!

👉 Xem chi tiết khóa học UI Design, Mobile App/Web Design   và đăng ký ngay!

Chưa biết phải bắt đầu từ đâu? Xem bài viết Bắt đầu học UI/UX từ đâu: lộ trình cho người mới học hoặc so sánh các khóa học của Capi Demy.

Kết luận

Typography trong UI design không chỉ là chọn một font chữ đẹp. Font chữ quyết định cảm xúc mà sản phẩm mang lại, còn kích thước chữ và khoảng cách quyết định người dùng có đọc dễ dàng và đúng thứ tự ưu tiên hay không. Khi kết hợp được cả hai, giao diện của bạn sẽ vừa đúng cá tính thương hiệu, vừa dễ đọc trên mọi màn hình.

Hãy thử chọn font và thiết lập thang cỡ chữ cho dự án tiếp theo của bạn theo hướng dẫn trên nhé!

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

Fanpage: Capi Demy

Email: capidemy@gmail.com

Website: Capidemy.com

Địa chỉ: Tầng 6, số 35 Tô Vĩnh Diện, Khương Đình, Hà Nội

‍