CodeKitHubApa Itu Alat Ini?
Perpaduan font berarti memilih dua (kadang tiga) jenis huruf untuk digunakan bersama di satu halaman — biasanya satu untuk judul dan satu untuk isi teks — sehingga halaman memiliki hierarki visual tanpa terlihat tidak serasi atau monoton.
Setiap perpaduan di bawah menampilkan contoh yang dirender langsung: font judul di atas, font isi di bawahnya, menggunakan file Google Fonts asli, jadi apa yang Anda lihat adalah apa yang akan Anda dapatkan di situs Anda.
Setiap perpaduan dilengkapi tag sematan `<link>` Google Fonts yang siap pakai dan cuplikan CSS yang sesuai dengan deklarasi `font-family` untuk judul dan isi teks — salin keduanya dan selesai.
Mengapa Menggunakannya?
- 28 perpaduan pilihan tangan, bukan daftar yang dihasilkan otomatis — masing-masing dipilih karena kedua jenis huruf benar-benar saling melengkapi.
- Pratinjau langsung: setiap perpaduan dirender dengan font asli yang dimuat dari Google Fonts, bukan gambar statis atau tebakan berdasarkan nama font.
- Filter berdasarkan mood — Modern, Elegan, Berani, Minimalis, Klasik — untuk mempersempit pilihan sesuai nuansa yang dibutuhkan proyek Anda.
- Salin dengan satu klik, baik tag sematan `<link>` maupun aturan CSS `font-family`.
- Gratis, berjalan di browser Anda, tanpa perlu akun atau login.
Cara Menggunakan
- Opsional, klik filter mood (Modern, Elegan, Berani, Minimalis, Klasik) untuk mempersempit daftar, atau biarkan "Semua" terpilih untuk menjelajahi semuanya.
- Telusuri kartu pratinjau langsung — baris atas menampilkan font judul, baris bawah menampilkan font isi.
- Buka perpaduan yang Anda suka dan klik untuk membuka bagian kode sematan.
- Salin tag `<link>` ke `<head>` HTML Anda, dan salin cuplikan CSS ke stylesheet Anda untuk menerapkan font ke judul dan isi teks.
Contoh
Input
Blog eleganOutput
Playfair Display (judul) + Source Sans Pro (isi)Memfilter berdasarkan "Elegan" menampilkan judul serif berkontras tinggi dipadukan dengan isi sans-serif yang bersih dan sangat mudah dibaca — kombinasi umum untuk tata letak editorial dan blog.
Prinsip perpaduan font yang baik
- Kontras lebih baik daripada kemiripan: dua font yang terlihat hampir identik (misalnya dua sans-serif geometris yang mirip) cenderung terlihat seperti kesalahan, bukan pilihan yang disengaja. Padukan serif dengan sans-serif, atau font display yang tebal dengan font teks yang lebih ringan, agar perbedaannya terasa disengaja.
- Samakan tinggi-x dan proporsi: font yang huruf kecilnya memiliki tinggi visual serupa cenderung terasa seperti berasal dari halaman yang sama, meskipun gayanya berbeda — tinggi-x yang tidak cocok adalah salah satu alasan paling umum mengapa suatu perpaduan terasa "aneh".
- Batasi diri Anda pada dua keluarga font (kadang tiga): satu untuk judul, satu untuk isi teks, dan paling banyak yang ketiga untuk aksen seperti tombol atau label. Lebih dari itu, halaman mulai terasa tidak terencana.
- Pertimbangkan mood, bukan hanya bentuk: sans-serif yang bulat dan ramah dipadukan dengan serif yang formal mengirim sinyal yang bertentangan meskipun bentuk hurufnya secara teknis cocok — pilih font yang selaras baik dari segi nada maupun struktur.
- Uji pada ukuran sebenarnya: perpaduan yang terlihat bagus dalam pratinjau besar bisa kehilangan kontras pada ukuran isi teks, atau font display bisa menjadi sulit dibaca pada ukuran kecil — selalu periksa kedua ekstrem tersebut.
Memilih perpaduan berdasarkan kasus penggunaan
Landing page dan situs pemasaran biasanya diuntungkan oleh filter "Berani" atau "Modern" — font judul yang kuat dan berkontras tinggi menarik perhatian di bagian atas layar, dipadukan dengan font isi yang bersih dan netral yang memudahkan pembacaan cepat teks panjang.
Blog dan konten editorial sering kali paling enak dibaca dengan perpaduan "Elegan" atau "Klasik" — judul serif yang halus menandakan suara yang matang dan terkurasi, sementara isi serif atau sans-serif yang nyaman menjaga artikel panjang tetap mudah dibaca selama sesi membaca yang lama.
Situs e-commerce dan produk cenderung lebih menyukai perpaduan "Minimalis" — font yang bersahaja dan netral menjaga fokus pada foto produk dan harga, bukan pada tipografi itu sendiri, yang penting ketika puluhan kartu produk muncul di satu halaman.
Portofolio dan situs kreatif memiliki ruang paling luas untuk bereksperimen — perpaduan "Berani" atau "Elegan" dengan karakter yang lebih kuat bisa bekerja dengan baik karena audiensnya sebagian datang untuk menilai selera visual.
Catatan tentang performa dan lisensi
Tag sematan `<link>` memuat font dari CDN Google, yang cepat dan sudah di-cache di banyak situs yang mungkin pernah dikunjungi pengunjung Anda — tetapi tetap menambah satu permintaan eksternal. Untuk situs di mana setiap milidetik penting, mengunduh file font dan meng-hosting sendiri (dengan `font-display: swap` diatur secara manual) menghilangkan ketergantungan eksternal ini dengan konsekuensi sedikit lebih banyak usaha pengaturan.
Semua font di Google Fonts bersifat open source dan gratis untuk penggunaan komersial tanpa perlu atribusi, meskipun memberi kredit kepada perancang huruf adalah kesopanan yang baik ketika mudah dilakukan.
Pertanyaan yang Sering Diajukan
Apa yang membuat dua font "cocok dipadukan"?
Perpaduan yang baik menyeimbangkan kontras dan harmoni. Kontras — memadukan serif dengan sans-serif, atau font display tebal dengan font isi yang sederhana — menciptakan hierarki visual sehingga judul dan isi teks terasa jelas berbeda. Harmoni — tinggi-x yang serupa, ketebalan garis yang sebanding, dan kesan formalitas atau keceriaan yang sama — menjaga keduanya agar tidak bertabrakan. Perpaduan di sini dipilih dengan mempertimbangkan keduanya.
Apakah judul dan isi teks harus selalu menggunakan font yang berbeda?
Tidak. Menggunakan satu keluarga jenis huruf untuk keduanya (seperti perpaduan "Rubik + Rubik" di alat ini) juga bekerja dengan baik, selama font tersebut memiliki cukup variasi ketebalan untuk membedakan judul dari isi. Ini pilihan minimalis yang valid, bukan kesalahan.
Bagaimana cara menerapkan perpaduan ini ke situs saya?
Salin tag sematan `<link>` ke `<head>` halaman Anda untuk memuat font dari CDN Google, lalu salin cuplikan CSS ke stylesheet Anda — ini mengatur `font-family` untuk judul (h1, h2, h3) dan isi teks (body, p). Sesuaikan selector CSS jika struktur markup Anda berbeda.
Apakah memuat Google Fonts akan memperlambat situs saya?
Setiap file font tambahan menambah satu permintaan jaringan dan sedikit risiko menghambat rendering. Batasi hanya satu ketebalan untuk judul dan satu atau dua untuk isi, gunakan `display=swap` (sudah termasuk dalam kode sematan) agar teks tetap tampil dengan font cadangan saat webfont sedang dimuat, dan pertimbangkan untuk meng-hosting sendiri file font untuk situs produksi yang membutuhkan kecepatan muat maksimal.
Apakah font-font ini gratis untuk penggunaan komersial?
Ya. Semua font di Google Fonts, termasuk seluruh perpaduan yang ditampilkan di sini, dilisensikan di bawah SIL Open Font License atau Apache License — keduanya mengizinkan penggunaan komersial, modifikasi, dan distribusi ulang secara gratis tanpa royalti.