ID

Kombinasi font – pasangan font untuk judul dan teks

Pilih pasangan font dan langsung lihat bagaimana judul dan teks tampil bersama – bisa juga dengan teks Anda sendiri. Setiap pasangan hanya memakai font sistem yang sudah terpasang: tidak ada yang diunduh, tidak ada permintaan ke Google atau server lain. Di setiap pasangan ada alasan kecocokannya, x-height yang diukur, dan ketersediaannya per sistem operasi.

px
Judul ditampilkan 1,8 kali lebih besar.
Input Anda hanya disimpan di browser ini.

Pratinjau

Seni membuat judul yang baik

Tipografi yang baik tidak mencolok. Ia menuntun mata dengan tenang di sepanjang teks, membangun hierarki yang jelas, dan membiarkan isi yang berbicara – di HP maupun di monitor besar.

Teks Anda tetap di jendela browser ini – tidak disimpan, tidak dikirim, dan tidak masuk ke address bar.

CSS untuk disalin

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.2;
}
body {
  font-family: Verdana, Tahoma, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

Semua pasangan font

Hasil

Pasangan font
Georgia + Verdana
Mengapa cocok
Kontras klasik serif dan sans serif: Georgia untuk judul, Verdana untuk teks. Keduanya dirancang Matthew Carter khusus untuk layar, sehingga proporsi dan ritmenya selaras. x-height Verdana sangat besar dan hurufnya lebar – atur teks sekitar 1 px lebih kecil.
x-height (diukur)
Georgia: 0,481 em · Verdana: 0,545 em – teks tampak sekitar 13% lebih besar pada ukuran font yang sama
Ketersediaan per sistem operasi
SistemJudulTeks
Windows 10/11GeorgiaVerdana
macOSGeorgiaVerdana
iPhone/iPadGeorgiaVerdana
AndroidNoto Serif (pengganti)Roboto (pengganti)

Cara menghitung

Bagaimana cara memadukan font?

Dua font cocok dipakai bersama jika jelas berbeda tetapi strukturnya mirip. Cara paling aman adalah kombinasi font serif dan sans serif: satu untuk judul, satu untuk teks. Sebaliknya, dua font serif atau dua sans serif yang mirip mudah terlihat seperti kesalahan.

Sama pentingnya adalah x-height – tinggi huruf kecil relatif terhadap ukuran font. Font dengan x-height besar (Verdana: 0,545 em) tampak jauh lebih besar pada ukuran yang sama dibanding font dengan x-height kecil (Calibri: 0,464 em). Jika x-height sebuah pasangan sangat berbeda, seimbangkan dengan ukuran font. Nilai yang ditampilkan diambil dari tabel OS/2 file font Windows 11.

Mengapa hanya font sistem?

Font sistem sudah terpasang di perangkat: halaman terbuka lebih cepat, teks tidak bergeser saat dimuat, dan tidak ada permintaan ke server pihak ketiga. Memuat web font langsung dari CDN font mengirim alamat IP setiap pengunjung ke penyedia tersebut – di Eropa ini menjadi masalah privasi menurut GDPR. Jika Anda ingin web font khusus seperti Poppins atau Montserrat, host sendiri di server Anda.

Font stack: mengapa ada beberapa nama?

Tidak ada font yang terpasang di semua sistem. Karena itu CSS mencantumkan beberapa font berurutan (font stack): browser memakai yang pertama terpasang, dan keluarga umum seperti serif atau sans-serif menangkap sisanya. Tabel menunjukkan font mana yang benar-benar tampil di Windows, macOS, iPhone/iPad, dan Android – berdasarkan daftar font Microsoft dan Apple serta konfigurasi font Android (diakses 27.09.2026). Android tidak punya Georgia dan Verdana; sebagai gantinya tampil Noto Serif atau Roboto. Distribusi Linux membawa font berbeda tergantung instalasinya.

Tips teks yang mudah dibaca

Pertanyaan umum

Kombinasi font apa yang bagus?

Pasangan serif dan sans serif adalah pilihan aman, misalnya Georgia dengan Verdana, Palatino dengan font antarmuka sistem, atau Cambria dengan Calibri. Yang penting adalah kontras yang jelas dan x-height yang mirip.

Font apa yang cocok untuk judul?

Untuk judul, pilih font yang jelas berbeda dari font teks: serif berkarakter seperti Georgia atau Palatino di atas teks sans serif, atau sans serif tegas seperti Verdana di atas teks serif. Buat judul 1,6–2 kali lebih besar dan tebal.

Berapa banyak font yang sebaiknya dipakai di satu situs web?

Paling banyak dua: satu untuk judul, satu untuk teks. Tambahkan font ketiga, misalnya monospace untuk kode, hanya jika punya tugas sendiri.

Apakah Georgia dan Verdana tersedia di semua perangkat?

Di Windows, macOS, dan iOS ya. Di Android tidak, dan yang tampil adalah Noto Serif atau Roboto – karena itu setiap font stack sebaiknya diakhiri dengan keluarga umum seperti serif atau sans-serif.

Apa itu x-height?

Tinggi huruf kecil x relatif terhadap ukuran font. x-height yang besar membuat teks lebih mudah dibaca pada ukuran yang sama, tetapi membutuhkan jarak baris sedikit lebih besar.

Mengapa tidak memakai Google Fonts langsung dari CDN?

Dengan begitu setiap tampilan halaman mengirim alamat IP pengunjung ke penyedia font, dan perlu unduhan tambahan sebelum teks tampil. Font sistem menghindari keduanya; font khusus bisa di-host di server Anda sendiri.

Apakah teks pratinjau saya disimpan?

Tidak. Judul dan teks Anda hanya tetap di jendela browser ini. Yang diingat hanya pasangan yang dipilih dan ukuran font.

Sumber dan dasar hukum

Diperbarui:

Alat terkait