Tỷ lệ font chữ trong thiết kế web

Đứng trên góc độ nhà thiết kế web, chúng ta mong muốn trí sáng tạo được bay xa và muốn dấu ấn cá nhân hiển thị rõ trên sản phẩm web của mình. Font chữ là một trong những mảnh đất màu mỡ để thể hiện sự sáng tạo của bản thân. Tôi hoàn toàn đồng ý với quan điểm đó khi thiết kế một sản phẩm web mang tính chất cá nhân hoặc một sản phẩm web đặc biệt với người dùng hướng đến cũng đặc biệt.
Còn một sản phẩm web hướng đến số lượng người dùng đông đảo, phục vụ lợi ích mong muốn của khách hàng. Thì thiết kế web không còn là những gì cá nhân nhà thiết kế muốn, mà là về những gì người dùng mong muốn và lợi ích đạt được cho khách hàng.

Theo cuộc khảo sát trong năm 2005 của tạp chí Smashingmagazine. Có đến 3/2 người tham gia khảo sát phàn nàn về kích thước chữ hiển thị trên web quá nhỏ gây khó khăn khi đọc.

Rất nhiều cá nhân và tổ chức chuyên sâu về trải nghiệm người dùng đã nghiên cứu và mổ xẻ để tìm ra đáp án cho việc sử dụng font chữ tốt nhất cho trải nghiệm của người dùng.

Và chúng ta đã có đáp án từ sự đồng quan điểm chung của rất nhiều nhà nghiên cứu về đáp án cho font chữ. Tôi đã tổng hợp các kiến thức theo tôi là cần thiết và có thể sử dụng được ngay trong bài viết này.

Font chữ nội dung có kích thước 16px, tại sao?

16px là kích thước font chữ hiển thị mặc định của các nhà sản xuất trình duyệt đề xuất ban đầu. Con số 16px nghe có vẻ lớn so với các con số quen thuộc 14px và 13px, nhưng khi đứng dưới góc độ người dùng và trải nghiệm đọc nó trên một trang web. Bạn sẽ nhận ra lý do tại sao các nhà sản xuất trình duyệt chọn 16px là kích thước văn bản mặc định.

16px hiển thị trên màn hình máy tính đến khoảng cách của người đọc tương tự so với tỷ lệ font chữ trong sách in đến khoảng cách của người cầm sách. Tạo sự thoải mái một cách tự nhiên nhất cho người dùng.

print-v-screen-cropped-500x156
So sánh font chữ 16px trên màn hình máy tính và font chữ của sách giấy.

Áp dụng tỷ lệ vàng cho sử dụng font chữ

Một sản phẩm web hiệu quả trước tiên không phải là “đẹp” hay đầy màu sắc mà điều trước tiên là rõ ràng và trực quan. Tuy nhiên làm thế nào để có một giải pháp đạt được sự rõ ràng và trực quan thực sự.

Có nhiều cách tiếp cận của designer khi sử dụng lưới, hay dựa vào sự tham khảo từ các design đẹp trên diễn đàn thiết kế, hoặc dựa vào thẩm mỹ, kinh nghiệm của bản thân… Tuy nhiên để có một sự chắc chắn thay vì cảm tính về hiệu quả khi sử dụng phương án designer đề ra cho việc sử dụng font chữ cho người dùng cảm nhận được sự trật tự, hài hoà và cân bằng. Chúng ta có một giải pháp đó là – Tỷ lệ vàng.

Sau khi nghiên cứu và lấy số liệu từ các tạp chí thiết kế. Tôi đã tìm ra con số và cách sử dụng font chữ kích thước 16px áp dụng tỷ lệ vàng cho thiết kế web như sau.

Kích thước font chữ
Nội dung: 16px
Nội dung phụ: 13px
Tiêu đề: 26px
Tiêu đề phụ: 20px
Tiêu đề lớn: 42px

Áp dụng vào font chữ 16px và độ dài chiều ngang của dòng

Khi áp dụng tỷ lệ vàng, khoảng cách dòng chịu sự ảnh hưởng của kích thước font chữ và độ dài chiều ngang của dòng. Chúng ta gặp những trường hợp khoảng cách dòng của tiêu đề trên banner hẹp hơn so với khoảng cách dòng của nội dung.

Từ đó ta tính được kích thước font/ Khoảng cách dòng:

Nội dung: 16px/ 26
Nội dung phụ: 13px/ 21
Tiêu đề: 26px/ 38
Tiêu đề phụ: 20px/ 31
Tiêu đề lớn: 42px/ 57

(kích thước font/ Khoảng cách dòng)

* Khoảng cách dòng phụ thuộc vào kích thước font và độ dài chiều ngang dòng. Nên khi độ dài chiều ngang dòng thay đổi, khoảng cách dòng cũng thay đổi theo.


BÀI VIẾT CỦA HOANG BIN, DỰA TRÊN KIẾN THỨC VÀ HÌNH ẢNH TỔNG HỢP TỪ PEARSONIFIED, SMASHINGMAGAZINE.

banner-hoang-bean

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s