Catatan editor: Posting tamu ini ditulis oleh Abbey Fitzgerald seorang insinyur perangkat lunak UX dan desainer web yang menyukai seni membuat kode.

Tipografi adalah elemen mendasar dalam setiap pekerjaan desain web yang Anda lakukan. Alasan kami disewa untuk mendesain situs web untuk klien kami adalah agar mereka dapat memberikan pengalaman yang menyediakan konten bermanfaat bagi penggunanya. Memiliki basis tipografi yang solid 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, adalah tugas kami untuk menyempurnakan proyek dengan pemilihan dan penggunaan tipografi kami.

Dasar Tipografi

Font vs Typeface

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

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

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

Klasifikasi Huruf

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. Jenis huruf juga diklasifikasikan berdasarkan spesifikasi lain seperti proporsional atau monospasi. Bergantung pada sumbernya, mereka mungkin menjadi sangat spesifik.

Sejarah Tipografi Web-Safe

Pada hari-hari awal web, kami terjebak dengan opsi aman 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 menjelajahi web, Anda mungkin ingat hari-hari dengan pilihan tipografi yang terbatas. Belum lama ini kami melihat lima tipografi yang sama berulang kali saat kami menjelajahi web. Hal-hal mulai terlihat membosankan tanpa opsi web aman lainnya, dan orang dapat berargumen bahwa tipografi ini tidak cocok untuk web (bagaimanapun juga, mereka memang berasal dari media cetak). Namun seiring berkembangnya web, semakin banyak opsi jenis yang tersedia.

Apa itu Font Web?

Karena tipografi sangat penting, inilah waktunya untuk merayakan langkah besar yang 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 lama yang aman untuk web yang dulunya terbatas.
Font web tidak diinstal sebelumnya pada sistem pengguna seperti font yang aman untuk web. 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.

 [css]

@wajah font {
font-family: 'Buka Sans Reguler';
src: url("../fonts/OpenSans-Regular-webfont.eot");
font-berat: normal;
gaya font: normal;
}

[/css]

Deklarasi di atas menambahkan font sehingga dapat digunakan. Bagaimana kita benar-benar menampilkannya?

 [css]

.contoh{
font-family: "Buka Sans Reguler", Arial, sans-serif;

}

[/css]

Anda dapat melihat bahwa nama font disetel ke "Open Sans Regular". Ini adalah nama font yang kemudian akan direferensikan dalam tumpukan font CSS kami, bersama dengan font fallback untuk berjaga-jaga jika font tidak dimuat karena beberapa alasan. Dalam kebanyakan kasus, font akan dimuat dengan baik, tetapi sebaiknya sertakan 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 lebih dalam font web, ketika ada beberapa format yang Anda perlukan. Font ini dihosting sendiri, dan disimpan di server dalam folder bernama "font". Anda akan melihat bahwa ada beberapa baris baru yang ditambahkan dari contoh terakhir.

 [css]

@wajah font {
font-family: 'Buka Sans Reguler';
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-berat: normal;
gaya font: normal;
}

[/css]

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

Berikut 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 memerlukan font itu sendiri agar dapat dirender dalam desain Anda. Untuk alasan ini, Anda memerlukan file font untuk dihosting di suatu tempat. Ada dua opsi tempat menyimpan 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 proyeknya, masing-masing dengan keunggulannya sendiri.

Bergantung pada pendekatan mana 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 referensi 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 opsi. 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 pilihan font berkualitas tinggi yang lebih luas karena mereka berkecimpung 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

Sangat 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 ditautkan ke lembar gaya 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 banyak. 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 praktik yang baik untuk hanya memasukkan apa yang Anda butuhkan.

Hosting mandiri

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

Beberapa manfaat hosting mandiri adalah:

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

Pertimbangan penggunaan

Penting untuk memastikan Anda memiliki semua format yang diperlukan. 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 pada contoh sebelumnya, sumbernya akan terlihat seperti ini:

 [kode]

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

[/kode] 

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 yang bagus untuk font web:

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

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 font web yang akan mengonversi font apa pun menjadi kit file web untuk disematkan. Ingatlah bahwa Anda harus menghosting ini. Untuk mempelajari lebih lanjut, lihat pembuat font web Font Squirrel. Perhatian saja, saat membuat font Anda sendiri, penting bahwa Anda memiliki hak untuk menggunakan font itu.

Font web adalah cara terbaik untuk menambahkan font yang sempurna ke proyek web Anda berikutnya. Dengan beragam opsi jenis huruf dan banyak sumber bagus, Anda tidak lagi terjebak dengan opsi aman web tradisional. Mudah digunakan, dan menyenangkan untuk bereksperimen, font web adalah cara yang bagus untuk menambahkan kepribadian pada proyek situs web Anda.