Memilih Font Family Yang Tepat Untuk Website Anda : Seri Panduan Typography

Posted by in Tips & Trick .
Memilih Font Family Yang Tepat Untuk Website Anda : Seri Panduan Typography

panduan memilih font family untuk website

Salah satu hal yang paling berpengaruh dalam web design adalah pemilihan font yang digunakan. Artikel ini merupakan lanjutan dari panduan typography kagetweb tentang pemilihan font yang tepat untuk website. 

 

Kali ini kita akan coba membahas tentang pemilihan font family untuk kita gunakan dalam web designing.

 

Pemilihan penggunaan font family

 

Rules-of Thumb dalam pemilihan font family untuk website:

panduan pemilihan font untuk website

*perlu di ingat, bahwa ini adalah panduan semata, bukanlah aturan yang resmi dan baku untuk diikuti setiap saat.

Dan berikut adalah panduan dimanakah praktik pemakaian yang paling tepat untuk masing masing font family dalam susunan website.


Gunakan font dari sans serif family untuk anda jadikan basis dari website anda


Sans serif adalah jenis font yang tidak memiliki serif — kait kecil yang terletak di ujung karakter.

 

Jika anda pernah mendengar sebuah aturan dalam print design yang mengatakan bahwa penggunaan sans serif adalah hanya dalam headline, maka dalam web design yang berlaku justru sebaliknya.

 

Halaman web adalah dimaksudkan untuk ditampilkan oleh web browser dalam layar monitor anda. Dan yang patut anda ketahui adalah bahwa tampilan kertas atau print berbeda dengan resolusi layar yang ditangkap oleh mata kita.

 

Selain itu karakter dari sans serif yang cenderung terlihat clean dan rapi akan membuat tampilan keseluruhan dari body text anda akan terlihat rapi.

 

Penerapan terbaik:  Gunakan font dari keluarga sans serif untuk body dari copy dalam website anda

 

Beberapa contoh font dalam keluarga sans serif:

contoh font sans serif

  • Arial
  • Century Gothic
  • Geneva
  • Helvetica
  • Lucida
  • Lucida Sans
  • Lucida Grande
  • Trebuchet
  • Verdana

*fyi: Verdana adalah font yang diciptakan khusus untuk digunakan dalam website

 

Gunakan serif font family untuk tujuan printing

garamond dalam serif family

 

Meski serif font kurang disarankan dalam penggunaan dalam body copy, mereka adalah font family yang sempurna untuk penggunaan cetak.

 

Jika anda memiliki versi “printer-friendly” untuk website anda, misal dalam halaman persetujuan atau form lainnya. Maka ini adalah gelanggang milik serif fonts untuk unjuk gigi. Penggunaan serif dalam serif font dipercaya mempermudah proses diferensiasi antar karakter dalam media cetak. 

 

Dan lagi karena penggunaan media cetak tidak mengenal resolusi seperti apa yang layar moditor tampilkan, maka tampilannya karakternya akan terlihat jelas tanpa adanya efek blur dan karakter yang terlihat bergandengan.

 

Penerapan terbaik serif font: Gunakan untuk versi print dari website anda

 

Beberapa contoh umum serif font family:

  • Garamond
  • Georgia
  • Times
  • Times New Roman

 

Monospace Fonts, Font yang memakan ruang spasi yang sama persis antar karakter

 

Monospace font family adalah jenis font yang paling diakrabi oleh para programmer yang berkutat dengan program coding dalam kesehariannya.

 

Ya, keluarga monospace font selama ini telah dikenal sebagai font yang memiliki tampilan paling konsisten dalam penggunaan teks. 

 

Tapi meski website anda tidak melulu berkutat di wilayah coding atau komputer, anda tetap dapat memaksimalkan monospace font untuk memberi kesan font mesin ketik (typewritten text), karena pada umumnya mesin ketik menggunakan jenis font monospace.

 

Penerapan terbaik untuk keluarga monospace font: dalam penulisan sampel kode

code { font-family : "Courier New", Courier, monospace; }

 

Contoh monospace font yang sering kita temui:

monaco font sebagai contoh monospace font family

  • Courier
  • Courier New
  • Lucida Console
  • Monaco

 

Fantasy dan Script Font adalah jenis yang memiliki tingkat keterbacaan paling rendah

 

Keluarga fantasy dan script font tidaklah banyak tersebar atau terpasang dalam komputer pengguna, dan rata rata memiliki tingkat keterbacaan yang paling rendah dibanding keluarga font yang lain diatas.

 

Sementara anda mungkin secara personal menyukai efek seperti diary atau layaknya catatan pribadi lainnya yang menggunakan font dengan efek cursive yang melengkung indah, di sisi lain pembaca copy andalah yang akan memiliki masalah menghadapi keluarga font tersebut.

 

permasalahan yang paling mungkin timbul adalah jika copy anda dibaca oleh pengguna yang bukan pengguna bahasa yang anda gunakan. Terlebih jenis Fantasy dan script font terkadang tidak menyertakan aksen atau karakter khusus lain yang membuat pengguna merasa asing dengan karakter tersebut.

 

Penerapan terbaik dari keluarga font ini adalah: Dalam gambar, headline serta call-out. Dengan catatan anda harus membuatnya cukup singkat serta kesadaran bahwa jenis font yang anda gunakan mungkin tidak terdapat dalam mayoritas komputer pengguna.


Beberapa contoh fantasy font:

desdemona font

  • Copperplate
  • Desdemona
  • Impact
  • Kino


*Impact adalah keluarga foont yang memiliki kemungkinan terbesar untuk terdapat dalam komputer pengguna, baik menggunakan mac, windows maupun unix.


Untuk script font beberapa contohnya adalah:

apple chancery font

  • Apple Chancery
  • Comic Sans MS
  • Lucida Handwriting


*ada sebuah penelitian yang menyebutkan bahwa penggunaan font yang susah dibaca akan membantu para murid atau pelajar untuk mengingat informasi yang didapat dari tulisan yang menggunakan font tersebut


Pemilihan font dalam css font stack copy

Dari sekian banyak font yang umum kita temui dari berbagai family diatas akan membuat pemilihan font yang tepat menjadi sebuah pekerjaan yang membuat sakit kepala anda sebagai web designer.

Dan ketika anda mencoba berfikir font apakah yang paling aman digunakan dalam penulisan copy maka anda harus setidaknya memiliki 4 pilihan font untuk anda gunakan yang ditulis dalam css. Dengan demikian anda setidaknya akan bisa mempertahankan konsistensi dari bentuk dan kesan yang anda inginkan dari website anda.

contoh web safe font dalam windows dan mac

Urutan dari css font stack yang bisa anda gunakan antara lain adalah:

  1. Jenis font yang anda inginkan. ini adalah font yang anda gunakan untuk mendapat benuk dari webpage yang paling cocok dengan apa yang anda inginkan.
  2. Pada pilihan kedua dan ketiga adalah alternatif font dalam masing masing operating system yang umum digunakan. Jika pilihan font pertama anda tidak ada dalam windos atau mac standar, maka anda bisa memanfaatkan font yang anda rasa memiliki tampilan dengan hasil akhir paling menyerupai dengan pilihan font pertama anda.
  3. Pilihan terakhir adalah dengan menggunakan generic font family dalam css, hali ini dilakukan jika ternyata browser pengguna tidak memiliki akses terhadap font pilihan pertama maupun kedua anda. contoh dari font generik adalah:
  • cursive
  • fantasy
  • monospace 
  • sans-serif
  • serif

 

Contoh penggunaan css font stack :

p { font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 21px; }
Tags: font, typography, info

Related Posts:

Cara Menambahkan Widget Instagram Pada Website (update 2016)

Cara Menambahkan Widget Instagram Pada Website

Cara Menambahkan Tabel / Table Pada Website

Cara menambahkan tabel / table harga pada webste dengan mudah menggunakan text editor

Memilih Font Yang Tepat Untuk Website Anda : Sebuah Panduan Typography

beberapa pertimbangan untuk memilih font yang tepat untuk website anda, karena anda harus memastikan bahwa pemilihan font anda akan disukai oleh anda dan juga pengunjung anda.

4 Comments

Leave a Comment

Leave a Reply

Name: *
E-mail: * (Not Published)
Website: (Site url with http://)
Comment: *
Verification code: Submit