Kết nối

10 font chữ Google đẹp nhất áp dụng cho các đoạn văn bản trong thiết kế Website

26.829 lượt xem 
 Cập nhật lần cuối: 24/10/2023 lúc 21:14:24
Thể loại: Thiết kế Web 

Để thiết kế được một giao diện website đẹp, ngoài cách sử dụng bố cục, màu sắc và các họa tiết trang trí đồng nhất, theo gu thẩm mỹ và hết sức tinh tế, bạn còn phải chú ý đến font chữ hay kiểu chữ áp dụng cho các đoạn văn bản trên giao diện. Ngoài các font chữ truyền thống và mang tính an toàn, bạn cũng có thể lựa chọn các font chữ mới và hiện đại, chẳng hạn như các font chữ Google. DAMMIO sẽ tư vấn và đưa ra một số nhận xét các font chữ Google phổ biến rất phù hợp để làm nội dung văn bản chính của website trong bài này.

Việc cài đặt Google font vào website không hề khó, thông thường bạn có thể cài đặt kiểu CDN (content delivery network), tức cài đặt qua mạng nội dung, bạn chỉ cần nhúng đường dẫn font Google vào trang web là xong. Để xem chi tiết cách cài đặt, bạn có thể theo dõi bài viết: Cách áp dụng các font chữ của Google trong thiết kế website.

Thử nghiệm ngay các font chữ Google: http://data.dammio.com/google_fonts.html.

1. Font Roboto

Nếu là người thiết kế giao diện Web chuyên nghiệp, chắc hẳn bạn đã biết rõ font chữ rất phổ biến này với 22 triệu website tin dùng. Roboto là font chữ kết hợp giữa cơ chế hình học và các đường cong thân thiện giúp font chữ mang tính tự nhiên hơn.

Ở trạng thái bình thường (Regular), font chữ có độ rộng ký tự hơi mảnh (nhạt). Theo chúng tôi, đây là nhược điểm duy nhất và phải tăng kích thước font hoặc dùng độ đậm font để font cứng cáp hơn. Kích thước font áp dụng văn bản phù hợp là từ 15px đến 18px.

2. Font Noto Sans

Noto Sans tuy không phổ biến bằng Roboto, chỉ có khoảng 1.8 triệu website sử dụng nhưng lại là một font khá đẹp và hiển thị tương thích với hơn 30 ngôn ngữ (trong đó có tiếng Việt) cũng như nhiều nền tảng khác nhau.

Văn bản sử dụng font Noto Sans nên có kích thước chữ từ 15 đến 16px là phù hợp.

3. Font Open Sans

Nếu không chú ý kỹ, thoạt nhìn bạn có thể thấy Open Sans hao hao giống Noto Sans chỉ với vài khác biệt nhỏ như font chữ Open Sans mảnh hơn 1 chút và chữ “g” có móc liền. Về độ phổ biến, Open Sans “ăn đứt” Noto Sans khi mà có đến 22 triệu website áp dụng font chữ này.

Open Sans được thiết kế bởi Steve Matteson, chứa 897 tập ký tự, bao gồm các tập ISO Latin 1 chuẩn, Latin CE, Greek (Hy Lạp) và Cyrillic. Font chữ này có kích thước cỡ 15 đến 17px là phù hợp với các đoạn văn bản trên Web.

4. Font Arima Madurai

Với các đỉnh tròn tinh tế, font chữ Arima Madurai mang lại cho người đọc cảm giác mềm mại và nhẹ nhàng. Font chữ giống như kiểu viết tay của ai đó rất nắn nót, gọn gàng và có thể dùng làm đoạn văn bản hoặc tiêu đề/đề mục lớn trên giao diện Web.

Mặc dù, độ tương phản trên giao diện không cao bằng cách font chữ khác do nét “nghệ sĩ” trong cách viết, font chữ Arima Madurai vẫn được chúng tôi đánh giá rất cao về tính “nghệ thuật” và nên được dùng làm font chữ ở các website về văn thơ, truyện ngắn giúp độc giả lôi cuốn hơn với nội dung.

Liên quan:  [Bootstrap] Phần 8: Các thông điệp cảnh báo

5. Font IBM Plex Serif

Đây là 1 font chữ của IBM Plex nhằm kết nối tinh thần thương hiệu IBM và lịch sử để mô phỏng mối quan hệ hợp nhất giữa con người và máy tính.

Mặc dù chỉ có 7900 website sử dụng trên khắp thế giới, chủ yếu là tiếng Anh, Pháp và Việt nhưng font chữ này thật sự rất dễ đọc, độ tương phản cao và mang tính văn bản hàn lâm. Do đó, sẽ không có gì bàn cãi khi các nhà thiết kế web áp dụng font này với các trang báo chí.

6. Font Noto Serif

Nếu bạn muốn áp dụng font chữ cho một website tin tức, bạn lại có 1 lựa chọn tuyệt vời nữa với font chữ Noto Serif. Với 1 số nét chữ giống Open Sans, Noto Serif có độ rộng ký tự hẹp hơn và có nhiều móc hơn, và có kích thước bé hơn một chút Open Sans nếu so cùng kích thước chữ mặc định.


Noto Serif cũng là font chữ khá ưa chuộng khi mà nó có mặt ở 670.000 website và có hơn 439 triệu lượt nhúng API ở Google.

7. Font Muli

Muli là font chữ Sans Serif được tối thiểu hóa với thiết kế dùng để hiển thị văn bản ở các trình duyệt web, desktop, laptop và các thiết bị mobile. Font Muli mang tính máy móc nhiều hơn khi nhà thiết kế loại bỏ hoàn toàn các đường cong và dấu móc.

Font Muli có mặt ở 730000 website và đặc biệt rất thích hợp cho các đoạn văn bản với kích thước chữ 16-17px.

8. Font Arimo

Arimo cũng là font chữ do Steve Matteson thiết kế nhằm mang lại sự đổi mới và sáng tạo tương thích với font Arial. Font Arimo cũng nằm trong nhóm font chữ phổ biến với 760.000 website áp dụng, phần lớn là các website tiếng Anh.

Bạn có thể áp dụng font Arimo cho đoạn văn bản mọi giao diện website với kích thước phù hợp là 15-16px.

9. Font Lora

Nếu bạn lấy font Roboto pha trộn với Noto Serif có lẽ bạn có thể có được font Lora, tuy nhiên đây là “đùa thôi”. Lora thậm chí còn phổ biến nhiều hơn các font trước với 1.7 triệu website sử dụng và khoảng 835 triệu lượt nhúng API Google.

Mục đích của font Lora là mang lại sự cân bằng với các móc cong mang tính nghệ thuật. Font Lora có tính tương phản rất cao, cực kỳ phù hợp để áp dụng cho đoạn văn bản với kích thước 15-16px.

10. Font Merriweather

Mặc dù rất ít website tiếng Việt sử dụng, font Merriweather lại rất phổ biến trên thế giới, có mặt tại hơn 3.4 triệu website.

Font chữ được thiết kế giúp độc giả có cảm giác dễ chịu khi đọc trên các loại màn hình với chiều cao và chiều rộng có tỉ lệ phù hợp, ký tự chữ hơi dày, các móc cong đậm và mang tính mở.

Tất cả các font chữ trên đều được chúng tôi tuyển chọn, đánh giá tỉ mỉ cũng như thử nghiệm thực tế để xem độ phù hợp trên trang web. Nếu bạn có một gu thẩm mỹ và cách nhìn khác, có hàng trăm font chữ Google khác nữa để bạn tha hồ lựa chọn.

Trích dẫn bài viết
  • APA:
    Dammio. (2018). 10 font chữ Google đẹp nhất áp dụng cho các đoạn văn bản trong thiết kế Website. https://www.dammio.com/2018/10/25/10-font-chu-google-dep-nhat-ap-dung-cho-cac-doan-van-ban-trong-thiet-ke-website.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {10 font chữ Google đẹp nhất áp dụng cho các đoạn văn bản trong thiết kế Website},
    year = {2018},
    url = {https://www.dammio.com/2018/10/25/10-font-chu-google-dep-nhat-ap-dung-cho-cac-doan-van-ban-trong-thiet-ke-website},
    urldate = {2024-04-19}
    }
Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x