Font adalah desain grafis yang diterapkan pada kumpulan angka, simbol, dan karakter. Font menentukan ciri seperti jenis huruf, ukuran, jarak, dan pitch. Font digunakan untuk mencetak teks pada berbagai perangkat output dan untuk menampilkan teks di layar. Font memiliki gaya font seperti italic (miring), bold (tebal), dan bold italic (tebal miring).
Google Fonts merupakan layanan dari Google yang menyediakan Font secara online melalui CDN dan bahkan kita bisa mendownload Font disana secara gratis dan tidak dibatasi, karena di Google Font, semua Font berlisensi Open Source.
Nah, pada artikel kali ini, saya akan memberikan penjelasan singkat tentang jenis-jenis font, tips memilih font, langkah-langkah bagaimana cara mendownload Font di Google Fonts, serta memasang font tersebut di windows dan website.
Jenis-jenis Font dan Klasifikasi-nya
Secara garis besar, jenis font dapat dibagi menjadi 5 jenis berdasarkan gaya dan ciri khas setiap font-nya, berikut ke-5 penjelasannya.- Serif; jenis font ini memiliki ciri khas berupa garis kecil (kait) di bagian ujung setiap huruf. Sangat cocok digunakan untuk paragraf atau judul.
- Sans Serif; jenis font ini adalah kebalikan dari Serif, karena di bagian ujung setiap huruf tidak terdapat garis kecil (kait). Sangat cocok digunakan untuk paragraf atau judul.
- Display; disebut juga dengan Decorative, memiliki ciri yaitu ukurannya yang besar. Sangat cocok digunakan untuk judul atau tipografi pada desain.
- Handwriting; dikenal juga dengan Script, didasarkan dari bentuknya yang hampir menyerupai tulisan tangan huruf bersambung. Cocok untuk tipografi desain.
- Monospace; memiliki spasi jarak horizontal dengan ukuran yang sama antara semua huruf. Biasa ditampilkan untuk penulisan kode (source code).
Tips Memilih Font
Font yang bagus adalah yang mudah dibaca, jelas, dan tidak melelahkan mata.Terkait tentang penerapannya pada website; berikut beberapa tips dalam memilih font.
- Batasi font dalam satu website agar tidak lebih dari 3 font.
- Kecocokan antara font yang satu dengan font yang lain.
- Pertimbangkan ukuran font.
- Konsisten di setiap browser.
Cara Mendownload Fonts di Google Fonts
Catatan:
Gambar pada bagian ini telah diperbarui dan sesuai dengan tampilan dari website Google Fonts yang baru, untuk mendownload keseluruhan ukuran dan gaya tulisan secara mudah, tinggal klik pada tombol Download Family di bagian atas kanan setiap laman detail font. Tambahan; untuk tombol Download Family pada tampilan mobile tidak tersedia.
- Buka Website Google Fonts,
- Search lalu pilih font yang sedang trending, klik kotak informasi seperti dibawah ini untuk membuka detail font,
- Akan muncul laman detail font yang dipilih sebelumnya seperti berikut, untuk mendownload font tersebut tinggal klik pada tombol Download Family di bagian atas laman,
- Dan selesai, Demikian,
Cara Menginstall Google Fonts di Windows
- Buka font yang telah didownload.
- Klik dua kali setiap file ber-ekstensi
.ttf. - Klik Install di bagian atas jendela.
- Tunggu hingga loading instalasi selesai.
- Dan Font tersebut sudah bisa digunakan di setiap aplikasi Windows.
Cara Memasang Google Fonts di Website
- Masih di Website Google Fonts.
- Pilih jenis font yang akan dipasang di website.
- Buka Font tersebut.
- Jika ada beberapa pilihan atau gaya tulisan, silakan pilih hanya yang dibutuhkan saja dengan cara klik tombol Select this style.
- Jika font dirasa terlalu banyak, bisa menghapus daftar tersebut dengan cara klik tombol Remove this syle.
- Setelah itu klik tab menu Embed pada sidebar yang muncul di bagian kanan laman.
- Pilih metode
<link>. - Copy kode di bawahnya, lalu paste di dokumen HTML yang diinginkan, tepatnya di bagian
<head> ... </head>. - Untuk mengganti keseluruhan jenis font yang digunakan pada sebuah website dengan format sebagai berikut:
Ganti kode yang ditandai dengan tag html, class, atau id yang akan diganti font-nya.body .page #page1 { font-family:'Caveat',cursive; } - Simpan dokumen tersebut dan lihat hasilnya.
Video Tutorial Tentang Google Fonts
Untuk praktik yang lebih jelas, bisa menyimak video tentang Google Fonts di bawah ini.Demikian tutorial kali ini, Semoga bermanfaat.
Referensi:
[1] https://fonts.google.com
[2] https://www.toptal.com/designers/typography/typeface-classification