Font Serif, Sans-Serif dan Monospace untuk halaman web

Pada dasarnya, font dapat kita klasifikasikan kedalam dua kategori: Serif dan Sans Serif.

Dalam definisi yang sangat sederhana, serif adalah detail berupa “stroke” dari sebuah huruf. Saya sih menyederhanakannya dengan istilah “ekor“. Font Serif adalah font yang memiliki detail berupa “ekor” dari font tsb. Contoh font Serif: New Times Roman, Georgia, Bodoni, dll.

Sedangkan Sans-Serif adalah font yang tidak memiliki serif (sans = tanpa. diambil dari istilah latin sine, dari istilah perancis sans yang berarti “without”. CMIIW). Jadi sederhananya, font sans-serif adalah font yang tidak memiliki “ekor”. Contoh font Sans-Serif adalah Arial, Helvetica, Tahoma, dll.

Penggunaan font serif dan sans-serif pada desain web

Yang membuat font Serif dan Sans-Serif perlu dipahami adalah penggunaannya:

Font Serif lebih banyak digunakan pada media print karena “ekor”nya itu mempermudah pembaca untuk membedakan huruf-huruf. Sementara itu, Font Sans-Serif lebih direkomendasikan untuk digunakan pada web karena halaman web disajikan dalam layar monitor dan layar monitor “bergantung” pada resolusi layar. Yang menjadikan font Sans-Serif lebih direkomendasikan untuk halaman web daripada font Serif adalah “ekor” dari font yang akan menjadi blur jika disajikan di layar dengan resolusi rendah.

Coba lihat halaman ini untuk lebih jelasnya.

Anjurannya sudah berubah

Terlepas dari penjelasan teknis yang saya jelaskan sebelumnya, anjuran penggunaan Serif untuk print dan Sans-Serif untuk halaman web sudah mulai ditinggalkan. Setidaknya, ada dua hal yabg menyebabkan hal ini terjadi:

  1. Mulai tersebarnya penggunaan layar monitor yang lebih baik sehingga keterbacaan font Serif hari ini turut lebih baik. Well, sebenarnya yang menentukan bukan layar monitor saja sih, tapi Operating System dan pengaturannya juga. Contoh umum: Coba anda lihat halaman web yang menggunakan font Serif di Windows XP (yang belum di-enable ClearType sih sebaiknya) menggunakan browser apa saja (umumnya sih Firefox). Patah-patah dan terlihat menyeramkan bukan?
  2. Diadaptasinya gaya media print ke dalam media web. Smashing Magazine (salah satu blog paling populer mengenai web design & development) memasukan “Print Design Influence” sebagai salah satu trend desain di tahun 2010. Salah satu print design influence ini ya penggunaan font Serif untuk body text

Monospace

Selain Serif dan Sans-Serif, ada satu jenis font lagi yang perlu diketahui: monospace. Font Monospace adalah font dengan lebar karakter yang sama satu sama lain. Pada halaman web, font monospace umumnya digunakan untuk penulisan kode bahasa pemrograman atau instruksi.

Contoh font monospace adalah Courier, Lucida Console, dan Monaco. Font yang digunakan pada mesin tik juga umumnya bertipe monospace.

17 thoughts on “Font Serif, Sans-Serif dan Monospace untuk halaman web

  1. jenis font sans-serif juga lebih mudah dibaca di media outdoor

    1. wah, terima kasih sekali masukannya. Jadi belajar hal baru saya ๐Ÿ˜€

  2. […] Terbaru fikrirasyid on Menulis deklarasi doctypeAMYunus on Menulis deklarasi doctypefikrirasyid on Font Serif, Sans-Serif dan Mon…Tookangweb on Font Serif, Sans-Serif dan Mon…fikrirasyid on Menulis deklarasi […]

  3. Mas Fikri,

    “Pada dasarnya, font dapat kita klasifikasikan kedalam dua kategori: Serif dan Sans Serif.”

    Font/TypeFace tidak cukup atau malah tidak dapat diklasifikasikan dalam dua kategori itu saja. Karena ada empat klasifikasi dasar, yaitu :
    ยป Serif (Old Style, Transitional, Modern, Slab Serif — beberapa menjadikan Slab Serif menjadi satu kategori sendiri),
    ยป Sans Serif (tonggaknya adalah Helvetica –1957, walau diawali jauh sebelum itu),
    ยป Script (dulu lebih berarti ke tulisan tangan, dari orang dewasa ke anak kecil, kini lebih ke tulisan sambung)
    ยป Decorative (beberapa menyebut display, juga digital)

    Nah si monospace ini tidak dapat dimasukkan ke dalam klasifikasi font/typeface tadi. Lebih tepat berdasarkan fungsinya sebagai font untuk komputer juga terminal komputer, awalnya dibuat karena keterbatasan fungsi grafis di era tersebut. Dan terkelompokkan karena kesamaan lebar karakter tadi.

    Monospace sendiri ada yang masuk ke klasifikasi serif maupun sans-serif.

    1. Wah, terima kasih sekali untuk masukannya Pak ๐Ÿ˜€ Sesuai dengan kata keterangannya, saya mencoba “menyederhanakan” kategorisasi font yang sering digunakan dalam web desain secara teknis. Jika dilihat dari perspektif desain grafis secara keseluruhan sudah barang tentu kategorisasi yang saya buat ini kurang tepat ๐Ÿ˜€

      Bagaimanapun, sepengetahuan saya dan hasil pencarian di berbagai sumber, secara teknis kategorisasi serif – sans serif dan monospace banyak digunakan karena alasan penggunaannya secara umum:

      • sans-serif: mudah dibaca dalam format digital (mengingat keterbatasan resolusi). Banyak digunakan untuk body text.
      • serif: lebih elegan dan lebih memberikan kesan. banyak digunakan untuk heading meskipun seiring dengan beranjak baiknya resolusi kebanyakan komputer, digunakan juga untuk heading
      • monospace: banyak digunakan untuk menuliskan source code / script2 bahasa pemrograman yang didistribusikan via halaman web.

      Note: yang saya sebutkan ini secara umumnya saja, pengecualian selalu ada.

      sedangkan untuk jenis decorative dan script, sepengetahuan saya penggunaannya jarang sekali dalam web -kecuali untuk unsur2 visual.

      Itu sepengetahuan saya sih. Please correct me if i’m wrong ๐Ÿ™‚

      1. sama saja dengan ilmu dasar mas… mesti kumplit ๐Ÿ™‚ dan fundamental klasifikasinya typeface selalu disebutkan seperti itu, baik cetak maupun screen design.

        dan melihat perkembangan web/interface design/screen design tinggal masalah waktu untuk ‘bersahabat’ dengan web… dan malah sudah dimulai bukan? terlebih seperti mas fikri bilang, trend web/interface design itu sendiri makin bergerak dengan referensi print design ๐Ÿ™‚

        1. Well, it makes sense ๐Ÿ™‚ belum pernah dapat rujukan yang seperti itu, jadi kesimpulannya masih yang seperti ini. Bisa minta referensi lebih detail mengenai typrface Pak?

          Yap, sepengetahuan saya memang arahnya kesana sekarang. Digital publishing ๐Ÿ™‚

          1. “kitab” nya sama-sama smashingmagazine.com kok mas… jadi nggak bakal ada hal baru yang bisa di-sharing ๐Ÿ™‚ … tapi bila ketertarikannya lebih mendalam lagi, saya rasa http://spiekermann.com/en/ , http://ilovetypography.com/ dan http://www.emigre.com/ selalu menarik untuk menjadi tempat belajar ๐Ÿ™‚

          2. whoah, thanks untuk referensinya Pak ๐Ÿ˜€

  4. Dalam web typography, sebenarnya tidak masalah antara serif dengan sans-serif, perhatikan saja font yang digunakan.

    Mengenai faktor legibilitas, saat ini telah muncul font-font generasi terbaru seperti Cambria (serif) yang lebih legible untuk media layar. Saya pribadi menilai bahwa serif lebih baik untuk extended reading daripada sans-serif, selain itu juga lebih estetis.

    1. wah, saya rasa sih masalah sekali. coba bandingkan font serif dan sans-serif di setup kebanyakan user: Windows XP ๐Ÿ™‚

      1. Permasalahannya terletak pada rendering font ya. Secara default, win XP tidak mengaktifkan fitur clear-type font (antialiasing) sehingga font serif pada ukuran 12px ke bawah bisa dipastikan tidak terbaca.

  5. Kalau denger dan lihat jenis font serif penerawangan saya langsung melihat KORAN ๐Ÿ˜€

    1. Koran? Haha, seperti melihat koran maksudnya? ๐Ÿ™‚

  6. […] Font Serif, Sans-Serif dan Monospace untuk halaman web […]

  7. oh udah ga berlaku lagi yak kalo serif untuk cetak trus kalo sans serif untuk digital? ๐Ÿ™„ baru tahu karena baru baca ini.

    1. Sepengetahuan saya, serif untuk cetak dan sans serif untuk digital sudah tidak terlalu relevan lagi karena screen dengan kualitas yang semakin bagus sudah kian menjadi standar penggunaan ๐Ÿ™‚

Share Your Thought