Temukan kombinasi font heading + body yang cocok satu sama lain. Pilih pasangan, pratinjau dengan teks Anda sendiri, dan salin CSS atau tautan Google Fonts ke proyek Anda.
Setiap pasangan menggabungkan font judul dengan font teks yang sudah diuji secara kontras visual dan kenyamanan baca: serif untuk judul dengan sans humanis pada paragraf, sans geometris dengan aksen monospace, font display kondensasi yang dipadu font teks andalan. Saring berdasarkan gaya, masukkan judul Anda sendiri ke pratinjau, lalu salin baris impor Google Fonts beserta CSS-nya.
Cara menggunakan
Langkah 1 — Telusuri pasangan font atau saring berdasarkan gaya (serif, sans-serif, display, monospace, tulisan tangan).
Langkah 2 — Klik pasangan untuk mempratinjau dengan teks sampel atau ketik teks Anda sendiri.
Langkah 3 — Salin tautan impor Google Fonts atau kode CSS untuk pasangan yang Anda pilih.
Kapan menggunakan
Memilih font judul dan badan untuk blog atau landing sebelum menulis CSS.
Menyegarkan tipografi deck presentasi atau portofolio tanpa mengutak-atik tata letak.
Mengaudit dua font yang sudah Anda pakai untuk memastikan keduanya memang serasi.
Hasil
Membangun blog: pilih pasangan 'Playfair Display + Source Sans 3', pratinjau judul Anda, dan salin CSS untuk ditempelkan ke stylesheet Anda.
FAQ
Apakah semua font ini gratis dan bisa dipakai komersial?
Ya. Semua pasangan diambil dari Google Fonts di bawah SIL Open Font License atau lisensi terbuka serupa. Anda boleh menyematkannya di situs komersial, menyertakannya dalam aplikasi, dan memakainya untuk proyek klien tanpa membeli lisensi.
Apa yang membuat dua font cocok dipasangkan?
Kontras yang dibarengi keserasian. Judul perlu karakter (serif, display, geometris tebal), sedangkan badan teks justru harus menghilang di balik keterbacaan. Pasangan di sini sengaja mencampur kategori: judul serif berkarakter dengan sans netral untuk paragraf.
Bolehkah memakai font yang sama untuk judul dan badan?
Boleh, terutama dengan super-family seperti Inter, Source Sans, atau Roboto yang punya banyak bobot. Mencampur dua font biasanya menambah dinamika visual, tetapi satu family dengan Regular dan Bold tetap rapi untuk dokumentasi dan dashboard.
Apakah memuat dua Google Fonts akan memperlambat halaman?
Dua family dengan satu bobot masing-masing menambah sekitar 30–50 KB dan satu permintaan HTTP ekstra. Self-host CSS yang dihasilkan, gunakan `font-display: swap`, dan batasi pada bobot yang benar-benar dipakai — efeknya nyaris tak terasa.
Bagaimana menjaga tipografi tetap konsisten setelah pasangan dipilih?
Tetapkan sebagai default lewat variabel `font-family` di CSS, kunci skala ukuran (misalnya rasio 1.25), dan jangan menambah font baru di dalam komponen. Dua font yang dipilih dengan cermat sudah cukup menopang sebagian besar dokumen.
