Tìm cách ghép nối Phông chữ Google hoàn hảo cho trang web của bạn

Phông chữ của Google cung cấp toàn bộ thư viện phông chữ web miễn phí để bạn lựa chọn. Tuyệt quá! Nhưng điều gì sẽ xảy ra khi bạn thực sự cuộn qua danh sách 650 tùy chọn đó? Đôi mắt lướt qua, các phông chữ bắt đầu hòa trộn với nhau và bạn có thể chỉ cần chọn một phông chữ bắt đầu bằng chữ ‘A’ để bạn không phải cuộn xuống nữa (có thể đó là cách Arial trở nên rất phổ biến…)

Nhưng nó không nhất thiết phải như vậy. Chọn phông chữ có thể thú vị hơn là choáng ngợp. Jimdo Mẹo này sẽ trình bày một số ý tưởng cơ bản đằng sau sự kết hợp phông chữ thành công và cũng cung cấp danh sách tài nguyên nơi bạn có thể tìm thấy các cặp phông chữ Google mà bạn thích.

Trang web của bạn cần bao nhiêu phông chữ khác nhau?

Chúng tôi thường khuyên bạn nên chọn 2-3 phông chữ:

Nội dung / Đoạn văn bản

Bạn không thể thất bại với một phông chữ sans-serif ở đây rất dễ đọc, đặc biệt là ở các kích thước nhỏ hơn. Tránh sử dụng các phông chữ thảo hoặc viết hoa, những phông chữ khó đọc hơn một vài từ.

Đề mục

Ở đây, bạn có thể sử dụng thứ gì đó trang trí hoặc vui nhộn hơn, vì bạn sẽ chỉ sử dụng nó cho các đoạn văn bản ngắn. Bạn cũng có thể sử dụng phông chữ viết hoa toàn bộ. Chọn một phông chữ độc đáo ở đây có thể giúp thêm một chút tinh tế cho thiết kế trang web của bạn.

Menu điều hướng

Bạn có thể lặp lại một trong hai phông chữ đầu tiên của mình tại đây hoặc chọn một phông chữ bổ sung thứ ba. Chỉ cần nhớ rằng menu điều hướng của bạn phải dễ đọc, vì vậy chúng tôi khuyên bạn nên tránh xa các phông chữ thảo hoặc quá cách điệu. Giống như với các tiêu đề của bạn, bạn có thể sử dụng phông chữ viết hoa toàn bộ tại đây.

Để biết thêm thông tin về sự khác biệt giữa serif, sans-serif và phông chữ trang trí (và các đề xuất cho tất cả chúng), hãy xem bài viết, “Hướng dẫn về Phông chữ trên web của Google”.

Bạn không thể chỉ sử dụng cùng một phông chữ ở mọi nơi?

Bạn có thể. Cuối cùng, không có gì sai với một trang web đơn giản, tối thiểu và bạn có thể phân biệt tiêu đề và nội dung của mình bằng cách sử dụng các kích thước và màu sắc khác nhau.

Điều đó nói rằng, sử dụng 2-3 phông chữ khác nhau là một cách hay để thêm cá tính và sở thích trực quan vào trang web của bạn. Các phông chữ khác nhau giúp phát triển cảm giác nhất quán và phân cấp trên khắp các trang web của bạn. Cũng giống như biển báo trên đường phố, các phông chữ khác nhau được sử dụng nhất quán sẽ hoạt động như biển chỉ dẫn cho người dùng của bạn, vì vậy họ có thể nhanh chóng quét một trang và biết loại thông tin họ đang xem.

Chỉ cần nhớ rằng biến thể không có nghĩa là “cầu vồng phông chữ”. Sử dụng quá nhiều phông chữ sẽ giống như có quá nhiều biển báo đường phố ở một ngã tư: choáng ngợp và khó hiểu.

Vì vậy, làm thế nào để bạn chọn phông chữ đi cùng nhau?

Khi bạn ghép nối các phông chữ, bạn đang cố gắng giới thiệu cả hai đoàn kết và đa dạng. Nói cách khác, bạn không muốn các phông chữ giống nhau đến mức chúng trông quá giống nhau (do đó đánh bại mục đích sử dụng các phông chữ khác nhau). Bạn cũng không muốn chúng khác biệt hoàn toàn đến mức đụng độ hoặc trông như thể chúng đến từ những thế giới hoàn toàn khác.

Một số kỹ thuật đối sánh khác nhau bao gồm:

Sự tương phản

Nếu bạn chọn một phông chữ trang trí thực sự mạnh mẽ cho các tiêu đề của mình, bạn có thể cân bằng nó với một phông chữ sans-serif đơn giản sẽ không gây được sự chú ý.

Tính cách

Phông chữ có thể hiện đại, đậm, mềm mại, tinh vi, vui tươi; và những “tính cách” phông chữ này phải phản ánh tính cách thương hiệu của bạn. Nếu bạn muốn, giả sử, một giao diện nữ tính hơn cho trang web của bạn, bạn có thể chọn hai phông chữ có chung tính cách đó, ngay cả khi chúng trông khác nhau.

Khoảng thời gian

Nếu bạn đang muốn gợi lên một khoảng thời gian nhất định, bạn có thể chọn hai phông chữ cổ điển hoặc hai phông chữ kiểu cũ hơn.

Sự phù hợp

Điều này khó phát hiện hơn một chút so với độ tương phản, nhưng tỷ lệ tương tự hoặc hình dạng chữ cái tương tự có thể giúp hai phông chữ đi cùng nhau. Các phông chữ từ cùng một họ (như Roboto và Roboto Slab) sẽ có chung các đặc điểm.

Nhìn chung, hãy chắc chắn rằng bạn tìm thấy một sự cân bằng tốt. Như Ian Yates của Tuts + đã nói, “Hãy coi phông chữ của bạn như những vị khách ngồi trên bàn tiệc cưới; một nghệ sĩ giải trí thường là đủ vì quá nhiều cá tính mạnh có thể khiến bầu không khí trở nên khó xử. “

Tôi muốn đi với một cái gì đó đã-thử-và-đúng. Có trang web nào đề xuất kết hợp phông chữ tốt không?

Bạn đặt cược. Có một số trang web bạn chắc chắn nên xem đề xuất các tổ hợp phông chữ nhất định của Google và cho bạn thấy chính xác chúng trông như thế nào. Nếu bạn không muốn phát minh lại bánh xe, hãy chọn một trong các cách kết hợp của chúng và chạy với nó!

Thư mục Phông chữ Web của Google

Cùng với bộ lọc và các ví dụ đẹp mắt, thư mục của Google cũng cung cấp các đề xuất ghép nối trong tab “Ghép nối”. Nếu bạn đã biết một phông chữ bạn thích (trong ví dụ này, chúng tôi sẽ sử dụng Pacifico), hãy tìm nó trong thư mục như thế này.

Fontpair

Trang web tiện dụng này có một danh sách khá tốt các đề xuất về cặp phông chữ, được sắp xếp theo loại (ví dụ: Serif / sans-serif, Cursive-serif). Tuyệt vời hơn nữa, bạn có thể nhập văn bản của mình trực tiếp vào trang web của họ để xem nó trông như thế nào với từng tổ hợp phông chữ.

Sáng kiến ​​25 × 52

Dự án đang diễn ra này cung cấp nguồn cảm hứng phông chữ tuyệt đẹp với các đoạn từ Truyện ngụ ngôn của Aesop được đặt trong các tổ hợp phông chữ Google khác nhau. Thật thú vị khi cuộn qua ngay cả khi bạn không tìm kiếm phông chữ mới.

Type.io

Type.io giống như một bảo tàng các trang web tuyệt đẹp được tuyển chọn từ khắp nơi trên web, với thông tin về các phông chữ được sử dụng trong mỗi loại. Bạn có thể sắp xếp thư viện của họ để chỉ hiển thị cho bạn các ví dụ về phông chữ web của Google.

FontsinUse

Tương tự như type.io, Fonts in Use là một tập hợp các trang web được sắp xếp theo phông chữ. Đây là một lựa chọn tốt nếu bạn đã có sẵn một phông chữ và muốn có ý tưởng về những cách sáng tạo để sử dụng hoặc ghép nối nó.

TypeConnection

Bạn muốn có thêm một chút niềm vui với điều này? Type Connection thiết lập tìm kiếm phông chữ của bạn như một trò chơi hẹn hò, vì vậy bạn có thể thực hành chọn ra những kết quả phù hợp.

Tìm kiếm phông chữ trong tự nhiên

Điều gì sẽ xảy ra nếu bạn tình cờ xem một trang web sử dụng phông chữ mà bạn yêu thích? Chà, bạn là người may mắn, bởi vì thật dễ dàng để xem xét bên dưới và biết họ đang sử dụng phông chữ nào.

Cả Chrome và Firefox đều cung cấp các plugin sẽ cho bạn biết phông chữ chính xác mà bạn đang thấy. WhatFont và Fontface Ninja đều là những lựa chọn tuyệt vời.

Phần kết luận

Một mẹo cuối cùng: chỉ vì phông chữ “web” của Google tồn tại không có nghĩa là nó phù hợp với một trang web. Cuộn xuống danh sách và bạn sẽ thấy rất nhiều phông chữ khó hình dung trong thực tế sử dụng. Nếu bạn nghi ngờ một phông chữ có thể quá khó đọc, có thể là như vậy.

Cũng nên nhớ đừng quá lo lắng về điều này. Như trong cuộc sống thực, không có cặp đôi nào “hoàn hảo”. Nếu bạn tìm thấy một tổ hợp phông chữ mà bạn thích và nó có thể đọc được, hãy sử dụng nó, và chúc bạn vui vẻ!

Bài báo này ban đầu được viết cho Jimdo bởi Maggie Biroscak. Với giao diện đơn giản, trực quan, Jimdo cho phép mọi người tạo một trang web độc đáo với blog và cửa hàng trực tuyến.