Font Stack

Meskipun seni tipografi tidak sekedar memilih dan menggunakan font, tetapi tidak dapat dipungkiri bahwa pemilihan font adalah hal yang diutamakan. Tidak mungkin kita menggunakan font dari keluarga cursive seperti Comic Sans MS & Monotype Corsiva untuk menyusun sebuah laporan ilmiah.

Ketika membuat desain sebuah blog, akan sangat menyenangkan jika kita bisa menggunakan koleksi font yang kita sukai. Saya sangat menyukai font dari keluarga serif seperti Constantia & Palatino. Mungkin anda berbeda, lebih menyukai sans-serif semacam Helvetica atau Calibri.

Pengertian Font Stack

Kita menginginkan sebuah blog tampil dengan font Cambria, tetapi seperti yang kita ketahui, tidak semua OS terinstal font tersebut. Hal ini menyebabkan pengunjung akan melihat “penampilan yang berbeda” pada blog kita. Pada kode CSS, kita sering mendapati penggunaan beberapa font dalam bentuk list yang dipisahkan tanda koma yang disebut dengan font stack.

Font stack berfungsi untuk mengakomodir user yang tidak memiliki font tertentu pada komputernya. Jika OS tidak mampu mengidentifikasi font urutan pertama akan beralih pada urutan kedua dan seterusnya hingga pilihan terakhir jatuh pada generik serif pada komputer tersebut. Oleh karena itu sebaiknya kita tidak sembarangan dalam menentukan urutan dan memilih font yang digunakan.

Contoh sederhana adalah ketika saya menggunakan kombinasi Cambria & Georgia pada artikel Tipografi, beberapa pengguna GNU/Linux melihat perubahan pada layout. Hal ini disebabkan karena Cambria tidak terdapat pada GNU/Linux kebanyakan sehingga artikel ditampilkan dengan Georgia. Hal ini membuktikan kombinasi yang buruk pada font stack menyebabkan degradasi pada kualitas desain.

Implementasi

Michael Tuck dalam tulisannya 8 Definitive Web Font Stacks memberikan beberapa contoh CSS font stack dengan prioritas Windows fonts, Mac fonts, Linux fonts, universal, generic. Berikut ini adalah kedelapan contohnya:

1. Times New Roman-based

font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

2. Modern Georgia-based serif

font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

3. Traditional Garamond-based serif

font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

4. Helvetica/Arial-based sans serif

font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

5. Verdana-based sans serif

font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

6. Trebuchet-based sans serif

font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;

7. Impact-based sans serif

font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

8. Monospace

font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

Kesimpulan

Penggunaan font stack sangat penting terutama untuk mendukung desain (tipografi) sebuah web/blog. Kombinasi font stack yang baik membuat web/blog tampil konsisten baik pada Windows, Mac maupun GNU/Linux.

Comments

powered by Disqus