Saat mendesain situs web, salah satu elemen kunci dari sebuah halaman yang akan Anda gunakan adalah konten teks. Dengan demikian, ketika Anda membangun laman web dan memberinya gaya dengan CSS, sebagian besar dari upaya itu akan berpusat di sekitar tipografi situs.
Desain tipografi memainkan peran penting dalam desain situs web. Konten teks yang ditata dengan baik membantu situs menjadi lebih sukses dengan menciptakan pengalaman membaca yang menyenangkan dan mudah untuk dikonsumsi. Bagian dari upaya Anda dalam bekerja dengan jenis adalah memilih font yang tepat untuk desain Anda dan kemudian menggunakan CSS untuk menambahkan font dan gaya font ke tampilan halaman. Ini dilakukan dengan menggunakan apa yang disebut "font-stack"
Font-Tumpukan
Ketika Anda menentukan font untuk digunakan pada halaman web, itu adalah praktik terbaik untuk juga menyertakan opsi fallback jika pilihan font Anda tidak dapat ditemukan. Opsi-opsi fallback ini disajikan dalam "tumpukan font." Jika browser tidak dapat menemukan font pertama yang tercantum dalam 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 diinginkannya). Berikut ini contoh bagaimana tumpukan font akan terlihat dalam CSS ketika diterapkan ke elemen "body":
body { font-family: Georgia, "Times New Roman", serif;}
Perhatikan bahwa kita menentukan font Georgia terlebih dahulu. Secara default, ini adalah apa halaman yang akan digunakan, tetapi jika font tersebut tidak tersedia karena alasan tertentu, halaman akan mundur ke Times New Roman. Kami melampirkan nama font itu dalam tanda kutip ganda karena itu adalah nama multi-kata. Nama font satu kata, seperti Georgia atau Arial, tidak memerlukan tanda kutip, tetapi nama font banyak kata membutuhkannya sehingga peramban mengetahui bahwa semua kata itu membentuk nama font. Jika Anda melihat akhir tumpukan font, Anda harus memperhatikan bahwa kita mengakhiri dengan kata "serif". Itu adalah nama keluarga font generik. Dalam kejadian yang tidak mungkin bahwa seseorang tidak memiliki Georgia atau Times New Roman di komputer mereka, situs tersebut akan menggunakan font serif apa pun yang dapat ditemukannya. Ini lebih disukai untuk memungkinkan situs untuk mundur ke font apa pun yang diinginkan, karena setidaknya Anda dapat mengetahui jenis huruf apa yang digunakan sehingga tampilan keseluruhan dan nada desain situs akan seutuhnya mungkin. Ya, browser akan memilih font untuk Anda, tetapi setidaknya Anda memberikan panduan sehingga tahu jenis font apa yang paling cocok dalam desain. Nama font generik yang tersedia dalam CSS adalah: Meskipun ada banyak klasifikasi font lain yang tersedia dalam desain web dan tipografi, termasuk slab-serif, blackletter, tampilan, grunge, dan banyak lagi, 5 nama font generik yang tercantum di atas ini adalah nama-nama yang akan Anda gunakan dalam font-stack di CSS. Apa perbedaan klasifikasi font ini? Mari lihat! Kursif font sering menampilkan bentuk surat yang tipis dan hiasan yang dimaksudkan untuk mereplikasi teks tulisan tangan yang mewah. Font-font ini, karena hurufnya yang tipis dan berbunga, tidak sesuai untuk blok besar konten seperti body copy. Font kursif umumnya digunakan untuk judul dan kebutuhan teks yang lebih pendek yang dapat ditampilkan dalam ukuran font yang lebih besar. Fantasi font adalah font yang agak gila yang tidak benar-benar masuk dalam kategori lain. Font yang mereplikasi logo terkenal, seperti bentuk huruf dari film Harry Potter atau Back to the Future, akan masuk dalam kategori ini. Sekali lagi, font-font ini tidak sesuai untuk konten tubuh karena mereka sering begitu bergaya sehingga membaca bagian teks yang ditulis dalam font ini terlalu sulit untuk dilakukan. Monospace font adalah tempat di mana semua bentuk huruf berukuran sama dan diberi jarak, seperti yang akan Anda temukan pada mesin tik tua. Tidak seperti font lain yang memiliki lebar variabel untuk huruf tergantung pada ukurannya (misalnya, modal "W" akan mengambil lebih banyak ruang daripada huruf kecil "i"), font monospace adalah lebar tetap untuk semua karakter. Font ini sering digunakan ketika kode ditampilkan pada halaman karena mereka terlihat sangat berbeda dari teks lain di halaman itu. Serif font adalah salah satu klasifikasi yang lebih populer. Ini adalah font yang memiliki ligatures ekstra pada bentuk huruf. Potongan ekstra itu disebut "serif". Font serif umum adalah Georgia dan Times New Roman. Font Serif dapat digunakan untuk teks besar seperti heading serta bagian panjang teks dan body copy. Sans Serif adalah klasifikasi terakhir yang akan kita lihat. Ini adalah font yang tidak memiliki ligatures tersebut. Namanya berarti "tanpa serif". Font populer dalam kategori ini adalah Arial atau Helvetica. Serupa dengan serif, font sans-serif dapat digunakan sama baiknya dalam pos dan konten tubuh. Keluarga Font Generik
