Panduan untuk Memasangkan Font untuk Desainer Web + 30 Contoh Luar Biasa!

Diterbitkan: 2021-01-27

Sebagai seorang desainer Web, Anda memiliki banyak keputusan besar untuk dibuat saat mengerjakan proyek Anda berikutnya. Palet warna, interaksi UI, tata letak, ilustrasi, tipografi… daftarnya terus bertambah. Namun, satu area desain web yang sering diabaikan adalah pemasangan font. Memilih font yang tepat adalah satu hal. Setelah Anda menetapkan suara dan gaya merek, mengidentifikasi font yang akan menyampaikan getaran yang diinginkan biasanya relatif mudah.

Tapi, mengapa memiliki satu font yang mewakili merek Anda dan berulang di seluruh situs web Anda, ketika Anda dapat memiliki dua? Kombinasi font yang sukses dan seimbang dapat membantu membangun hierarki pada konten Anda, membuat pengunjung tetap terlibat, dan menceritakan lebih banyak kisah tentang kepribadian dan pendekatan merek Anda.

Namun, pemasangan font bisa rumit. Lagi pula, Anda akan menambahkan satu lapisan kerumitan lagi ke dalam campuran. Tetapi, jika berhasil dilakukan, itu dapat membawa desain Anda ke tingkat yang sama sekali baru.

Pikirkan pasangan font seperti menemukan pasangan yang sempurna! Ada ribuan pilihan font di luar sana, beberapa di antaranya sangat indah dan dirancang dengan baik. Ketika banyak dari ini dipasangkan, mereka pada awalnya tampak berfungsi tetapi setelah mulai menggunakannya, menjadi jelas bahwa mereka bukan pasangan yang cocok. Sebagai contoh:

  • Dua font yang hampir identik mungkin terlihat seperti opsi yang aman tetapi dapat membuat hasilnya membosankan dan melelahkan bagi pembaca/pengguna.
  • Di sisi lain, dua font yang sangat berbeda satu sama lain dapat memberikan kesan membingungkan kepada pengguna tentang gaya merek Anda.
  • Jika kedua font Anda sangat mewah, tebal, dan dominan, keduanya akan mengacaukan hierarki Anda.

Jadi, seperti dalam hubungan, ini bukan tentang menemukan dua font yang identik, atau dua font yang berlawanan. Ini semua tentang keseimbangan dan saling melengkapi. Agar 'font couple' yang akan berhasil, mereka membutuhkan kerja sebagai tim untuk mewakili merek Anda dan menciptakan perasaan harmoni, fluiditas dan yang paling penting koherensi.

Cara Memasangkan Font

Tidak ada formula untuk menemukan kombinasi font yang sempurna dan, dengan ribuan font gratis yang tersedia secara online, ini bisa menjadi tugas yang memakan waktu, bahkan untuk desainer berpengalaman. Namun ada beberapa hal yang harus selalu Anda ingat, dan mudah-mudahan akan membantu Anda dalam prosesnya.

1. Menghasilkan Perasaan yang Diinginkan

Anda dapat memberi tahu banyak pengunjung tentang merek Anda hanya dengan memilih font dan gaya yang tepat. Kedua font yang Anda pilih harus selaras dengan merek Anda dan membantu membangkitkan emosi yang diinginkan audiens. Jika digunakan dengan benar, mereka bahkan dapat memengaruhi keputusan yang dibuat pengguna saat berada di situs.

Cobalah untuk memilih font yang mencerminkan suasana hati dan tujuan merek Anda tidak hanya secara individual tetapi juga dalam kombinasi. Misalnya, font serif dianggap lebih tradisional dan serius. Tapi, jika dipadukan dengan font sans serif modern, hasil keseluruhannya bisa benar-benar segar dan elegan.

2. Tetapkan Peran

Setiap font yang Anda pilih akan memiliki peran untuk dimainkan di situs web Anda dan Anda bertanggung jawab atas proses casting. Kemungkinan besar font yang terlihat bagus pada heading besar tidak akan bekerja dengan baik pada teks kecil. Jadi, Anda harus memikirkan 'peran' (gaya tipografi) yang akan Anda perlukan (seperti: teks isi, teks keterangan, judul besar, subjudul, dll.) dan pilih font Anda dengan mempertimbangkan hal ini.

Ini secara otomatis mempersempit opsi Anda sedikit, karena jelas bukan ide yang baik untuk menggunakan font skrip untuk judul dan teks besar. Jadi, pada prinsipnya, setidaknya salah satu font yang Anda pilih harus dibaca dengan baik dalam teks panjang dan dapat dibaca dalam ukuran kecil.

Di sisi lain, Anda bisa menjadi lebih kreatif dan memilih font yang berani dan unik untuk judul besar.

3. Keterbacaan & Keterbacaan

Apa pun gaya dan suasana hati yang Anda pilih untuk merek Anda, memiliki teks yang dapat dibaca dan terbaca di situs web Anda adalah suatu keharusan.

Keterbacaan adalah pengaturan font dan kata-kata untuk membuat konten tertulis mengalir dengan cara yang sederhana dan mudah dibaca. Ini sangat penting untuk blok teks yang besar. Font serif dan Sans-serif tidak diragukan lagi merupakan pilihan yang lebih baik dalam kasus ini. Font kursif atau slab di sisi lain, mungkin terbukti terlalu sulit untuk dibaca. Untuk heading, Anda dapat memberikan sedikit lebih banyak penekanan pada elemen keindahan dari calon font Anda. Tetapi untuk paragraf dengan potongan teks yang besar, keterbacaan selalu diutamakan.

Keterbacaan mengacu pada seberapa mudah membedakan huruf satu sama lain (huruf 'I' dan 'i' misalnya). Ini penting untuk teks besar, seperti heading dan yang lebih kecil. Jadi, pastikan font yang Anda pilih mudah dibaca dan terbaca dalam semua ukuran berbeda yang akan Anda gunakan, serta dalam huruf besar semua jika Anda berencana untuk menggunakan judul huruf besar apa pun di situs web Anda.

4. Jangan Takut Klasik

Banyak desainer web (termasuk saya, harus saya akui) enggan menggunakan tipografi klasik seperti Helvetica atau Baskerville karena terlalu sering digunakan. Namun, pemilihan dan pemasangan font bukan tentang bagaimana perasaan Anda tentang tipografi situs web Anda. Ini tentang bagaimana perasaan pengguna dan pengalaman mereka membacanya.

Jadi, tidak ada salahnya memilih salah satu klasik jika mereka menyelesaikan pekerjaan!

Aturan Pemasangan Font

Berikut adalah beberapa aturan sederhana namun penting untuk dijalankan saat memasangkan font:

Aturan #1: Jangan gunakan lebih dari tiga font di situs web Anda

Anda akan membutuhkan font untuk heading Anda yang terlihat bagus dalam ukuran yang lebih besar dan menarik perhatian pengunjung. Dan Anda akan membutuhkan font untuk teks tubuh Anda, yang dapat dibaca dan dibaca. Mulailah dengan memilih keduanya dan hanya menambahkan yang lain jika benar-benar diperlukan.

Terlalu banyak font dapat menciptakan pengalaman yang menggelegar, membingungkan pengguna tentang suasana hati dan gaya merek Anda dan membuat hasilnya sulit dibaca.

Aturan #2: Kontras itu Baik, Konflik Itu Buruk

Kombinasi font yang Anda pilih harus seimbang dan setiap font harus saling melengkapi. Ini berarti bahwa meskipun mereka terlihat berbeda atau berasal dari keluarga font yang berbeda, mereka harus memberikan hasil yang sama kepada para pengunjung.

Cara umum untuk memastikan hal ini terjadi adalah dengan memasangkan font serif dengan font sans-serif. Atau, Anda dapat menggunakan judul atau font tampilan dengan kepribadian yang berani dan menyeimbangkannya dengan font teks isi yang dirancang secara netral.

Apa pun yang Anda lakukan, pastikan font yang Anda pilih tidak saling berbenturan dalam hal gaya dan desainnya. Anda harus menemukan keseimbangan sempurna antara konflik dan kontras, jika tidak, Anda mungkin berakhir dengan gaya kontradiktif yang tidak terlihat bagus bagi pengguna akhir.

Aturan #3: Tidak apa-apa untuk berpasangan dalam Keluarga Super

Sama sekali tidak ada yang salah dengan menggabungkan font milik keluarga font yang sama, selama Anda menggunakan gaya yang berbeda. Sebagian besar keluarga font super hadir dengan beberapa lusin gaya berbeda, dari ekstra terang hingga ultra hitam. Plus, beberapa di antaranya mengandung alternatif serif dan sans-serif.

Mereka adalah pilihan pasangan yang aman karena mereka berbaur dengan baik satu sama lain. Selama Anda menggunakan bobot dan ukuran yang berbeda untuk menciptakan kontras, hasilnya bisa sukses, seimbang dan menarik.

Aturan #4: Pastikan font Anda berukuran dan berbentuk dengan benar

Pasangan font yang tepat tidak berhenti begitu Anda memilih font Anda. Untuk mencapai hierarki dan kontras yang diinginkan dalam konten situs web Anda, Anda harus memperhatikan berbagai ukuran dan bobot yang akan Anda gunakan untuk setiap font. Dua font yang digabungkan dengan baik tidak akan menghasilkan hasil yang diinginkan jika memiliki intensitas dan ukuran yang sama.

Fontjoy adalah alat yang berguna yang dapat digunakan untuk membantu Anda memeriksa seberapa kontras yang Anda inginkan antara gaya tipografi Anda. Ini juga memberi Anda cara cepat untuk melihat pratinjau bagaimana font Anda akan terlihat dalam berbagai ukuran.

30 Pasangan Font Google yang Menakjubkan

Lihatlah 30 pasangan font untuk menginspirasi Anda untuk proyek desain web Anda berikutnya!