Quy tắc sử dụng Typor trong Web - CẦN PHẢI ĐỌC

Thậm chí, với một số Options tương đối hạn chế trong CSS, typography cũng có thể rất khác nhau như khi sử dụng cú pháp CSS thuần túy. Dùng kiểu chữ serif hay sans-sefif? Font chữ lớn hay nhỏ? Chiều cao dòng, khoảng trắng, kích thước font và padding… Có rất nhiều điều cần phải quan tâm.

Để tìm thấy những mẫu thiết kế typography phổ biến trong thiết kế Web hiện đại và giải quyết một số vấn đề phổ biến có liên quan đến typography, chúng tôi đã tiến hành nghiên cứu trên 50 website phổ biến mà trong đó typography được chú trọng hơn rất nhiều (hoặc ít nhất được chú trọng hơn bình thường). Chúng tôi chọn những tờ báo, tạp chí và blog phổ biến cũng như các trang web khác nhau có liên quan đến typography.

Chúng tôi cẩn thận phân tích typography và style của những trang này, tìm các điểm giống và khác nhau. Chúng tôi cũng có một bảng số liệu nghiên cứu hiển thị những giá trị khác nhau của các trang web này (ví dụ tỷ lệ giữa chiều cao và chiều dài của dòng).

Cuối cùng, chúng tôi đã xác định 13 vấn đề chính về typography, các vấn đề có liên quan đến thiết kế typography và cố tìm câu trả lời thông qua nghiên cứu của chúng tôi:

1. Kiểu chữ serif và sans-serif thường được dùng như thế nào trong phần nội dung và headline?
2. Font chữ nào được thường xuyên sử dụng nhất?
3. Kích thước font chữ trung bình là bao nhiêu?
4. Tỷ lệ trung bình giữa kích thước font chữ trong phần headline và phần nội dung?
5. Chiều cao trung bình của dòng trong phần nội dung?
6. Tỷ lệ trung bình giữa chiều cao và kích thước font chữ trong phần nội dung?
7. Tỷ lệ trung bình giữa chiều cao và chiều dài của dòng trong phần nội dung?
8. Khoảng cách trung bình giữa các paragraph?
9. Tỷ lệ trung bình của khoảng cách giữa các paragraph với chiều cao của dòng trong phần nội dung?
10. Đặc trưng của link liên kết?
11. Thường có bao nhiêu ký tự mỗi dòng trong phần nội dung?
12. Link liên kết thường được gạch dưới như thế nào?
13. Sử dụng font chữ thay thế (sIFR…) như thế nào?

Chúng ta sẽ kết thúc bài viết bằng dữ liệu thô mà chúng tôi đã đánh giá và chuẩn bị cho bài viết này. Dựa trên các số liệu thống kê, chúng tôi xác định một số “nguyên tắc ngón tay cái” hữu ích. Lưu ý rằng có thể cân nhắc sử dụng các quy tắc này nhưng không phải lúc nào cũng là cách tốt nhất.

1. Kiểu chữ Serif & Sans-serif

Các designer nên sử dụng font chữ serif hay sans-serif cho phần nội dung luôn là một trong những câu hỏi đã được đưa ra thảo luận và vẫn chưa có câu trả lời về vấn đề thiết lập font chữ trên web. Một số nhà thiết kế muốn dùng font serif để phần tiêu đề trông hấp dẫn hơn (nếu headline ngắn, dùng trang trí cho dòng kết thúc cuối trang). Lý do chính để lựa chọn font chữ serif cho headline của bạn là với kích thước lớn, font serif dễ đọc và trông khá đẹp. Sự tương phản giữa font serif cho headline và font sans-serif cho phần nội dung có thể khá thú vị.

Một số designer thích dùng font serif cho phần nội dung bởi họ tin rằng những dòng trang trí cuối trang có tác dụng hướng dẫn người đọc sang trang tiếp theo, giúp việc scan và đọc thoải mái hơn.

Theo nghiên cứu của chúng tôi, font sans-serif dùng cho phần headline thì phổ biến hơn font serif, dù chúng đã ít phổ biến hơn trong những năm gần đây.

• 60% website sử dụng typography sans-serif cho headline, chủ yếu là Arial, Verdana, Lucida Grande và Helvetica. Trong đó có: CNN, ArsTechnica, Slate, BBC và NewScientist.
• Chỉ 34% website sử dụng typography serif cho phần văn bản. Trong đó có: New York Times, typographya, Time, AIGA và Newsweek.
• Typography serif phổ biến nhất cho headline là Georgia (28%) và Baskerville (4%).
• Typography serif phổ biến nhất cho phần body là Georgia (32%) và Times New Roman (4%).
• Typography san-serif phổ biến nhất cho headline là Arial (28%), Helvetica (20%) và Verdana (8%).
• Typography san-serif phổ biến nhất cho phần nội dung là Arial (28%), Verdana (20%) và Lucida Grande (10%).

2/3 trang web mà chúng tôi khảo sát đều sử dụng font chữ sans-serif cho phần nội dung. Lý do chính có thể là do bất chấp sự phổ biến của kỹ thuật thay thế font chữ, như Cufón, hầu hết các designer đều muốn dùng font của Web, chủ yếu là: Georgia và Times New Roman. Và bởi vì Times New Roman thường làm trang web hiện đại trông lỗi thời, các designer thường dùng Georgia hơn. Các font chữ Sans-serif mang lại sự lựa chọn đa dạng hơn cho Web.

 

2. Typography nào là phổ biến nhất?

Điều đáng ngạc nhiên là bất chấp sự phổ biến của kỹ thuật thay thế font và sự gia tăng các font chữ (như các kiểu font Windows Vista và Mac), những thiết kế trong nghiên cứu của chúng tôi chủ yếu đều sử dụng font chữ web truyền thống, trừ Lucida Grande (chỉ có trên máy Mac), Helvetica và Baskerville.

Ngày nay, các font chữ Arial, Georgie và Verdana được sử dụng cho phần lớn nội dung. Trong nghiên cứu của chúng tôi, khoảng 80% trang web sử dụng một trong 3 font chữ này. Trong số 20% còn lại, Helvetica là font chữ phổ biến và được nhiều designer lựa chọn, ví dụ như Lucida Grande.

Với các lựa chọn sẵn có như Verdana và Arial, một designer không có lý do rằng không xác định kiểu font chữ để mang lại hiệu quả tốt nhất. Bạn có thể tìm hiểu thêm về font trong CSS ở bài viết Better CSS Font Stacks của Nathan Ford và Build Better CSS Font Stacks của CodeStyle..

Verdana ít được sử dụng cho phần headline. Chỉ 10 website sử dụng nó cho phần nội dung, và chỉ 4 website sử dụng cho phần headline. Đó là do khoảng cách giữa các dòng trong kiểu chữ Verdana qua lớn, điều đó sẽ gây khó nếu đọc ở kích thước lớn. Nếu bạn dự tính sử dụng nó cho phần headline, bạn có thể chọn letter-spacing trong CSS. Georgia và Arial là những font chữ phổ biến nhất cho heading.

Cuối cùng, tôi lưu ý rằng tất cả những font chữ thay thế thường được sử dụng cho phần headline hơn là phần nội dung. Các designer sẵn sàng thử nghiệm với tiêu đề của họ hơn là phần nội dung. Nếu bạn muốn một số typography cho thiết kế tiếp theo của bạn, sẽ dễ dàng hơn khi bạn bắt đầu từ phần headline.

  

3. Background sáng hay tối?

Chúng tôi tò mò tìm hiểu tại sao các designer muốn sử dụng background màu sắc tổi. Chúng tôi tìm kiếm các website có background tối và thật ngạc nhiên khi chúng tôi đã tìm thấy rất nhiều trang tương tự.

Background trắng khá đẹp. Tuy nhiên, rất nhiều designer tránh sự tương phản rõ ràng của màu trắng và đen vì thế màu sắc văn bản thường ít đen hơn. Các designer tập trung vào mức độ dễ đọc và tránh việc thử nghiệm với background đầy màu sắc. Tương phản của chữ màu đen trên nền trắng giúp dễ đọc, ít nhất là những trang web này đã làm được.

4. Kích thước font chữ trung bình cho headline

Tất nhiên, sự lựa chọn kích thước font chữ phụ thuộc vào font chữ mà bạn sử dụng trong thiết kế. Trong mọi trường hợp, nghiên cứu của chúng tôi về kích thước font chữ phổ biến nhất dao động từ 18 đến 29 pixel, từ 18 đến 20 pixel và 24 đến 26 pixel là chọn lựa phổ biến nhất.

Nghiên cứu của chúng tôi không xác định con số cụ thể rõ ràng. Kích thước font trung bình cho tiêu đề là 25,6 pixel. Nhưng lưu ý rằng bất kỳ kích thước từ 18 đến 29 pixel đều mang lại hiệu quả, phụ thuộc vào phần heading như thế nào so với thiết kế tổng thể của trang. Tuy nhiên, bạn có thể thử các kích thước lớn hơn, bởi tất cả đều có tiêu đề rất ngắn, chỉ một vài từ.

 

5. Kích thước font trung bình cho phần nội dung

Bạn có nhớ khoảng 7 năm trước đây, khi các thiết kế Web còn chưa phát triển, các yếu tố giúp dễ đọc và nội dung chỉ 8 pixel với font Tahoma không? Kích thước nhỏ đã lỗi thời, các designer hiện đại đều chuyển sang dùng kích thước font lớn. Ví dụ, chúng ta thấy xu hướng dùng kích thước 12 và 14 pixel. Kích thước font phổ biến nhất là 13 pixel (38%) và 14 pixel thì ít phổ biến hơn. Nhìn chung, kích thước trung bình cho nội dung là 13 pixel.

Các chi tiết typography nhỏ nhất cũng cần được lưu ý. Cần lưu ý đến dấu gạch ngang, dấu ngoặc kép, chú thích, tên tác giả, phần giới thiệu văn bản và các paragraph. Thiết lập nhất quán với khoảng trắng, leading và padding.

 

Tỷ lệ kích thước font của heading và nội dung

Để dễ dàng hiểu mối quan hệ giữa tiêu đề và nội dung, chúng tôi chia tiêu đề mỗi trang web bằng kích thước nội dung của nó. Chúng tôi lấy số trung bình giữa các tỷ lệ này và “quy tắc ngón tay cái” cho bạn:

Kích thước font heading ÷ Kích thước font nội dung = 1,96

Theo giá trị chung của các trang web là 1,96. Điều đó có nghĩa là khi bạn lựa chọn kích thước font cho nội dung, bạn sẽ nhân nó với 2 để có kích thước font của phần tiêu đề. Tất nhiên điều này cũng phụ thuộc vào phong cách của bạn, “nguyên tắc ngón tay cái” không phải lúc nào cũng mang lại kích thước tối ưu cho thiết kế cụ thể của bạn Một số lựa chọn truyền thống (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) hoặc chuỗi Fibonacci (ví dụ 16 – 24 – 40 – 64 – 104) để có typography tự nhiên nhất.

6. Chiều cao tối ưu cho phần nội dung

Leading (hay chiều cao dòng) sẽ luôn phụ thuộc vào kích thước font chữ mà bạn lựa chọn và measure (hoặc chiều dài dòng). Nói chung, measure càng dài, leading càng dài. Do đó, trình bày một biểu đồ là lựa chọn phổ biến cho phần leading, sử dụng pixel ở đây không mang lại ý nghĩa gì. Thích hợp hơn là nên dùng đơn vị tương đối, chẳng hạn như em hoặc giá trị phần trăm, xác định mối liên hệ giữa leading và và giữa leading và kích thước font.

Theo nghiên cứu của chúng tôi:

• Chiều cao dòng (pixel) ÷ Kích thước font nội dung = 1.48
  Lưu ý rằng 1.5 là giá trị được khuyến cáo trong những cuốn sách typography cổ điển, nghiên cứu của chúng tôi cũng dựa vào nguyên tắc này. Rất ít các trang web sử dụng con số lớn hơn. Càng tiến gần đến con số 1.48, số lượng các trang web dùng càng ít.
• Chiều dài dòng (pixel) ÷ Chiều cao dòng(pixel) = 27.8
  Chiều dài trung bình của dòng là 538.64 pixel (không bao gồm margin và padding) là khá lớn, lưu ý rằng rất nhiều trang web vẫn sử dụng từ 12 đến 13 pixel cho kích thước font nội dung.
• Khoảng cách giữa các paragraph (pixel) ÷ đường cao = 0.754
  Chúng tôi đã rất ngạc nhiên vì kết quả này. Kết quả cho thấy khoảng cách giữa các paragraph (ví dụ khoảng cách giữa dòng cuối cùng của paragraph này với dòng đầu tiên của paragraph tiếp theo). Khoảng cách chỉ là 75% của hàng đầu tiên. Lý do có thể hàng đầu tiên thường có khoảng cách do descender, và vì hầu hết ký tự đều không có descender, vì vậy có thêm không gian trống dưới dòng.

Vì vậy một khi bạn đã quyết định kích thước font chữ nội dung, hãy nhân giá trị này với 1.5, bạn sẽ có chiều cao tối ưu. Sau đó, bạn có thể nhân giá trị mới này với 27.8 để có chiều dài dòng tối ưu. Lưu ý rằng khi bố trí cũng cần lưu ý đến gutter, margin và padding để phần nội dung trông thoáng hơn.

 

7. Có bao nhiêu ký tự mỗi dòng?

Theo nguyên tắc cổ điển của typography Web, 55 đến 75 là số ký tự tối ưu trên mỗi dòng. Đáng ngạc nhiên là nghiên cứu của chúng tôi cho thấy hầu hết các website có con số cao hơn. Chúng tôi đã đếm xem có bao nhiêu ký tự là phù hợp trên mỗi dòng bằng cách sử dụng kích thước font chữ mặc định của thiết kế. Kết quả là có trung bình 88,74 ký tự trên mỗi dòng là tối đa, một con số rất cao. Tất nhiên đây là số ký tự tối đa khác với số ký tự trung bình mỗi dòng, trung bình khoảng 75 và 85 ký tự mỗi dòng. Tuy nhiên, đây chỉ là khoảng thông thường.

Từ 73 và 90 ký tự mỗi dòng là sự lựa chọn phổ biến của các designer nhưng chúng tôi cũng phát hiện một số ngoại lệ: Monocle (47 ký tự mỗi dòng) và Boxes và Arrows (125 ký tự mỗi dòng). Để biết chính xác số ký tự cho mỗi website, bạn sẽ cần số ký tự trung bình từ nhiều dòng.

Một số phát hiện thú vị

• 46% làm nổi bật link trong phần nội dung website của họ trong khi số còn lại chỉ in đậm hoặc dùng màu sắc.
• 6% trang web sử dụng một số kiểu hình ảnh thay thế cho heading hoặc nội dung (Ví dụ như Monocle, New Yorker, Newsweek).
• 96% website không canh lề cho văn bản.
• Các website có padding trái trung bình 11.7 pixels (kể từ lề trái).

 

Kết luận

Nghiên cứu cho thấy một thiết lập rõ ràng trong thực tế và hướng dẫn để có thể cài đặt trong thiết kế Web. Lưu ý rằng những kết quả này không có tính khoa học, chúng chỉ là hướng dẫn thô:

1. Dùng font chữ serif hoặc sans-serif cho nội dung và heading đều được nhưng font sans-serif vẫn phổ biến hơn.
2. Lựa chọn phổ biến cho các heading là Georgia, Arial và Helvetica.
3. Lựa chọn phổ biến cho nội dung là Georgia, Arial, Verdana và Lucida Grande.
4. Kích thước font chữ phổ biến cho heading là từ 18 đến 29 pixel.
5. Kích thước font chữ phổ biến cho nội dung là từ 12 đến 14 pixel.
6. Kích thước font heading ÷ Kích thước font nội dung = 1,96.
7. Chiều cao dòng (pixel) ÷ kích thước font nội dung = 1.48.
8. Chiều dài (pixel) ÷ đường cao (pixel) = 27.8.
9. Khoảng cách giữa các paragraph (pixel) ÷ đường cao = 0.754.
10. Ký tự tối ưu trên mỗi dòng từ 55 đến 75 nhưng 75 đến 85 ký tự mỗi dòng thì phổ biến hơn
11. Nội dung thường được canh trái, hình ảnh thay thế hiếm khi được sử dụng và có thể làm nổi bật các đường link bằng cách in đậm hoặc dùng màu sắc.

Tất nhiên những nguyên tắc này rất linh hoạt. Chúng là những hướng dẫn thô mà bạn có thể sử dụng để thiết lập cho typography. Mỗi trang web là duy nhất và bạn có thể muốn thay đổi tùy vào mỗi giai đoạn thiết kế cho phù hợp với layout của bạn. Bạn cũng có thể nhìn vào số liệu của nghiên cứuvà xuất để phân tích thêm.

Nguồn Internet | LNT