Kombinasi Font Website: 6 Pasangan Google Fonts yang Cocok

Pasangan font yang bagus adalah font judul dan font teks yang cukup berbeda untuk bekerja sebagai tim, tetapi punya suasana yang sama. Titik awal yang aman adalah judul berserif dengan teks sans-serif yang bersih, misalnya Playfair Display + Source Sans 3. Di bawah ada enam pasangan dari Google Fonts, satu untuk tiap suasana, dan cara gratis untuk mencobanya di websitemu sebelum kamu menyentuh kode.

Apa yang membuat dua font jadi pasangan yang bagus

Bayangkan sebuah band. Penyanyinya adalah font judulmu, dan para pemain musik di belakangnya adalah font teksmu, yang dipakai untuk paragraf. Kalau semua berteriak bersamaan, tak ada yang mendengar liriknya. Pasangan yang bagus punya satu suara yang menonjol dan satu yang mendukungnya. Tiga aturan sederhana membawamu cukup jauh:

• Kontras, bukan bentrok. Pilih dua font yang jelas berbeda, seperti font berserif (huruf dengan kaki kecil di ujungnya, seperti di buku cetak) di samping sans-serif (huruf tanpa kaki itu). Dua font yang hampir sama hanya terlihat seperti kesalahan.
• Satu suasana. Font ceria yang membulat di samping font kaku yang formal mengirim sinyal campur aduk. Pilih font yang akan betah di ruangan yang sama.
• Dua font, jangan lebih. Satu untuk judul, satu untuk teks. Tambahkan variasi lewat ukuran dan ketebalan (seberapa tipis atau tebal hurufnya), bukan lewat font ketiga.

Klasik: Playfair Display + Source Sans 3

Playfair Display adalah font berserif dengan goresan tajam dan kontras tinggi yang agak mengingatkan pada halaman depan koran. Source Sans 3 adalah sans-serif yang tenang dan mudah dibaca, yang tidak berusaha mencuri perhatian. Cocok untuk blog, majalah, portofolio, dan apa pun yang ingin terlihat tepercaya.

Elegan: Cormorant Garamond + Montserrat

Cormorant Garamond adalah font berserif yang ringan dan anggun, dengan garis panjang yang halus. Montserrat adalah sans-serif lebar dan geometris yang memberinya pijakan modern. Bayangkan fesyen, kecantikan, pernikahan, dan restoran. Satu tips: Cormorant jadi tipis saat kecil, jadi simpan untuk judul besar.

Modern: DM Serif Display + DM Sans

DM Serif Display adalah font berserif tebal yang dibuat untuk judul besar. DM Sans adalah sans-serif yang bersih dan ramah dengan kesan lembut yang mirip, jadi keduanya berpadu baik. Pilihan bagus untuk startup, agensi, dan landing page yang ingin tampak segar tetapi tidak dingin.

Tegas: Oswald + Open Sans

Oswald tinggi dan sempit, jadi banyak kata muat dalam satu baris dan tetap terasa lantang. Open Sans lebar, terbuka, dan sangat mudah dibaca, sehingga menyeimbangkannya. Berguna untuk berita, olahraga, acara, dan di mana pun judul harus menarik perhatian.

Teknis: Space Grotesk + Inter

Space Grotesk punya tampilan geometris yang agak nyentrik, seolah berkata “kami membangun sesuatu”. Inter dirancang untuk layar dan tetap terbaca pada ukuran kecil, jadi ia yang membawa paragraf. Cocok secara alami untuk perangkat lunak, dasbor, dan alat pengembang.

Ramah: Quicksand + Nunito

Quicksand dan Nunito sama-sama berujung bulat lembut, jadi terasa seperti memang berjodoh. Hasilnya hangat dan mudah didekati. Pilihan bagus untuk pendidikan, anak-anak, aplikasi, makanan, dan situs komunitas.

Cara mencoba pasangan font di websitemu sendiri

Membaca tentang sebuah pasangan tidak sama dengan melihatnya di halamanmu sendiri, dengan kata-katamu sendiri. FontMee adalah ekstensi Chrome gratis, tambahan kecil yang memberi browser satu fitur baru, dan memungkinkanmu mencoba font di website sungguhan, hanya di layarmu. Pasangan font bahkan sudah tertanam: 32 pasang judul dan teks pilihan tangan, termasuk keenam di atas. Video menunjukkan panelnya beraksi.

1. Pasang FontMee. Tambahkan dari Chrome Web Store. Gratis dan tidak perlu akun. Klik ikon puzzle di Chrome lalu sematkan, supaya selalu hanya satu klik.
2. Buka websitemu dan klik ikon FontMee. Panel terbuka di samping halaman. Kamu juga bisa menekan Alt + Shift + F. Halaman milik Chrome sendiri (Tab Baru, Web Store, halaman chrome://) tidak bisa diubah.
3. Klik tombol Pasangan font. Kamu melihat daftar pasangan, masing-masing ditampilkan dengan font aslinya beserta label suasana seperti Klasik, Tegas, atau Teknis.
4. Tekan Pakai pasangan ini. Font judul dan font teks langsung berubah di halaman. Kalau kamu sudah memilih sebuah font, FontMee lebih dulu menyarankan pasangannya, di bawah Untuk dan nama fontnya.
5. Bandingkan dan atur. Beralih antara Font asli dan Pratinjau FontMee (atau tekan Alt + Shift + O) dan pakai Atur untuk ukuran, ketebalan, tinggi baris, dan jarak huruf. Coba dua atau tiga pasangan, karena yang menang di kartu contoh belum tentu menang di halamanmu. Pertahankan di situs menyimpan pilihanmu di setiap kunjungan, dan Reset semua mengembalikan halaman seperti semula.

Empat hal yang perlu dicek sebelum memutuskan

• Pakai kata-katamu sendiri. Pasangan yang tampak hebat di slogan pendek bisa terlihat lain pada nama produk aslimu atau paragraf panjang.
• Lihat teks kecil, dan di ponsel. Teks paragraf jauh lebih sering dibaca daripada judul, jadi harus nyaman pada ukuran kecil.
• Cek huruf yang kamu butuhkan. Aksen seperti é dan ç, serta huruf Kiril atau Vietnam, tidak ada di semua font. FontMee punya filter Aksara yang hanya menampilkan font dengan huruf yang kamu butuhkan.
• Cek lisensinya. Google Fonts bersifat sumber terbuka dan gratis untuk penggunaan komersial, tetapi font lain mungkin tidak.

Ini websitemu sendiri? Kalau begitu mencoba pasangan baru separuh pekerjaan. Saat kamu suka satu, tekan Salin CSS dan tempel aturannya ke stylesheet websitemu, berkas yang mengatur tampilan situs (di WordPress ada di Tampilan, Sesuaikan, CSS Tambahan). FontMee juga menampilkan lisensi tiap font dan bisa mengunduh ZIP berisi font untuk kamu host sendiri, sehingga browser pengunjungmu memuat font dari servermu sendiri, bukan dari Google. Sebuah website juga butuh rumah untuk tinggal, dan pembuat website adalah cara tercepat mendapatkannya tanpa kode.

Dapatkan ekstensinya

FontMee gratis, dengan 1.900+ font, 32 pasangan siap pakai, Salin CSS, dan unggah font milikmu sendiri. Tanpa akun, tanpa langganan. Tambahkan dari Chrome Web Store, atau baca dulu halaman FontMee.

Perlu diketahui sebelum mulai

Pertanyaan Umum