Ghép cặp phông chữ
Chọn một phông cho tiêu đề và một phông cho nội dung, xem chúng cùng nhau trong bản mẫu trực tiếp, chỉnh cỡ chữ, độ đậm, chiều cao dòng và giãn cách chữ, rồi sao chép CSS. Danh mục được dựng từ những phông vốn có sẵn trên Windows, macOS, iOS, Android và các bản Linux phổ biến — không tải về gì cả, không gọi tới dịch vụ phông nào, và toàn bộ trang chạy ngay trong trình duyệt của bạn.
Các bước sử dụng
- Nhìn vào thẻ Xem trước trực tiếp. Nó hiển thị một tiêu đề và một đoạn văn theo cặp phông hiện tại; hãy sửa ô Nội dung tiêu đề và Nội dung đoạn văn bên dưới để thử với chữ của bạn.
- Chọn Phông nội dung trước. Người đọc dành phần lớn thời gian ở phần nội dung, nên chính nó quyết định diện mạo trang; tiêu đề chỉ cần bổ trợ cho nó.
- Chỉnh Cỡ chữ và Chiều cao dòng của phông nội dung — cỡ 16–19px với chiều cao dòng khoảng 1,5–1,7 phù hợp với hầu hết việc đọc trên màn hình.
- Giờ mới chọn Phông tiêu đề rồi tinh chỉnh Cỡ chữ, Độ đậm và Giãn cách chữ.
- Xem bảng Những cặp phông ăn ý và bấm Dùng thử ở dòng bất kỳ để nạp cặp đó vào bản xem trước.
- Bấm Sao chép CSS để đưa đoạn CSS hoàn chỉnh vào bộ nhớ tạm.
Cách chọn một cặp phông
Bảng có kèm một dòng giải thích cho từng cặp, nhưng tất cả đều theo cùng một nguyên tắc: tương phản mà không xung đột. Hai phông nên khác nhau rõ ràng ở ít nhất một khía cạnh — có chân với không chân, đậm với nhạt, rộng với hẹp — trong khi vẫn chung một thời kỳ, một nhà thiết kế, hoặc một hệ tỉ lệ.
Kiểu hỏng thường gặp là hai phông chỉ hơi giống nhau. Hai phông không chân nhân văn khác nhau chút ít sẽ bị đọc thành lỗi chứ không phải một lựa chọn, vì người đọc thấy chúng khác nhau mà không hiểu vì sao lại khác.
Những điểm khởi đầu đáng tin cậy:
- Tiêu đề có chân + nội dung không chân, hoặc ngược lại. Đây là kiểu tương phản lâu đời và an toàn nhất.
- Một họ phông, hai độ đậm. Tiêu đề đậm 700 trên nội dung thường 400 thì không thể xung đột với chính nó. Khi phân vân, hãy làm cách này.
- Cùng nhà thiết kế hoặc cùng một dự án. Cambria với Calibri, Constantia với Corbel, Optima với Palatino — chúng vốn được vẽ ra để đi cùng nhau.
- Rộng đối với hẹp. Tiêu đề gothic nén trên nội dung bề ngang bình thường hiệu quả nhờ khác biệt bề rộng chứ không phải khác phong cách.
Về tính sẵn có của phông
Mỗi phông đều được ghi chú nguồn gốc thông thường, và phông nào thiết bị của bạn không có sẽ bị đánh dấu "không có trên thiết bị này". Bạn vẫn chọn được chúng — biết trước rằng một cặp phông sẽ bị thay thế ở phía người đọc mới là thông tin hữu ích — nhưng bản xem trước sẽ hiển thị phông dự phòng chứ không phải phông thật.
Bật Chỉ phông có trên thiết bị này để ẩn hết những phông bạn không thực sự nhìn thấy được.
Mọi danh sách phông trong CSS sinh ra đều kết thúc bằng một họ tổng quát (serif, sans-serif, monospace), nên người đọc không có phông đầu tiên vẫn nhận được phông cùng thể loại thay vì rơi về phông mặc định của trình duyệt.
Mẹo
- Hãy đánh giá một cặp phông ở đúng cỡ chữ bạn sẽ dùng khi xuất bản. Một phông tương phản cao như Didot trông rất sang ở 48px nhưng nhoè nhoẹt ở 16px.
- Giãn cách chữ âm (khoảng −0,01 đến −0,03em) giúp siết chặt tiêu đề cỡ lớn; phần nội dung thì gần như không bao giờ cần.
- Đặt cỡ tiêu đề khoảng 2–2,5 lần cỡ nội dung để có phân cấp rõ ràng mà không bị "hét".
- Hai phông chữ thường đã là toàn bộ ngân sách. Phông thứ ba là một quyết định bạn phải bảo vệ được.
- CSS sinh ra dùng biến CSS, nên bạn chỉ cần khai báo cặp phông một lần trong
:rootrồi tham chiếuvar(--font-heading)ở mọi nơi khác.
Câu hỏi thường gặp
Vì sao không có Google Fonts?
Trang này hoàn toàn chạy ngoại tuyến ở phía trình duyệt — nó không bao giờ gọi tới API bên ngoài, kể cả dịch vụ phông chữ. Mọi thứ ở đây đều đã được cài sẵn trên thiết bị người xem, đồng nghĩa với thời gian tải bằng không, không bị nhảy bố cục, và không có bên thứ ba nào biết ai đã đọc trang của bạn.
Làm sao công cụ biết máy tôi có phông nào?
Bằng cách đo. Không có API nào của trình duyệt liệt kê phông đã cài mà không hỏi quyền, nên trang sẽ vẽ một chuỗi thử bằng phông cần kiểm tra với một phông dự phòng đã biết đứng sau, rồi so bề rộng với bề rộng của riêng phông dự phòng. Bề rộng khác nghĩa là phông cần kiểm tra đã được dùng; bề rộng giống hệt nghĩa là trình duyệt đã rơi về phông dự phòng.
Người xem có thấy giống hệt những gì tôi thấy không?
Chỉ khi họ có cùng bộ phông. Đó chính là điều mà nhãn "không có trên thiết bị này" cảnh báo: một cặp phông dựng trên phông chỉ có ở macOS như Didot hay Optima sẽ âm thầm bị thay thế với đa số người dùng Windows. Những cặp dựa trên System UI, Georgia, Arial, Verdana và Times New Roman thì gần như có ở mọi nơi.
Tôi có thể dùng phông đã cài nhưng không có trong danh sách không?
Không dùng trực tiếp từ trang này vì danh mục đã được chọn lọc. Nhưng CSS sinh ra chỉ là văn bản thường: hãy dán nó vào stylesheet của bạn rồi đặt tên phông của bạn lên đầu --font-heading hoặc --font-body, giữ nguyên phần còn lại làm chuỗi dự phòng.
Nên chọn phông tiêu đề hay phông nội dung trước?
Luôn là phông nội dung. Nó chứa gần như toàn bộ chữ và do đó gánh gần như toàn bộ công sức đọc. Hãy chọn phông đọc dài mà vẫn dễ chịu trước, rồi mới tìm một phông tiêu đề tương phản với nó.