Sementara gambar mendapatkan banyak cinta ketika datang ke situs web, itu adalah kata-kata tertulis yang menarik bagi mesin pencari dan membawa konten sebagian besar situs. Dengan demikian, desain tipografi adalah bagian yang sangat penting dari desain situs web. Dengan pentingnya teks sebuah situs muncul kebutuhan untuk memastikan bahwa itu terlihat bagus dan mudah dibaca. Ini dilakukan dengan style CSS (Cascading Style Sheets).
Mengikuti standar desain web modern, ketika Anda ingin mendikte tampilan konten teks situs web, Anda akan melakukannya menggunakan CSS. Ini memisahkan gaya CSS dari struktur HTML halaman. Sebagai contoh, jika Anda ingin mengatur font halaman ke "Arial", Anda dapat melakukannya dengan menambahkan aturan gaya berikut ke CSS Anda (catatan - ini kemungkinan akan dilakukan dalam lembar gaya CSS eksternal yang mendukung gaya untuk setiap halaman di situs web):
body {font-family: Arial; }Font ini diatur untuk "tubuh", sehingga cascade CSS akan menerapkan gaya ke semua elemen halaman lainnya. Ini karena setiap elemen HTML lainnya adalah turunan dari elemen "body", gaya CSS seperti keluarga font atau warna akan mengalir dari induk ke elemen turunan. Ini akan menjadi kasus kecuali gaya yang lebih spesifik ditambahkan untuk elemen-elemen tertentu. Satu-satunya masalah dengan CSS ini adalah hanya satu huruf yang ditentukan. Jika font tersebut tidak dapat ditemukan karena alasan tertentu, browser akan menggantikan yang lain di tempatnya. Ini buruk karena Anda tidak memiliki kontrol atas apa font yang digunakan - browser akan memilih untuk Anda, dan Anda mungkin tidak suka apa yang memutuskan untuk digunakan! Di situlah tumpukan font masuk.
Tumpukan font adalah daftar font dalam deklarasi font-keluarga CSS. Font terdaftar dalam urutan preferensi yang Anda ingin mereka muncul di situs jika ada masalah seperti font tidak memuat. Tumpukan huruf memungkinkan desainer mengontrol tampilan font di halaman web meskipun komputer tidak memiliki font awal yang Anda minta.
Jadi bagaimana tumpukan font terlihat? Berikut ini contohnya:
body {font-family: Georgia, "Times New Roman", serif; }Ada beberapa hal yang perlu diperhatikan di sini.
Pertama, Anda akan melihat bahwa kami memisahkan nama font yang berbeda dengan koma. di antara masing-masing Anda dapat menambahkan font sebanyak yang Anda inginkan, selama dipisahkan oleh koma. Browser akan mencoba memuat font pertama yang ditentukan terlebih dahulu. Jika gagal, itu akan berlari ke garis mencoba setiap font sampai menemukan satu yang bisa digunakan. Dalam contoh ini kita menggunakan font web yang aman, dan "Georgia" kemungkinan akan ditemukan pada komputer orang yang mengunjungi situs (catatan - browser terlihat di komputer Anda untuk font yang ditentukan pada halaman, sehingga situs tersebut benar-benar mengatakan komputer mana yang memuat font dari sistem Anda). Jika karena alasan tertentu font itu tidak ditemukan, font tersebut akan bergerak ke bawah tumpukan dan mencoba font berikutnya yang ditentukan.
Dalam hal font berikutnya, perhatikan bagaimana itu ditulis dalam tumpukan. Nama "Times New Roman", terbungkus dalam tanda kutip ganda. Ini karena nama font memiliki banyak kata. Setiap nama font dengan lebih dari satu kata (Trebuchet MS, Courier New, dll.) Harus memiliki nama dalam tanda kutip ganda sehingga browser mengetahui bahwa semua kata-kata itu adalah bagian dari satu nama font.
Akhirnya, kami mengakhiri tumpukan font dengan "serif", yang merupakan klasifikasi font generik. Dalam contoh yang tidak mungkin bahwa tidak satu pun dari font yang Anda beri nama di tumpukan Anda tersedia, browser malah akan menemukan font yang setidaknya jatuh ke dalam klasifikasi yang tepat yang telah Anda pilih. Sebagai contoh, jika Anda menggunakan font sans-serif seperti Arial dan Verdana, daripada mengakhiri tumpukan font dengan klasifikasi "sans-serif" setidaknya akan menjaga font di keseluruhan keluarga jika ada masalah beban. Harus diakui, itu harus sangat jarang bahwa browser tidak dapat menemukan font yang tercantum dalam tumpukan dan harus menggunakan klasifikasi generik ini, itu adalah praktik terbaik untuk memasukkannya tetap hanya untuk menjadi dua kali lipat aman.
Tumpukan Font dan Font Web
Banyak situs web saat ini menggunakan font web yang disertakan di situs bersama dengan sumber daya lain (seperti gambar situs, file Javascript, dll.) Atau ditautkan ke lokasi font di luar kantor seperti Google Fonts atau Typekit. Meskipun font ini harus memuat karena Anda menautkan ke file itu sendiri, Anda masih ingin menggunakan tumpukan font untuk memastikan bahwa Anda memiliki kontrol atas masalah yang mungkin timbul. Hal yang sama berlaku untuk font "aman web" yang seharusnya ada di komputer seseorang (perhatikan bahwa font yang telah kami gunakan sebagai contoh dalam artikel ini, termasuk Arial, Verdana, Georgia, dan Times New Roman, semua font web aman yang seharusnya di komputer seseorang). Meskipun kemungkinan hilangnya font sangat rendah, menentukan tumpukan font akan membantu mencegah desain tipografi situs sesering mungkin.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 8/9/17