Font Serif, Sans-Serif dan Monospace untuk halaman web

Written by Fikri Rasyid

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.

About The Author

Fikri Rasyid - I speak HTML + CSS + jQuery, breath in world wide WordPress-land, co-founded WPNest and currently pursuing my bachelor degree majoring English Education at Indonesia University of Education. Google my name for more information about me.

Connect & Subscribe

Keep in touch and get my latest content trough:

Categories

Post Info

15 Responses for This Thought

  1. Tookangweb

    25 July 2010

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

    Reply
    • fikrirasyid

      25 July 2010

      wah, terima kasih sekali masukannya. Jadi belajar hal baru saya :D

      Reply
  2. Deklarasi-deklarasi CSS untuk mengelola tipografi halaman web « Outstando

    28 August 2010

    [...] 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 [...]

    Reply
  3. danu.widhyatmoko

    14 September 2010

    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.

    Reply
    • fikrirasyid

      15 September 2010

      Wah, terima kasih sekali untuk masukannya Pak :D 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 :D

      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 :)

      Reply
      • danu.widhyatmoko

        16 September 2010

        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 :)

        Reply
        • fikrirasyid

          18 September 2010

          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 :)

          Reply
  4. ArdianZzZ

    22 September 2010

    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.

    Reply
    • fikrirasyid

      28 September 2010

      wah, saya rasa sih masalah sekali. coba bandingkan font serif dan sans-serif di setup kebanyakan user: Windows XP :)

      Reply
      • ArdianZzZ

        01 December 2010

        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.

        Reply
  5. Jauhari

    26 September 2010

    Kalau denger dan lihat jenis font serif penerawangan saya langsung melihat KORAN :D

    Reply
    • fikrirasyid

      28 September 2010

      Koran? Haha, seperti melihat koran maksudnya? :)

      Reply
  6. Kumpulan Artikel Seputar Tipografi untuk Web dan Desain | KafeGue.com

    30 November 2010

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

    Reply
  7. AMYunus

    16 January 2011

    oh udah ga berlaku lagi yak kalo serif untuk cetak trus kalo sans serif untuk digital? :roll: baru tahu karena baru baca ini.

    Reply
    • fikrirasyid

      17 January 2011

      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 :)

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>