Tipografi adalah elemen mendasar dalam setiap pekerjaan desain web yang Anda lakukan. Alasan kami dipekerjakan untuk merancang situs web untuk klien kami adalah agar mereka dapat memberikan pengalaman yang menyediakan konten yang bermanfaat bagi penggunanya. Memiliki basis tipografi yang kuat akan membantu menampilkan konten dengan cara yang dapat dikonsumsi pengguna secara efektif. Meskipun mungkin ada banyak elemen desain lain di situs web, konten adalah pertimbangan utama, dan sebagai desainer, tugas kami adalah menyempurnakan proyek dengan pemilihan dan penggunaan tipografi.

Dasar-dasar tipografi

Font vs. jenis huruf

Sebelum kita terlalu jauh ke dalam diskusi tipografi, mari kita bahas istilah "font" dan "jenis huruf". Jenis huruf mengacu pada kumpulan simbol dan karakter tipografi: huruf, angka, dan karakter apa pun yang memungkinkan kami meletakkan kata di situs web kami. Ini adalah desain alfabet, pada dasarnya bentuk huruf yang membentuk gaya itu. Ketika kita merujuk ke Helvetica, kita mengacu pada jenis huruf.

Sebuah font didefinisikan sebagai set karakter lengkap dalam jenis huruf, sering mengacu pada ukuran dan gaya tertentu. Helvetica Bold 10 point adalah cara untuk mereferensikan font. Font khusus untuk file yang berisi semua karakter dan mesin terbang dalam jenis huruf.

Perdebatan hebat ini, "font vs. jenis huruf," membuat percakapan yang indah dengan sesama desainer. Untuk semua yang Anda ketik ngotot di luar sana, kita benar-benar berbicara tentang tipografi, tetapi "font web" paling banyak digunakan dalam percakapan.

Klasifikasi font

Saat Anda menemukan banyak tipografi yang tersedia di dunia, Anda harus terbiasa dengan bagaimana mereka diklasifikasikan. Cara yang paling umum adalah mengklasifikasikannya berdasarkan gaya teknis: serif, sans-serif, skrip, tampilan, dll. Tipografi juga diklasifikasikan berdasarkan spesifikasi lainnya seperti proporsional atau monospasi. Tergantung pada sumbernya, mereka mungkin menjadi sangat spesifik.

Sejarah tipografi yang aman untuk web

Pada hari-hari awal web, kami terjebak dengan opsi keamanan web, yang sangat membatasi. Agar pengguna dapat melihat font yang dimaksudkan oleh perancang, mereka harus memilikinya di komputer mereka. Jika Anda membuka lembar gaya dari situs lama, kemungkinan besar Anda akan menemukan Arial, Georgia, Times New Roman, Trebuchet MS, dan/atau Verdana. Itu adalah font yang paling mungkin ada di mesin pengguna, sehingga dianggap "aman untuk web" karena sebagian besar pengguna dapat melihat situs web sebagaimana dimaksud.

Jika Anda telah merancang situs web untuk sementara waktu, atau sudah lama menjadi peselancar web, Anda mungkin ingat hari-hari dengan pilihan tipografi terbatas. Belum lama ini kami melihat lima tipografi yang sama berulang-ulang saat kami menjelajahi web. Segalanya mulai terlihat membosankan tanpa opsi keamanan web lainnya, dan orang dapat berargumen bahwa tipografi ini bukan yang paling cocok untuk web (bagaimanapun, mereka memang berasal dari cetakan). Namun seiring dengan berkembangnya web, semakin banyak pilihan tipe yang tersedia.

Apa itu font web?

Karena tipografi sangat penting, inilah saatnya untuk merayakan bahwa langkah besar telah dibuat. Kami memiliki begitu banyak tipografi yang kami miliki sehingga kami sekarang dapat memilih yang terbaik untuk pengguna kami, daripada harus bergantung pada font web-safe lama yang sama yang pernah kami batasi.
Font web tidak diinstal sebelumnya pada sistem pengguna seperti font web-safe. Kami tidak harus bergantung pada pengguna yang memiliki font yang diinginkan di mesin mereka. Mereka berasal dari sumber yang disertakan sehingga setiap pengguna akan dapat melihat font yang ditentukan. Font ini diunduh oleh browser saat merender halaman web, dan kemudian diterapkan ke teks.

Cara menggunakan font web

Aturan @font-face

Aturan yang didukung secara luas ini memungkinkan kami mengunduh font dari server, atau menghostingnya, sehingga kami dapat menggunakannya di halaman web kami. Dengan mendeklarasikan aturan @font-face di stylesheet kita, kita dapat menentukan nama jenis huruf, lokasi, dan bobot font.

Contoh ini menunjukkan bagaimana kita menambahkan Open Sans Regular. Anda akan melihat sumbernya adalah folder font yang disertakan dalam proyek situs web.

@font-face {
font-family: 'Open Sans Regular';
src: url("../fonts/OpenSans-Regular-webfont.eot");
font-weight: normal;
font-style: normal;
}

Deklarasi di atas menambahkan font sehingga dapat digunakan. Bagaimana kita benar-benar membuatnya untuk ditampilkan?

.example{
font-family: "Open Sans Regular", Arial, sans-serif;

}

Anda dapat melihat bahwa nama font diatur ke "Open Sans Regular." Ini adalah nama font yang kemudian akan dirujuk dalam tumpukan font CSS kami, bersama dengan font fallback untuk berjaga-jaga jika font tidak dimuat karena alasan tertentu. Dalam kebanyakan kasus, font akan dimuat dengan baik, tetapi ada baiknya untuk menyertakan fallback, untuk berjaga-jaga.

Perlu diingat bahwa sebagian besar font memiliki keluarga lain, beberapa memiliki lebih dari yang lain. Untuk menggunakannya, pastikan Anda menyertakan masing-masing dengan aturan @font-face .

Format dan font web

Mari selami sedikit lebih dalam tentang font web, ketika ada banyak format yang Anda perlukan. Font ini di-host sendiri, dan disimpan di server dalam folder yang disebut "font." Anda akan melihat bahwa ada beberapa baris baru yang ditambahkan dari contoh terakhir.

@font-face {
font-family: 'Open Sans Regular';
src: url("../fonts/OpenSans-Regular-webfont.eot");
src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
url("../fonts/OpenSans-Regular-webfont.woff") format("woff"),
url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
font-weight: normal;
font-style: normal;
}

Ada alasan mengapa kita harus memasukkan format yang berbeda seperti: .eot, .woff, .ttf, .truetype, dan SVG. Peramban yang berbeda mendukung format font yang berbeda, jadi kami perlu menutupi basis kami dan menyediakan semua yang mungkin dibutuhkan berbagai peramban.

Berikut adalah daftar browser dan jenis file font apa yang mereka dukung:

• Internet Explorer – .eot
• Mozilla Firefox – .otf dan .ttf
• Safari dan Opera – .otf, .ttf, dan .svg
• Chrome – .ttf dan .svg
• Safari Seluler – .svg

Hosting font

Saat menggunakan font web, stylesheet membutuhkan font itu sendiri sehingga dapat dirender dalam desain Anda. Untuk alasan ini, Anda memerlukan file font untuk di-host di suatu tempat. Ada dua opsi untuk menempatkan font Anda. Anda dapat menggunakan layanan yang menghosting font untuk Anda atau Anda dapat menghosting sendiri dengan file font yang sebenarnya. Itu sangat tergantung pada proyek, masing-masing dengan keunggulannya sendiri.

Bergantung pada pendekatan yang Anda ambil, apakah itu dihosting sendiri atau dihosting dengan layanan font seperti Typekit, CSS akan terlihat berbeda. Seperti namanya, kit dibuat dengan Typekit. Ini berisi semua font yang akan Anda gunakan. Untuk mereferensikan file-file ini, Anda akan menambahkan potongan Javascript ke kepala dokumen HTML Anda. Ini memungkinkan Anda memuat aturan @font-face yang benar.

Penyedia Layanan Hosting

Ada terlalu banyak penyedia layanan hosting untuk disebutkan tetapi TypeKit, Fonts.com, H&Co (Hoefler and Company) adalah beberapa pilihan. Pada dasarnya, mereka memiliki font di server mereka, dan Anda bebas menggunakannya berdasarkan jenis akun yang Anda miliki.

Beberapa keuntungan dari pendekatan ini adalah:

• Umumnya penyedia ini memiliki lebih banyak pilihan font berkualitas tinggi karena mereka bergerak dalam bisnis tipografi.
• Font mudah digunakan/diinstal.
• Sangat mudah untuk mengubah tipografi selama proses desain atau membuat perubahan global.
• Karena mereka adalah file pihak ketiga, mereka dengan mudah di-cache oleh pengguna.
• Lebih sedikit permintaan HTTP menghasilkan peningkatan kinerja

Mengapa Anda harus mulai menggunakan Font Awesome

Font Awesome adalah kumpulan ikon kuat yang berisi ikon vektor yang dapat diskalakan. Dan yang luar biasa, itu gratis (set ikon bisa sangat mahal, membuat ini kesepakatan yang cukup manis). Ada banyak hal penting...

Cukup mudah untuk menambahkan font baru ke situs Anda. Misalnya, Fonts.com menyediakan tiga opsi penerbitan berbeda dengan keanggotaan paket premium. Ada opsi javascript (dengan Typekit juga) dan non-javascript yang menautkan ke stylesheet yang disajikan dan juga opsi yang dihosting sendiri. Tergantung pada apa yang Anda pilih, CSS Anda akan terlihat berbeda.

Pertimbangan penggunaan

Dengan font yang dihosting, lebih sedikit bisa lebih. Sangat penting untuk tidak menggunakan terlalu banyak atau mungkin ada masalah kinerja. Beberapa bobot dari font yang sama dianggap sebagai set tambahan, jadi pada dasarnya Anda memuat font lain. Ini adalah praktik yang baik untuk hanya memasukkan apa yang Anda butuhkan.

Hosting sendiri

Cukup mudah untuk menghosting sendiri font web. Yang harus Anda lakukan adalah memasukkan file font di server web Anda, dan itu akan diunduh secara otomatis ketika pengguna tiba di situs Anda.

Beberapa keuntungan dari self-hosting adalah:

• Tidak ada ketergantungan javascript untuk pengiriman font, yang Anda butuhkan hanyalah referensi CSS.
• Render font cepat.
• Tidak ada ketergantungan pada waktu aktif penyedia hosting font.
• Dengan font gratis dan dibeli, tidak akan ada biaya berlangganan atau batasan tampilan halaman.

Pertimbangan penggunaan

Sangat penting untuk memastikan Anda memiliki semua format yang dibutuhkan. Jika format tidak disertakan, itu akan menuju ke font fallback berikutnya. Memastikan Anda memiliki jalur yang benar ke font untuk sumber itu penting. Seperti yang kita lihat dalam contoh sebelumnya, sumbernya akan terlihat seperti ini:

src: url("../fonts/OpenSans-Regular-webfont.eot");

Di mana menemukan font web yang bagus?

Ada begitu banyak font web untuk dipilih; kami sangat beruntung memiliki semua opsi ini. Menemukan font yang sempurna lebih mudah dari sebelumnya.

Berikut adalah beberapa sumber bagus untuk font web:

• Typekit
• Font Web Google
• Hoefler dan Perusahaan
• Fonts.com
• FontTupai

Buat font web Anda sendiri

Secara kebetulan, jika Anda tidak dapat menemukan font yang sempurna, Anda selalu dapat membuatnya sendiri. Font Squirrel memberi Anda generator webfont yang akan mengubah font apa pun menjadi kit file web untuk disematkan. Hanya perlu diingat bahwa Anda harus meng-host ini. Untuk mempelajari lebih lanjut, lihat generator font web Font Squirrel. Sebagai peringatan, saat membuat font Anda sendiri, penting bagi Anda untuk memiliki hak untuk menggunakan font tersebut.
Font web adalah cara yang bagus untuk menambahkan font yang sempurna ke proyek web Anda berikutnya. Dengan berbagai pilihan jenis huruf, dan banyak sumber yang bagus, Anda tidak lagi terjebak dengan opsi web-safe tradisional. Mudah digunakan, dan menyenangkan untuk bereksperimen, font web adalah cara yang bagus untuk menambahkan kepribadian ke proyek situs web Anda.