10 font chữ thường dùng cho Website

by

Trong thiết kế website, 90% nhân tố đánh giá giao diện đến từ hình ảnh và font chữ bạn sử dụng. Có rất nhiều font chữ từ đơn giản đến uốn lượn bắt mắt. Tuy nhiên, cũng không nhiều website sử dụng font đẹp lạ vì lo sợ tình trạng “bể font”, “mất chữ” ở một số màn hình thiết bị. Ngoài ra, với việc làm Website sử dụng tiếng Việt có dấu thì không nên dùng các font chữ lạ vì sẽ có hiện tưởng bể font, nghĩa là chữ thì đẹp chữ thì xấu.

Để đảm bảo font chữ hiển thị đúng ở hầu hết hoặc tất cả các thiết bị, bạn nên sử dụng các font chữ được dùng phổ biến trên các hệ điều hành để đảm bảo Website hiển thị tốt. Bài viết này cung cấp cho bạn 10 font chữ phổ biến nhất khi thiết kế giao diện Web.

1. Arial

Arial được xem font tiêu chuẩn khi thiết kế web và được sử dụng rất phổ biến trong nhóm font sans serif (không có móc cong ở các chữ cái). Font Arial thường được lựa chọn để thay thế các font khác trên các thiết bị Windows.

Thiết kế Web bằng WordPress – WebinWP
Thiết kế Web bằng WordPress – WebinWP

2. Helvetica

Helvetica sử dụng kiểu chữ sans-serif phổ biến và được phát triển năm 1957 bởi nhà thiết kế Thụy Điển Max Miedinger. Font chữ cũng có chiều cao x (x-height), giúp dễ đọc hơn ở khi ở kích thước nhỏ và khoảng cách giữa các ký tự khá gần.

Thiết kế Web bằng WordPress – WebinWP
Thiết kế Web bằng WordPress – WebinWP

Các phiên bản font chữ Helvetica dành cho các thứ tiếng như Latin, Cyrillic, Hebrew, Hy, Nhật, Hàn, Hindi, Urdu, Khmer, và Việt Nam.

3. Times New Roman

Times New Roman không phải giới thiệu nhiều khi mà nó nằm trong nhóm font chữ phổ biến nhất trên các thiết bị Windows. Hầu hết những ai mới học soạn thảo văn bản (Word) đều đã tiếp xúc với font chữ này. Font Times New Roman phù hợp với trang tài liệu, báo chí,… và font chữ này cũng hỗ trợ tiếng Việt.

Thiết kế Web bằng WordPress – WebinWP
Thiết kế Web bằng WordPress – WebinWP

4. Courier New

Courier New là font tương tự như Times New Roman là một biến thể của các kiểu cổ điển khác. Font này được xem là một font chữ đơn cách.

Thiết kế Web bằng WordPress – WebinWP
Thiết kế Web bằng WordPress – WebinWP

5. Verdana

Verdana là font chữ thật sự dành cho vì có dạng sans serif đơn giản và kích thước lớn. Các ký tự của font thường kéo dài, khiến dễ đọc trên mạng. Font này còn được dùng làm menu (chính, phụ) với kích thước trung bình, nhỏ.

Thiết kế Web bằng WordPress – WebinWP
Thiết kế Web bằng WordPress – WebinWP

6. Georgia

Font Georgia tương tự Verdana theo kích thước và độ lớn (với ký tự lớn hơn so với các font cùng kích thước). Vì vậy, font là lựa chọn tuyệt vời trong các trường hợp nhất định, nên tránh ghép đôi font này với các font khác (như Times New Roman) vì có thể font Georgia luôn trông có vẻ to hơn.

Thiết kế Web bằng WordPress – WebinWP
Thiết kế Web bằng WordPress – WebinWP

7. Tahoma

Font Tahoma cũng nằm trong nhóm font thông dụng, với kiểu chữ chữ đẹp, rõ ràng. Font Tahoma rất đa năng, có thể dùng làm menu, tiêu đề chính, phụ, và nội dung bài viết.

Thiết kế Web bằng WordPress – WebinWP
Thiết kế Web bằng WordPress – WebinWP

8. Calibri

Font chữ này được xem là font chữ mặc định trong chương trình soạn thảo Microsoft Word, vì vậy nó rất phù hợp với nội dung văn bản và cũng được dùng trong Web với kích thước từ 12 pt trở lên.

Thiết kế Web bằng WordPress – WebinWP
Thiết kế Web bằng WordPress – WebinWP

9. Garamond

Garamond là font dùng trong các trường học theo phong cách vào thế kỷ 16 ở Paris. Phiên bản mới được phát triển và tích hợp sẵn trên hầu hết thiết bị Windows. Tuy nhiên, nhược điểm font này là khả năng hỗ trợ tiếng Việt không tốt, những vần có 2 dấu (như ấ, ậ, ắ,…) đều bị lỗi hiển thị.

Thiết kế Web bằng WordPress – WebinWP
Thiết kế Web bằng WordPress – WebinWP

10. Bookman

Bookman (hay Bookman Old Style) là 1 font xuất sắc khác để dành cho làm tiêu đề vì có khả năng đọc được dễ dàng ở kích thước nhỏ.

Thiết kế Web bằng WordPress – WebinWP
Thiết kế Web bằng WordPress – WebinWP

Một mẹo thường thấy để tránh “bể font” là người ta sử dụng thuộc tính font-family với nhiều font cách nhau bằng dấu phẩy. Cách này để phòng trường hợp một thiết bị thiếu font thì sẽ sử dụng font tiếp theo theo độ ưu tiên từ trái sang phải. Chẳng hạn, ví dụ sau dùng nhiều font 1 lúc:

1<span style="font-size:20pt;font-family:Arial, Tahoma, Calibri">Thiết kế Web bằng WordPress – WebinWP</span>

Trong đoạn mã trên, nếu lỡ như thiết bị không có font Bookman thì nó tự động chuyển sang dùng font Tahoma.

div>

You may also like

Bình chọn

avatar