Cơ bản về typography cho web

Từ ngày chuyển sang dùng Ubuntu, tôi mới có dịp ngắm các website dưới 1 hệ điều hành khác Windows. Từ đó cũng thấy 1 số điểm về thiết kế cũng không còn được giữ nguyên, trong đó có typography. Vấn đề này thấy ít được các web master (web designer) người Việt chia sẻ, nên tôi mạo muội viết bài này. Chủ yếu các vấn đề nói trong bài là cơ bản, được tổng hợp từ 1 số website tiếng Anh. Do kiến thức của tôi về thiết kế còn thiếu nhiều nên rất mong bạn đọc cho ý kiến đóng góp :)

***

Typography là gì?

Typography dịch ra có nghĩa là kiểu in, cách trình bày bản in. Trong thiết kế web nó ám chỉ việc lựa chọn, sử dụng và điều chỉnh các yếu tố liên quan đến chữ viết (như font chữ, màu sắc, khoảng cách giữa các từ, các chữ, các hàng, ...) nhằm tạo 1 sự thoải mái và tiện lợi nhất cho người đọc.

Trước đây, người ta (có tôi) thường nghĩ rằng typography chỉ là việc chọn font chữ cho phù hợp, như việc hiển thị đúng tiếng Việt có dấu chẳng hạn. Nhưng như bạn sẽ thấy dưới đây, nó không hoàn toàn đơn giản như thế.

Các vấn đề cơ bản với typography

1. Font chữ:

Chúng ta bắt đầu bằng cái quen thuộc nhất, font chữ. Font chữ tạm chia làm 2 nhóm chính: các font "an toàn" và "không an toàn". Sở dĩ chia vậy là vì mỗi hệ điều hành lại có những font riêng của nó, thường thì chúng không trùng nhau, nên cách hiển thị cũng khác nhau. Các font an toàn hiển thị tốt trên nhiều hệ điều hành, còn không an toàn thì không đảm bảo.

Font an toàn bao gồm nhiều font, phổ biến như: Arial, Verdana, Times, Georgia, Courier New. Chúng được chia vào thành 3 "họ" chính là sans-serif (gồm các font chữ in không có các "râu ria" ở cuối nét như Arial, Verdana, Tahoma), serif (các font chữ in có "râu ria" ở cuối nét, thường thấy trên sách báo giấy như Times New Roman, Georgia) và monospace (các font dạng máy in, thường dùng để hiển thị code). Các font an toàn này hiển thị tốt trên các trình duyệt và hệ điều hành phổ biến với các chữ cái tiếng Việt.

Các font không an toàn thì nhiều hơn, nhưng có 2 bất lợi: 1 là thích hợp với tiếng Anh do hiển thị các ngôn ngữ khác không đúng, 2 là 1 vài hệ điều hành không có. Cho nên rất ít khi nó được dùng. Và nếu muốn dùng, người ta thường dùng nó để tạo ra các chữ trong ảnh, rồi dán ảnh đó vào web.

Để đảm bảo rằng font mình dùng có được hỗ trợ trong hệ điều hành của người dùng, người ta nhóm 1 số font cùng loại vào 1 nhóm, gọi là font-family để khai báo trong thuộc tính CSS, VD như dưới đây:


Trong khai báo này thì Arial là font của Windows, Helvetica là font của Mac, còn sans-serif là font chung. Như vậy nếu người dùng Windows, họ sẽ thấy font hiển thị là Arial, người dùng Mac sẽ thấy là Helvetica, còn nếu bạn dùng 1 hệ điều hành nào khác không có 2 font đó thì nó sẽ lấy font sans-serif chung ra áp dụng.

Thông thường, các "họ nhà font" này được khai báo với Windows và Mac, mặc dù Linux cũng đang vươn lên chiếm nhiều thị phần. Tuy vậy Linux dường như không có font đặc trưng như Windows hay Mac, có lẽ vì có nhiều distro quá, nhưng nó vẫn hỗ trợ tốt các font đó nhờ vào dạng font chung.

Bạn có thể tham khảo thêm danh sách 1 số "họ nhà font" được khai báo sẵn ở website này.

Riêng bản thân tôi thấy font Verdana hiển thị khá xấu trong Ubuntu, nên tôi thay hoàn toàn nó bằng Arial. Font Georgia và Times thì thấy người ta hay dùng làm tiêu đề, trừ 1 số website như báo chí thì dùng nó cho phần nội dung (phần nhiều các website tôi hay đọc đều sử dụng font Arial cho nội dung).

2. Cỡ chữ

Rõ ràng là nếu chữ bé quá người khác rất khó đọc, còn to quá thì làm chiếm không gian website và gây lãng phí. Ở website I love typography, 1 website chuyên về typography, tác giả khuyên rằng phần nội dung chính của website không nên đặt cỡ chữ bé hơn 10px hoặc 12px.

Thông thường, tôi thấy phần nội dung chính nên để 12px hoặc 13px đối với font Arial. Với font Times thì kích cỡ nên lớn hơn, do nó hiển thị nhỏ hơn font Arial với cùng 1 kích cỡ, nên đặt 13px hoặc 14px. Đó là phần nội dung chính, nơi mà người khác tập trung đọc nhất. Còn phần header, sidebar, bạn có thể đặt cỡ chữ to hơn, nhỏ hơn để tạo sự nổi bật, thu hút chú ý.

3. Màu sắc và sự tương phản

Màu sắc cho chữ viết thì có nhiều và khá biến hóa, đặc biệt là cho các thành phần header nhằm thu hút sự cái nhìn của người đọc. Hơn nữa, nó còn phụ thuộc vào màu nền, cho nên nói 1 màu sắc cố định nào đó tốt là rất khó. Thông thường, nó chỉ được xác định thông qua sự tương phản với màu nền mà thôi.

Sự tương phản giữa màu chữ và màu nền nhằm mục đích hiển thị chữ rõ ràng cho người đọc thấy. Sẽ là làm khó người ta nếu bạn cho chữ xám xịt trên nền đen hay mờ mờ trên nền trắng. Nhưng cũng đừng cho tương phản quá như màu chữ đen với mã #000, còn nền trắng toát #fff, hoặc ngược lại. Bởi vì sự tương phản quá này sẽ làm mắt người đọc mỏi, có thể lóa hay nhòe đi nếu người ta đọc nhiều. Bạn có thói quen viết bài dài thì nên chọn 1 sự hài hòa êm dịu hơn. Các cặp màu đối chọi nhau trong đồ họa thì thường cũng có độ tương phản cao, ở trên chỉ là 2 ví dụ đối với đen và trắng, 2 màu phổ biến nhất, nhưng nếu bạn dùng màu khác, bạn nên để ý đến màu đối chọi của nó.

Xem qua 1 số website, tôi thấy họ hay đặt màu chữ #333 trên nền trắng #fff, hoặc #ccc trên nền đen #000. Còn tùy vào vị trí và chức năng của text mà màu được điều chỉnh để tăng, giảm độ tương phản, nhưng chung quy lại thì những nơi có độ tương phản mạnh không nên là những đoạn text dài.

Bạn có xem qua những bức ảnh đánh lừa thị giác không? Hãy thử với bức ảnh này, bạn sẽ thấy sức mạnh của sự tương phản:

4. Khoảng cách

Nếu bạn đọc 1 tờ báo, chủ yếu là chữ, ít hình ảnh, thì việc trình bày đẹp sẽ khiến bạn đọc thoải mái hơn, nếu như các chữ, các hàng sát nhau, bạn đọc được 1 lúc sẽ không muốn đọc nữa vì mắt đã mỏi quá rồi. Hay cũng như bạn vào 1 website nào đó mà thiết kế thừa nhiều khoảng trắng quá thì bạn sẽ thấy các câu, từ dường như xa vời với nhau, chẳng có sự gắn kết nào, chưa kể đến việc bạn phải kéo trang liên tục để đọc được hết.

Khoảng cách với text thường được nhắc đến với 2 yếu tố là khoảng cách giữa các chữ cái và khoảng cách giữa các dòng. Trong đó thì yếu tố thứ 2 có vẻ quan trọng hơn. Khoảng cách giữa các dòng được đặc trưng bởi thuộc tính line-height trong CSS. Cũng ở trang web I love Typography, tác giả khuyên chúng ta không nên đặt chiều cao của dòng (line-height) nhỏ hơn 140% cỡ chữ.

Lướt qua 1 số trang web đẹp, bạn sẽ thấy họ thường đặt line-height: 1.4em hoặc 1.5em. Và hiếm thấy lắm người ta mới đặt line-height là 1 kích thước cố định (dạng 18px) cho phần nội dung chính. Kích thước font chữ thì bạn có thể chọn là dạng cố định (px, pt) hoặc thay đổi (em, %) nhưng thuộc tính line-height thì nên đặt theo em như vậy để đảm bảo rằng nó tính chiều cao 1 cách tỉ lệ với cỡ chữ.

Khoảng cách giữa các chữ tôi xem 1 vài trang thì thấy họ áp dụng chủ yếu cho tiêu đề. Khi mà cỡ chữ lớn, các chữ cái thường rời xa nhau, vì vậy họ hay đặt thuộc tính letter-spacing: -1px.

Một vài công cụ cho typography

Có nhiều công cụ phục vụ cho typography, nhưng ở đây tôi xin nêu vài công cụ chính thường dùng. Danh sách nhiều hơn bạn có thể tham khảo ở bài viết tại Smashing Magazine (chúng có nhiều, nhưng có nhiều cái chức năng trùng lặp và ít cần thiết, chỉ mang tính liệt kê và giới thiệu).

Đầu tiên là bảng font tương ứng giữa Windows và Mac đã nói ở trên. Bạn hãy dùng nó để khai báo trong thuộc tính font-family của CSS.

Muốn kiểm tra, so sánh việc hiển thị giữa các font, kích cỡ khác nhau thì bạn có thể dùng Typetester.

Muốn chuyển đổi giữa các loại cỡ chữ, từ px sang em thì bạn có thể dùng trang web này.

Kết luận

Để có 1 website trình bày dễ đọc, typography chiếm vị trí rất quan trọng, vì thế đừng chủ quan với nó. Hãy xem những trang web có thiết kế typography đẹp để tham khảo, và hãy đọc thử 1 vài file CSS của họ, bạn sẽ thấy họ để 1 phần riêng dành cho khai báo các thuộc tính về typography. Bạn có thể dùng addon Web Developer hoặc Firebug dành cho Firefox để xem trực tiếp luôn các thuộc tính CSS của các đối tượng cần thiết.

Ngoài ra, bài viết này chỉ là cái nhìn cơ bản và sơ lược ban đầu về typography, bạn nên tham khảo thêm 1 số bài viết hay về vấn đề này ở đây:

1. The Principles of Beautiful Typography
2. 10 Examples of Beautiful CSS Typography and how they did it…
3. Five Simple Steps to Better Typography