Desain tipografi memainkan peran penting dalam desain situs web. Konten teks yang ditata dan diformat dengan baik membantu situs menjadi lebih sukses dengan menciptakan pengalaman membaca yang menyenangkan dan mudah dikonsumsi. Bagian dari upaya Anda dalam bekerja dengan tipe adalah memilih font yang tepat untuk desain Anda dan kemudian menggunakan CSS untuk menambahkan font dan gaya font tersebut ke tampilan halaman. Ini dilakukan dengan menggunakan apa yang disebut tumpukan font.
Tumpukan Font
Ketika kamu tentukan font untuk digunakan pada halaman web, merupakan praktik terbaik untuk juga menyertakan opsi fallback jika pilihan font Anda tidak dapat ditemukan. Opsi mundur ini disajikan di tumpukan font. Jika browser tidak dapat menemukan font pertama yang terdaftar di tumpukan, itu akan berpindah ke yang berikutnya. Ini melanjutkan proses ini sampai menemukan font yang dapat digunakan, atau kehabisan pilihan (dalam hal ini hanya memilih font sistem yang diinginkan). Berikut adalah contoh tampilan font-stack di CSS saat diterapkan ke elemen "body":
tubuh {
font-family: Georgia, "Times New Roman", serif;
}
Font Georgia muncul pertama kali, jadi secara default, inilah halaman yang akan digunakan, tetapi jika font tersebut tidak tersedia karena alasan tertentu, halaman akan kembali ke Times New Roman.
Melampirkan Times New Roman dalam tanda kutip ganda karena merupakan nama multi-kata. Nama font satu kata, seperti Georgia atau Arial, tidak memerlukan tanda kutip, tetapi nama font multi-kata dengan spasi yang disematkan membutuhkannya sehingga browser mengetahui bahwa semua kata tersebut terdiri dari nama font.
Tumpukan font diakhiri dengan kata serif. Itu adalah nama font-family generik. Jika tidak mungkin seseorang tidak memiliki Georgia atau Times New Roman di komputer mereka, situs akan menggunakan font serif apa pun yang dapat ditemukan. Peramban akan memilih font untuk Anda, tetapi setidaknya Anda menawarkan panduan sehingga browser mengetahui jenis font apa yang paling cocok dalam desain.
Keluarga Font Umum
Nama font generik yang tersedia di CSS adalah:
- kursif
- fantasi
- ruang tunggal
- serif
- Sans Serif
Meskipun ada banyak klasifikasi font lain yang tersedia dalam desain web dan tipografi, termasuk slab-serif, blackletter, display, grunge, dan banyak lagi, lima nama font generik ini adalah yang akan Anda gunakan dalam tumpukan font di CSS.
- Font kursif — sering kali menampilkan bentuk huruf tipis berhias yang dimaksudkan untuk meniru teks tulisan tangan yang mewah. Font ini, karena hurufnya yang tipis dan berbunga-bunga, tidak sesuai untuk blok konten yang besar seperti body copy. Font kursif umumnya digunakan untuk heading dan kebutuhan teks yang lebih pendek yang dapat ditampilkan dalam ukuran font yang lebih besar.
- Font fantasi — adalah font yang agak gila yang tidak termasuk dalam kategori lain. Font yang meniru logo terkenal, seperti bentuk huruf dari Harry Potter atau Kembali ke masa depan film, termasuk dalam kategori ini. Font-font ini tidak sesuai untuk isi badan karena seringkali terlalu bergaya sehingga membaca bagian teks yang lebih panjang yang ditulis dalam font-font ini terlalu sulit untuk dilakukan.
- Font monospace — menampilkan bentuk huruf dengan ukuran dan spasi yang sama seperti yang Anda temukan pada mesin tik lama. Tidak seperti font lain yang memiliki lebar variabel untuk huruf tergantung pada ukurannya (misalnya, huruf kapital W membutuhkan lebih banyak ruang daripada huruf kecil saya), font monospace menggunakan lebar tetap untuk semua karakter. Font ini sering digunakan untuk pembacaan kode karena terlihat sangat berbeda dari teks lain di halaman itu.
- Font serif — gunakan sedikit pengikat ekstra pada bentuk huruf. Potongan ekstra itu disebut serif. Font serif yang umum adalah Georgia dan Times New Roman. Font serif sangat cocok untuk teks besar seperti heading serta bagian teks dan body copy yang panjang.
- Sans Seriffont - tidak memiliki ikatan. Namanya berarti tanpa serif. Jenis huruf populer dalam kategori ini antara lain Arial atau Helvetica. Mirip dengan serif, font sans-serif memiliki performa yang sama baiknya dalam heading maupun konten isi, meskipun beberapa para ahli lebih suka blok teks besar menghindari font sans-serif karena lebih sulit dibaca pada titik kecil ukuran.