Logo
    Gợi ý chọn Google font cho website của bạn

    Gợi ý chọn Google font cho website của bạn

    Chọn font / typography quyết định tính thẩm mỹ của website, cũng như việc chọn màu sắc, và hình ảnh vậy.

    Typography góp phần định hình cảm xúc / tâm trạng của người xem website, theo 1 thống kê từ Microsoft and Đại học MIT [1]()

    
    Typography - Một template website đẹp không cần hình ảnh.

    Tuy nhiên, đa số chủ nhân website ít (thậm chí không) chú ý đến điều này. Bạn có thể dễ dàng nhận ra, khi dạo xem các template website Việt hóa, đa phần đều dùng font Helvetica, Roboto, hay thậm chí, Arial. 🙄

    Thật may mắn là Google đã cung cấp tài nguyên quý giá là Google Fonts với rất nhiều font đẹp được Việt hóa, giúp cho việc làm đẹp website dễ dàng hơn bao giờ hết.

    Thế nhưng, với quá nhiều lựa chọn, bạn có thể sẽ gặp phân vân đôi chút — làm sao để chọn được bộ typography đẹp, chuẩn chỉnh phản ánh đúng phong cách của website?

    Bài viết này là tập hợp gợi ý 10 sự kết hợp font đẹp, lạ, tạo ấn tượng cho website của bạn.

    Nghệ thuật kết hợp font

    Bản thân mỗi font chữ mang cá tính khác nhau: có font thể hiện sự nghiêm túc, có font thể hiện sự thanh nhã, font thì mạnh mẽ,… và nhiệm vụ là tìm được font phù hợp với toàn bộ thiết kế.

    Tip khi chọn font cho 1 dự án website là:

    1. chọn không quá 2 fonts – 1 cho tiêu đề, và 1 cho văn bản dài.
    2. chọn font tiêu đề tương phản với font văn bản. Ví dụ: font tiêu đề kiểu cách và ấn tượng, thì font dành cho văn bản nên đơn giản và trung tính hơn. Ưu tiên chọn các font có nét đậm, gây ấn tượng mạnh ngay từ lúc đầu cho tiêu đề, và dành font nét mảnh, với khoảng cách dòng lớn cho văn bản. Sự tương phản này thỏa mãn thị giác và bộ não của con người. 
    3. ghé thăm các trang web như Fontpair, Canva Font Combinations hay Typography Resources để tìm kiếm cảm hứng cho website.

    … và dưới đây là 10 gợi ý kết hợp font đã được Việt hóa, tải miễn phí từ Google Fonts cho bạn

    1. Open Sans Condensed và Open Sans

    Open Sans là 1 trong số những typeface đa dụng nhất và được dùng nhiều nhất từ Google Fonts. Open Sans có nhiều loại nét, từ mảnh, đến đậm đen, đủ tương phản để giúp văn bản hiển thị dễ đọc với người dùng.

    Open Sans Condensed ít được biết tới hơn, và đây là lợi thế giúp website của bạn ghi điểm nhờ sự “lạ”.

    Sự kết hợp của Open Sans Condensed, Light với vai trò là tiêu đề, và Open Sans làm font văn bản đem lại cho website cảm giác thanh nhã và đảm bảo tính dễ đọc của văn bản.

    Phong cách: hiện đại, trung tính

    Link tải font:

    

    
    Open Sans Condensed Light và Open Sans Regular

    2. Roboto Condensed và Cabin

    
    Roboto Condensed Bold và Cabin Regular

    Roboto Condensed thuộc gia đình Roboto — là font được dùng cho hệ điều hành Android - sở hữu thuộc tính dễ đọc.

    Cabin là loại font hình học được xếp vào loại humanist sans (tạm hiểu là font thân thiện với mắt con người), tạo cảm giác hiện đại, thành thị cho website.

    Roboto Condensed và Cabin chắc chắn là sự kết hợp mới lạ cho website của bạn

    Phong cách: hiện đại, trung tính

    3. Playfair Display và Source Sans Pro

    
    Playfair Display Italic và Source Sans Pro Regular

    Playfair Display là font tiêu đề đẹp hút hồn, đặc biệt là ký tự “&”. Playfair Display tạo ấn tượng ngay lập tức với sự tương phản giữa nét mảnh và đậm, cực kỳ phù hợp làm tiêu đề lớn.

    Source Sans Pro là font sans serif được Adobe phát triển, là font văn bản dễ đọc tạo cảm giác đáng tin cậy cho website.

    Phong cách: cổ điển, thanh nhã

    4. Alegreya và Open Sans

    
    Alegreya Bold và Open Sans Regular

    Alegreya được chọn là 1 trong số 53 font của thập kỷ trong cuộc thi ATypI Letter2 vào tháng 9 năm 2011, và cũng là 1 trong số top 14 hệ thống font văn bản.

    Alegreya ban đầu được chủ định dùng trong văn chương. Là font serif, Alegreya đem lại cảm giác an tâm, đặc biệt là font nét đậm — tuyệt vời khi dùng làm tiêu đề chính.

    Open Sans — font quốc dân với dạng hình học tròn trịa là sự kết hợp vừa vặn với Alegreya.

    Phong cách: độc đáo, hiện đại.

    5. Merriweather và Monserrat

    
    Merriweather Regular và Montserrat Regular

    Tuy là font serif, nhưng Merriweather được thiết kế rất dễ đọc khi hiển thị trên màn hình, ngay cả khi dùng cho văn bản dài. Merriweather còn sở hữu đầy đủ set font weight: từ đậm, nhạt, hay cả chữ nghiêng - không như nhiều font serif khác.

    Cả Merriweather và Montserrat đều đem lại cảm giác hiện đại cho website. Rất thích hợp cho các trang web về công nghệ.

    Phong cách: hiện đại, 

    6. Amatic SC và Josefin Sans

    
    Amatic SC Bold và Josefin Sans Regular

    Amatic SC (viết tắt của Small Caps) là dạng font display đặc biệt, chỉ phù hợp dùng cho tiêu đề.

    Josefin Sans với dáng hình học sẽ đem lại cảm xúc hoài cổ, khoảng cách giữa các ký tự lớn giúp văn bản dễ đọc hơn.

    Phong cách: thân thiện, ấm áp

    Rất phù hợp cho website bánh, hay đồ lưu niệm độc đáo.

    7. Lora và Merriweather

    
    Lora Italic và Merriweather Regular

    8. Oswald và Muli

    
    Oswald Medium và Muli Regular

    9. Roboto Slab và Roboto

    
    Roboto Slab Regular và Roboto Regular

    10. Prata và Nunito Sans

    
    Prata Regular và Nunito Sans Regular

    Nunito Sans, được phát triển thêm bởi Jacques Le Bailly là phiên bản non-rounded của Nunito, được thiết kế bởi Vernon Adams. Nunito Sans có dáng hình học, dễ đọc, phù hợp cho văn bản.

    Prata là typeface mã nguồn mở thiết kế bởi Ivan Petrov được cung cấp miễn phí tại thư viện Google Fonts. Prata có thiết kế tương phản cao được miêu tả như các hạt nước — phù hợp làm tiêu đề.

    Phong cách: cổ điển

    11. Maitree và Open Sans

    
    Maitree Light và Open Sans Regular

    Maitree có dáng tròn trịa — mang ý nghĩa thân thiện trong ngôn ngữ Thái Lan. Font chữ này phù hợp dùng cho website mang tính nghiêm túc như kế toán - tài chính, luật.

    Phong cách: nghiêm túc, tin cậy

    Tạm kết

    Typography nên được chọn lựa 1 cách hữu ý để đồng bộ với thiết kế website — chứ không nên được đối xử kiểu đọc được là OK. Chọn được font như ý đã không dễ, làm sao để hiển thị font đẹp còn thêm 1 quá trình dài từ chọn kích thước, nét đậm nhạt, khoảng cách ký tự, khoảng cách dòng…

    Chúc bạn chọn được bộ combo fonts như ý cho dự án website sắp tới.

    Copyright 2020, Dew. All rights reserved.