Ghép một phông tiêu đề với một phông nội dung và xem chúng cùng nhau. Mọi phông ở đây đều đã có sẵn trên thiết bị của bạn — không tải về gì cả và không gọi tới dịch vụ phông nào, nên bản xem trước đúng như những gì người đọc có cùng bộ phông sẽ thấy.
Xem trước trực tiếp
The quick brown fox
Typography is the craft of endowing human language with a durable visual form. A page of text should be comfortable to read for an hour, not merely striking for a second — which is why the body face is chosen first and the heading face second.
Nội dung tiêu đề
Nội dung đoạn văn
Phông tiêu đề
Georgia
Windows, macOS
Cỡ chữ: 40px
Độ đậm
700
Chiều cao dòng: 1.2
Giãn cách chữ: -0.01em
Phông nội dung
Verdana
Windows, macOS
Cỡ chữ: 17px
Độ đậm
400
Chiều cao dòng: 1.65
Phần nội dung thường hợp với chiều cao dòng 1,5–1,7 và cỡ 16–19px; hãy chỉnh phần này trước khi chọn phông tiêu đề.
Những cặp phông ăn ý
Chỉ phông có trên thiết bị này
Georgia | Verdana | Cả hai đều do Matthew Carter thiết kế cho màn hình độ phân giải thấp, nên tỉ lệ khớp nhau, trong khi khác biệt có chân/không chân vẫn giúp tiêu đề nổi bật. | |
Helvetica Neue | Georgia | Tiêu đề grotesque trung tính nhường toàn bộ cá tính cho phần nội dung; chiều cao chữ x lớn của Georgia giúp đọc dài mà không mỏi. | |
Cambria | Calibri | Được đặt hàng cùng nhau cho bộ ClearType của Microsoft nên chung một nhịp dọc — cặp an toàn nhất trên mọi máy có Office. | |
Constantia | Corbel | Nửa còn lại của cùng bộ ClearType: một phông có chân nhân văn ấm áp đặt trên phông không chân nhân văn tương ứng. | |
Baskerville | Avenir Next | Phông có chân chuyển tiếp tương phản cao đi cùng phông không chân hình học sạch sẽ — kiểu chia cổ điển của báo chí: uy tín ở trên, rõ ràng ở dưới. | |
Futura | Georgia | Những hình tròn và tam giác của Futura tạo nên tiêu đề không thể nhầm lẫn; Georgia bù lại sự ấm áp mà hình học không có. | |
Didot | Futura | Cặp phông của tạp chí thời trang: chân chữ mảnh như sợi tóc ở trên, không chân hình học ở dưới. Hãy để Didot ở cỡ lớn, nếu không các nét mảnh sẽ biến mất. | |
Impact | Georgia | Một phông kiểu áp phích chỉ nên dùng cho hai ba chữ, được làm dịu lại bằng phông có chân dễ đọc bên dưới. | |
Trebuchet MS | Georgia | Phông không chân nhân văn hơi lạ mắt của Trebuchet cho cảm giác thân thiện chứ không khô cứng, và Georgia có chiều cao chữ x tương xứng. | |
Palatino | Trebuchet MS | Phông có chân cổ điển đậm chất thư pháp đặt trên phông không chân nhân văn: cả hai đều bắt nguồn từ nét bút, nên cặp này thấy liên quan mà không trùng lặp. | |
Garamond | Gill Sans | Hai phông quen thuộc của ngành in Anh. Chiều cao chữ x nhỏ của Garamond cần cỡ lớn hơn ở tiêu đề; Gill Sans giữ phần nội dung sắc nét. | |
Optima | Palatino | Cả hai đều do Hermann Zapf thiết kế, nên các nét loe và tỉ lệ nhân văn khớp nhau hoàn toàn. | |
Rockwell | Arial | Phông chân khối hình học tạo tiêu đề chắc chắn như áp phích; phần nội dung grotesque trung tính giữ cho trang không bị 'hét' hai lần. | |
Segoe UI | Segoe UI | Một họ phông, hai độ đậm. Tương phản chỉ bằng độ đậm và cỡ chữ là cách khó sai nhất — khi phân vân, hãy bắt đầu từ đây. | |
System UI | System Serif | Dùng đúng phông mặc định của hệ điều hành người đọc, nên không phải tải gì và trang không bao giờ rơi về một phông ngoài ý muốn. | |
Franklin Gothic | Times New Roman | Cặp phông của báo giấy: tiêu đề gothic nén bên trên, nội dung có chân hẹp và tiết kiệm diện tích bên dưới. | |
Consolas | Segoe UI | Dành cho tài liệu kỹ thuật: tiêu đề đều nét gợi ngay đến mã nguồn, còn Segoe UI giữ phần chữ xung quanh giản dị. | |
Century Gothic | Cambria | Chữ hoa hình học rộng đặt trên phông có chân gọn — chính khác biệt bề ngang tạo hiệu quả, nên hãy giữ tiêu đề thật ngắn. | |
Copperplate | Garamond | Chữ hoa nhỏ kiểu khắc đặt trên phông có chân cổ điển: trang trọng, nghi lễ, và chỉ nên dùng cho tiêu đề và thiệp mời. | |
Arial Black | Verdana | Tương phản độ đậm tối đa mà không xung đột phong cách — cả hai đều là grotesque, nên chỉ có độ đậm thay đổi. |
CSS
Dùng biến CSS thay vì khai báo trực tiếp, để bạn tái sử dụng --font-heading và --font-body thay vì lặp lại cả danh sách phông. Mỗi danh sách đều kết thúc bằng một họ phông tổng quát, 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.
/* Georgia headings + Verdana body */
:root {
--font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
--font-body: Verdana, Geneva, "DejaVu Sans", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
}
h1 {
font-size: 40px;
}
body {
font-family: var(--font-body);
font-size: 17px;
font-weight: 400;
line-height: 1.65;
}