CodeKitHubCông Cụ Này Là Gì?
Ghép cặp phông chữ nghĩa là chọn hai (đôi khi ba) kiểu chữ để dùng cùng nhau trên một trang — thường một dùng cho tiêu đề và một dùng cho nội dung — để trang có phân cấp thị giác mà không trông lệch nhau hay đơn điệu.
Mỗi cặp bên dưới hiển thị một mẫu được render trực tiếp: phông chữ tiêu đề ở trên, phông chữ nội dung ở dưới, sử dụng các tệp Google Fonts thực, vì vậy những gì bạn thấy chính là những gì bạn sẽ có trên trang web của mình.
Mỗi cặp đi kèm thẻ nhúng `<link>` Google Fonts sẵn sàng sử dụng và đoạn CSS tương ứng với khai báo `font-family` cho tiêu đề và nội dung — chỉ cần sao chép cả hai là xong.
Tại Sao Nên Dùng?
- 28 cặp được chọn lọc thủ công, không phải danh sách tạo tự động — mỗi cặp được chọn vì hai kiểu chữ thực sự bổ trợ cho nhau.
- Xem trước trực tiếp: mỗi cặp được render bằng phông chữ thực tải từ Google Fonts, không phải hình ảnh tĩnh hay phỏng đoán từ tên phông chữ.
- Lọc theo phong cách — Hiện đại, Thanh lịch, Táo bạo, Tối giản, Cổ điển — để nhanh chóng thu hẹp về cảm giác mà dự án của bạn cần.
- Sao chép chỉ với một cú nhấp cho cả thẻ nhúng `<link>` và các quy tắc CSS `font-family`.
- Miễn phí, chạy trong trình duyệt của bạn, không cần tài khoản hay đăng nhập.
Cách Sử Dụng
- Tùy chọn nhấp vào bộ lọc phong cách (Hiện đại, Thanh lịch, Táo bạo, Tối giản, Cổ điển) để thu hẹp danh sách, hoặc để "Tất cả" được chọn để duyệt toàn bộ.
- Xem qua các thẻ xem trước trực tiếp — dòng trên hiển thị phông chữ tiêu đề, dòng dưới hiển thị phông chữ nội dung.
- Mở cặp bạn thích và nhấp để mở rộng phần mã nhúng.
- Sao chép thẻ `<link>` vào `<head>` HTML của bạn, và sao chép đoạn CSS vào bảng định kiểu của bạn để áp dụng phông chữ cho tiêu đề và nội dung.
Ví dụ
Đầu vào
Blog thanh lịchĐầu ra
Playfair Display (tiêu đề) + Source Sans Pro (nội dung)Lọc theo "Thanh lịch" sẽ hiện ra các tiêu đề serif tương phản cao kết hợp với nội dung sans-serif sạch sẽ, dễ đọc — một sự kết hợp phổ biến cho bố cục biên tập và blog.
Nguyên tắc ghép cặp phông chữ tốt
- Tương phản hơn là tương đồng: hai phông chữ trông gần như giống hệt nhau (chẳng hạn hai phông sans-serif hình học tương tự) thường trông như một sai lầm hơn là một lựa chọn có chủ đích. Hãy kết hợp một phông serif với một phông sans-serif, hoặc một phông trưng bày đậm với một phông văn bản nhẹ hơn, để sự khác biệt trông có chủ ý.
- Khớp chiều cao chữ x và tỷ lệ: các phông chữ có chữ thường ở độ cao thị giác tương tự thường có cảm giác thuộc cùng một trang, dù phong cách khác nhau — chiều cao chữ x không khớp là một trong những lý do phổ biến nhất khiến một cặp phông chữ trông "không ổn".
- Giới hạn bản thân ở hai họ phông chữ (đôi khi ba): một cho tiêu đề, một cho nội dung, và nhiều nhất là một phông thứ ba cho các điểm nhấn như nút bấm hay nhãn. Nhiều hơn thế, trang bắt đầu trông thiếu tính toán.
- Xem xét cả cảm giác chứ không chỉ hình dáng: một phông sans-serif tròn trịa, thân thiện kết hợp với một phông serif trang trọng gửi đi tín hiệu trái ngược nhau ngay cả khi hình dạng chữ về mặt kỹ thuật vẫn hợp nhau — hãy chọn các phông chữ hài hòa cả về tông điệu lẫn cấu trúc.
- Kiểm tra ở kích thước thực tế: một cặp phông chữ trông tuyệt vời trong bản xem trước lớn có thể mất độ tương phản ở kích thước văn bản nội dung, hoặc một phông trưng bày có thể trở nên khó đọc ở kích thước nhỏ — luôn kiểm tra cả hai thái cực.
Chọn cặp phông chữ theo trường hợp sử dụng
Trang đích và trang web tiếp thị thường được hưởng lợi từ bộ lọc "Táo bạo" hoặc "Hiện đại" — một phông tiêu đề mạnh mẽ, tương phản cao thu hút sự chú ý ở phần đầu trang, kết hợp với phông nội dung sạch sẽ, trung tính giúp dễ dàng lướt qua văn bản dài.
Blog và nội dung biên tập thường đọc dễ chịu nhất với các cặp "Thanh lịch" hoặc "Cổ điển" — một tiêu đề serif tinh tế báo hiệu một giọng văn được chăm chút, biên tập kỹ, trong khi nội dung serif hoặc sans-serif thoải mái giữ cho các bài viết dài dễ đọc trong những phiên đọc kéo dài.
Trang thương mại điện tử và sản phẩm thường ưa chuộng các cặp "Tối giản" — phông chữ kín đáo, trung tính giữ trọng tâm vào hình ảnh sản phẩm và giá cả thay vì bản thân kiểu chữ, điều này quan trọng khi hàng chục thẻ sản phẩm xuất hiện trên một trang.
Danh mục đầu tư và trang web sáng tạo có nhiều không gian nhất để thử nghiệm — các cặp "Táo bạo" hoặc "Thanh lịch" với nhiều cá tính hơn có thể hoạt động tốt vì đối tượng ghé thăm một phần là để đánh giá gu thẩm mỹ.
Lưu ý về hiệu năng và giấy phép
Thẻ nhúng `<link>` tải phông chữ từ CDN của Google, vốn nhanh và đã được lưu vào bộ nhớ đệm trên nhiều trang web mà khách truy cập của bạn có thể đã từng ghé thăm — nhưng nó vẫn thêm một yêu cầu bên ngoài. Đối với các trang web mà mỗi mili giây đều quan trọng, tải xuống các tệp phông chữ và tự lưu trữ (với `font-display: swap` được thiết lập thủ công) sẽ loại bỏ sự phụ thuộc bên ngoài này, đổi lại là một chút công sức thiết lập thêm.
Mọi phông chữ trên Google Fonts đều là mã nguồn mở và miễn phí cho mục đích thương mại mà không yêu cầu ghi công, mặc dù việc ghi công cho nhà thiết kế kiểu chữ vẫn là một cử chỉ lịch sự tốt khi dễ thực hiện.
Câu Hỏi Thường Gặp
Điều gì khiến hai phông chữ "hợp với nhau"?
Các cặp phông chữ tốt cân bằng giữa tương phản và hài hòa. Tương phản — kết hợp một phông serif với một phông sans-serif, hoặc một phông trưng bày đậm với một phông nội dung đơn giản — tạo ra phân cấp thị giác để tiêu đề và nội dung trông rõ ràng khác biệt. Hài hòa — chiều cao chữ x tương đồng, độ dày nét chữ tương đương, và cùng mức độ trang trọng hoặc vui tươi — giúp hai phông không xung đột nhau. Các cặp ở đây được chọn lọc dựa trên cả hai yếu tố này.
Tiêu đề và nội dung có luôn phải dùng phông chữ khác nhau không?
Không. Dùng một họ phông chữ duy nhất cho cả hai (như cặp "Rubik + Rubik" của công cụ này) cũng hoạt động tốt, miễn là phông chữ có đủ biến thể độ đậm để phân biệt tiêu đề với nội dung. Đây là một lựa chọn tối giản hợp lệ, không phải là sai lầm.
Làm thế nào để thực sự áp dụng một cặp phông chữ vào trang web của tôi?
Sao chép thẻ nhúng `<link>` vào `<head>` trang của bạn để tải phông chữ từ CDN của Google, sau đó sao chép đoạn CSS vào bảng định kiểu — nó đặt `font-family` cho tiêu đề (h1, h2, h3) và nội dung (body, p). Điều chỉnh bộ chọn CSS nếu mã HTML của bạn khác.
Tải Google Fonts có làm chậm trang web của tôi không?
Mỗi tệp phông chữ bổ sung sẽ thêm một yêu cầu mạng và một chút rủi ro chặn quá trình render. Hãy giới hạn ở một độ đậm cho tiêu đề và một hoặc hai độ đậm cho nội dung, dùng `display=swap` (đã có sẵn trong mã nhúng) để văn bản hiển thị bằng phông dự phòng trong khi webfont đang tải, và cân nhắc tự lưu trữ các tệp phông chữ cho các trang sản xuất cần tốc độ tải nhanh nhất.
Các phông chữ này có được sử dụng thương mại miễn phí không?
Có. Mọi phông chữ trên Google Fonts, bao gồm tất cả các cặp hiển thị ở đây, đều được cấp phép theo SIL Open Font License hoặc Apache License — cả hai đều cho phép sử dụng thương mại, chỉnh sửa và phân phối lại miễn phí, không cần trả bản quyền.