Typography adalah sebuah seni mengatur huruf/teks untuk membuatnya lebih mudah dibaca dan menarik secara visual. Teks merupakan konten utama dari hampir semua website. Walaupun anda membuat web yang fokus kepada multimedia (gambar dan video), namun tetap memerlukan teks untuk bagian keterangan/deskripsi. Menu navigasi sebuah website juga hampir semuanya terdiri dari teks.
Dalam artikel kali ini kita akan fokus membahas cara penggunaan property CSS yang berkaitan dengan typography atau teks. Selain itu, saya juga akan membahas konsep-konsep dasar property CSS seperti nilai length (pixel, em, %, dll), nilai color(#RBG, HSL) dan CSS3 vendor prefix.
Kecuali dinyatakan lain, hampir semua property typography di dalam CSS akan diturunkan ke child element, atau dikenal sebagai inherit property.
Property font-family
Pembahasan mengenai property CSS kita mulai dengan font-family. Property ini digunakan untuk mengatur jenis font. Nilai dari property font-family adalah nama font yang ingin digunakan. Berikut contoh penulisannya :
p {
font-family : Arial;
}
Kode CSS diatas akan men-set jenis font Arial pada semua paragraf. Akan tetapi, dari manakah font ini diambil?
Property font-family akan mencari font di dalam komputer client, yakni di dalam komputer pengunjung web browser, bukan di dalam komputer server tempat website berada.
Ini berarti kode CSS diatas hanya akan ditampilkan dengan font Arial apabila di dalam komputer pengunjung terdapat font bernama “Arial”. Jika tidak ditemukan, web browser akan menentukan sendiri font yang akan digunakan (tergantung settingan default web browser tersebut).
Bagi pengguna Windows, seluruh file font yang tersedia di komputer bisa dilihat dari
Control Panel -> Appearance and Personalization -> Fonts.
Untuk mengantisipasi tidak tersedianya sebuah font, kita bisa memberikan alternatif font pengganti, seperti contoh berikut :
p {
font-family : Arial, Helvetica, sans-serif;
}
Kali ini, kode CSS diatas memberikan pilihan kepada web browser: Cari seluruh tag <p>, kemudian gunakan font Arial. Apabila tidak ditemukan, gunakan font Helvetica. Apabila tidak ditemukan juga, gunakan font generic dengan tipe sans-serif.
CSS tidak membatasi seberapa banyak font alternatif yang bisa dipersiapkan, bisa 1, 3, bahkan 10 font :
p {
font-family : Arial, Helvetica, verdana, Geneva, Impact, Charcoal, sans-serif ;
}
Kode CSS diatas memberikan 7 alternatif font yang bisa dipilih, mulai dari Arial sebagai prioritas utama, kemudian Helvetica (jika Arial tidak tersedia), lalu Verdana (jika Arial dan Helvetica tidak ditemukan), dst. Walaupun kita bisa mempersiapkan banyak font alternatif, umumnya web designer hanya menulis maksimal 3 jenis font (2 font dan 1 font generic).
Perhatikan untuk setiap nama font dipisah dengan tanda koma: “ , ”. Khusus untuk nama font yang terdiri dari beberapa kata atau mengandung spasi, penulisannya harus berada diantara tanda kutip, seperti “Times New Roman“:
p {
font-family : "Times New Roman", Georgia, serif;
}
Property font-family termasuk ke dalam properti yang diturunkan ke dalam child element, atau dikenal sebagai inherit property. Oleh karena itu, jika kita ingin mengunakan sebuah jenis font untuk seluruh halaman, tinggal menempatkan property ini di dalam selector body :
body {
font-family : "Times New Roman", Georgia, serif;
}
Kode CSS diatas akan membuat seluruh element HTML yang berada di dalam tag <body> mengunakan font “Times New Roman“.