Font Pairing Generator

Tính năng nổi bật

• Mười cặp phông dựng sẵn, mỗi cặp phân vai rõ một phông tiêu đề và một phông nội dung
• Nhãn phong cách cho từng cặp, từ trang nhã, sạch sẽ, hiện đại cho tới mạnh và ấn tượng
• Phông được tải thật từ kho Google Fonts nên bản xem trước đúng với hiển thị trên trang của bạn
• Ô nhập riêng cho tiêu đề mẫu và đoạn nội dung mẫu, thay được bằng chính chữ tiếng Việt của bạn
• Khung xem trước đặt trên nền trắng chữ đen, gần với điều kiện đọc thực tế nhất
• Nút chuyển tới và lui để lướt qua từng cặp, kèm danh sách đầy đủ ở phía dưới
• Nút sao chép đoạn CSS gồm dòng nhập phông và hai quy tắc gán cho nhóm tiêu đề và phần thân
• Đoạn CSS lấy sẵn hai độ đậm cho tiêu đề và hai độ đậm cho nội dung, kèm chế độ hiển thị swap

Vì sao hai phông chữ khó ghép hơn nhiều người nghĩ

Chọn một phông chữ đẹp thì dễ, ghép hai phông cho ra một tổng thể có trật tự mới khó. Vấn đề nằm ở chỗ hai phông phải khác nhau đủ nhiều để người đọc nhận ra ngay đâu là tiêu đề đâu là nội dung, nhưng không được khác tới mức trông như hai trang web bị dán vào nhau. Ranh giới đó rất hẹp và gần như không thể đánh giá bằng cách nhìn tên phông trong một danh sách thả xuống. Cách duy nhất là nhìn hai phông cạnh nhau, ở đúng vai trò của chúng, với đúng nội dung sẽ dùng. Đó là điều công cụ này làm: mười cặp đã được chọn sẵn để bạn không phải bắt đầu từ hàng nghìn khả năng, phông được tải thật chứ không phải ảnh chụp, và chữ mẫu thay được nên bạn thấy ngay tiêu đề thật của mình trông ra sao chứ không phải một câu tiếng Anh vô nghĩa.

Lợi ích khi sử dụng

• •Rút gọn từ hàng nghìn khả năng xuống mười lựa chọn đã được cân nhắc về độ tương phản
• •Xem trước bằng chính nội dung tiếng Việt của bạn nên phát hiện sớm vấn đề về dấu
• •Đoạn CSS sao chép ra đã có sẵn độ đậm cần thiết, không phải tự tra cú pháp
• •Phông đều thuộc kho miễn phí nên không vướng chuyện giấy phép khi dùng cho dự án thương mại
• •Thấy được cả tiêu đề lẫn đoạn nội dung cùng lúc, điều mà xem từng phông riêng lẻ không cho biết

Cách chọn một cặp phông

1. 1Thay ngay hai ô chữ mẫu bằng tiêu đề thật và một đoạn nội dung thật của bạn, nhớ để cả chữ có dấu.
2. 2Dùng hai nút chuyển để lướt qua mười cặp, dừng lại ở những cặp khiến bạn đọc được trôi chảy chứ không phải cặp trông lạ mắt.
3. 3Với cặp đang cân nhắc, soi kỹ các chữ mang dấu như ô, ơ, ư, đ và các nguyên âm có dấu thanh xem chúng có hiển thị đồng bộ với phần còn lại không.
4. 4Bấm sao chép để lấy đoạn CSS, dán vào tệp định kiểu rồi kiểm tra lại trên trang thật ở cả máy tính lẫn điện thoại.
5. 5Trước khi chốt, cân nhắc chuyển dòng nhập phông thành thẻ liên kết đặt trong phần đầu tài liệu để trang tải nhanh hơn.

Nguyên tắc ghép phông rút ra từ mười cặp này

Nhìn kỹ mười cặp sẽ thấy chúng đi theo vài công thức lặp lại. Công thức phổ biến nhất là ghép một phông có chân cho tiêu đề với một phông không chân cho nội dung: nét chân tạo cảm giác trang trọng và giàu tính cách ở cỡ lớn, còn phông không chân giữ cho khối chữ dài dễ đọc trên màn hình. Công thức thứ hai là dùng hai phông cùng họ, tức hai biến thể do cùng một nhà thiết kế làm ra và chia sẻ tỷ lệ chữ, cách này gần như không bao giờ sai vì chúng vốn được thiết kế để đi cùng nhau. Công thức thứ ba là ghép một phông rất đậm và nén cho tiêu đề với một phông tròn và mềm cho nội dung, tạo tương phản mạnh về sức nặng. Điều cần tránh là ghép hai phông cùng phân loại nhưng khác nhau chút ít, chẳng hạn hai phông không chân hình học trông na ná; người đọc không nhận ra đó là chủ ý mà chỉ thấy trang trông thiếu nhất quán. Một quy tắc thực dụng khác là dừng ở hai phông cho toàn bộ trang; muốn phân tầng thêm thì dùng độ đậm, cỡ chữ và khoảng cách chữ thay vì thêm phông thứ ba.

Dấu tiếng Việt, thứ phải kiểm tra trước khi chốt

Đây là điểm quan trọng nhất với người làm web tiếng Việt và cũng là điểm hay bị bỏ qua nhất. Không phải phông nào trong kho Google Fonts cũng có bộ ký tự tiếng Việt. Nhiều phông chỉ kèm bộ Latin cơ bản và Latin mở rộng, trong đó thiếu các chữ đặc thù như ơ và ư, cùng nhiều tổ hợp nguyên âm mang dấu thanh. Khi gặp ký tự không có sẵn, trình duyệt lặng lẽ lấy phông dự phòng của hệ điều hành để vẽ riêng ký tự đó. Kết quả là một dòng chữ có vài chữ cái lệch hẳn về hình dáng, chiều cao và độ đậm so với phần còn lại, trông như lỗi in ấn. Cách kiểm tra rất nhanh: dán vào ô nội dung mẫu một câu chứa đủ các ký tự khó, chẳng hạn một câu có các chữ ơ, ư, đ cùng vài nguyên âm mang dấu hỏi và dấu ngã, rồi nhìn xem chúng có cùng một dáng với phần chữ không dấu hay không. Trên trang Google Fonts, bạn cũng lọc được theo ngôn ngữ để chỉ hiện những phông có bộ Việt. Đừng bỏ qua bước này chỉ vì tiêu đề tiếng Anh trong bản xem trước trông đẹp.

Chiều cao chữ thường và vì sao hai phông cùng cỡ trông khác cỡ

Cùng đặt 16 pixel nhưng hai phông có thể trông chênh nhau rõ rệt về kích thước. Nguyên nhân là chiều cao của chữ thường, tức khoảng cách từ đường cơ sở lên đỉnh của những chữ như a, e, o, không phải hằng số mà do người thiết kế phông quyết định. Phông có chiều cao chữ thường lớn nhìn to hơn và thường dễ đọc hơn ở cỡ nhỏ, phông có chiều cao chữ thường nhỏ nhìn thanh mảnh và trang nhã hơn nhưng đuối ở cỡ nhỏ. Hệ quả thực tế khi ghép cặp: nếu phông tiêu đề có chiều cao chữ thường nhỏ hơn hẳn phông nội dung, tiêu đề sẽ trông yếu dù cỡ chữ lớn hơn, và bạn phải đẩy cỡ tiêu đề lên nhiều hơn dự kiến để lấy lại thứ bậc. Ngược lại, khi hai phông có chiều cao chữ thường gần nhau, cặp đó thường hòa hợp ngay mà không cần chỉnh nhiều. Đây cũng là lý do phải xem trước với chữ thật: một tiêu đề tiếng Việt dài, có dấu, ở cỡ thật sẽ cho bạn cảm giác đúng, trong khi hai dòng chữ ngắn trên trang giới thiệu phông thì không.

Nhúng phông sao cho trang không chậm đi

Đoạn CSS công cụ sao chép ra dùng câu lệnh nhập phông ngay trong tệp định kiểu. Cách này viết gọn nhưng là cách chậm nhất, vì trình duyệt phải tải xong tệp định kiểu của bạn, đọc thấy câu lệnh nhập, rồi mới bắt đầu một lượt tải mới tới máy chủ phông; hai lượt tải nối tiếp nhau thay vì chạy song song. Cách tốt hơn là chuyển thành một thẻ liên kết đặt trong phần đầu tài liệu, kèm hai thẻ kết nối trước tới hai tên miền của dịch vụ phông để rút ngắn thời gian bắt tay. Cách tốt hơn nữa là tự lưu tệp phông trên chính máy chủ của bạn, khi đó không còn phụ thuộc tên miền bên ngoài và tránh được một điểm hỏng. Về khối lượng, mỗi độ đậm của mỗi phông là một tệp riêng, và bộ ký tự tiếng Việt làm tệp nặng hơn bộ Latin thuần. Vì vậy hãy chỉ lấy đúng những độ đậm bạn thật sự dùng; đoạn mã mặc định lấy hai độ đậm cho mỗi phông, tức bốn tệp, đã là mức hợp lý nhưng đừng thêm nữa nếu không cần. Chế độ hiển thị swap có sẵn trong đường dẫn giúp chữ hiện ngay bằng phông dự phòng thay vì để trang trắng.

Hiện tượng chữ nhảy khi phông tải xong và cách giảm

Với chế độ swap, trình duyệt vẽ chữ ngay bằng phông dự phòng của hệ thống, rồi thay bằng phông thật khi tải xong. Người dùng thấy chữ đổi dáng một cái, và nếu hai phông chênh nhau về bề rộng thì cả khối chữ dịch chuyển, đẩy nội dung bên dưới nhảy xuống hoặc nhảy lên. Đây là một trong những nguồn gây điểm số dịch chuyển bố cục xấu mà nhiều người không nghĩ tới, vì nó chỉ xuất hiện ở lần tải đầu khi phông chưa nằm trong bộ nhớ đệm. Có vài cách giảm. Thứ nhất là khai báo một phông dự phòng có tỷ lệ gần với phông thật thay vì để mặc định, và tinh chỉnh bằng các thuộc tính điều chỉnh tỷ lệ dành riêng cho phông dự phòng. Thứ hai là giảm số phông và số độ đậm để phông tải xong sớm hơn. Thứ ba là tải trước tệp phông dùng cho phần nội dung nằm ngay đầu trang. Nếu trang của bạn có tiêu đề rất lớn ở đầu, hiện tượng nhảy chữ sẽ rõ nhất ở đó, nên hãy kiểm tra bằng cách tải lại trang sau khi xóa bộ nhớ đệm chứ đừng đánh giá qua lần tải thứ hai.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• cặp font đẹp cho website
• font pairing google fonts
• ghép font tiêu đề và nội dung
• font hỗ trợ tiếng việt
• google fonts tiếng việt
• font chữ web đẹp miễn phí
• chọn font cho website
• font serif và sans serif
• chiều cao chữ thường x-height
• nhúng google fonts vào web
• font display swap là gì
• chữ nhảy khi tải font
• self host google fonts
• tối ưu tốc độ tải font
• font chữ dễ đọc trên mobile
• font cho website bán hàng
• font chữ thiếu dấu tiếng việt
• bao nhiêu font cho một website
• preview font tiếng việt online
• công cụ chọn cặp font miễn phí