7 tips memilih dan mengatur styling font untuk blog enak dibaca

7 Tips Memilih dan Styling Font Agar Blog Lebih Enak Dibaca

Menurut Rafal Tomal, Lead Designer di Copyblogger Media,  90% komponen sebuah website adalah murni tipografi. Jika kita mengerti bagaimana harus memilih dan mengkombinasi font untuk website, mengaplikasikan teknik styling font yang sesuai, secara keseluruhan desain website (atau blog) kita dengan sendirinya akan menjadi enak dilihat. Jadi memang tipografi sangat penting dalam desain website / blog.

Berikut ini saya rangkumkan 7 tips mudah tentang font yang bisa diterapkan agar blog kita lebih enak dibaca ^_^ (Salah satu) tujuan kita ngeblog kan supaya tulisan kita dibaca oleh orang lain, jadi selain memberikan konten yang bagus dan berguna juga harus dipikirkan bagaimana caranya agar tulisan di blog kita visually pleasing dan easy to read agar pembacanya betah.

[bctt tweet=”Mau tahu cara bikin pembaca betah nongkrong di blog kita?”]

1. Cukup gunakan 2 atau 3 font.

Cukup gunakan 2 atau 3 font untuk keseluruhan blog. 1 font untuk judul, 1 font untuk body dan jika perlu 1 font lagi untuk aksen. Lebih dari itu akan membuat blog terlihat terlalu ramai.

2. Perhatikan mengenai font combo / font pairing.

Font combo atau font pairing merujuk pada pemilihan lebih dari 1 tipe font yang berbeda untuk suatu desain (dalam ini desain blog atau website). Urusan menjodohkan font ini juga ada ilmunya sendiri. Ada beberapa tipe pairing yang bisa diaplikasikan dalam pemilihan font untuk blog, antara lain :

a. Kombinasi font sans serif dan serif.
Dalam ilmu tipografi, serif adalah garis kecil (ada yang menyebut “batang”) di ujung kakinya, sedangkan sans serif berarti non-serif alias tidak ada “batang”-nya. Ini adalah kombinasi font paling umum untuk blog, yaitu serif untuk judul dan sans serif untuk konten atau sebaliknya.

contoh-font-serif-sans-serif

Bonus info: font serif lebih mudah dibaca pada materi tercetak, kalau kita perhatikan hampir semua buku, majalah atau koran menggunakan font serif. Font sans serif dianggap lebih mudah dibaca pada layar elektronik (komputer dan device lain) sehingga banyak digunakan untuk blog dan website. Sebagai gambaran berikut screenshot dari artikel di kompas.com dengan virtual newspaper Kompas. Tapi tidak jadi masalah juga kalau kita mau menggunakan serif pada body / konten blog kita karena saat ini resolusi layar sudah semakin tinggi sehingga meskipun menggunakan font serif tetap mudah dibaca.

b. Kombinasi all caps dan normal caps. Untuk konten postingan tentu selalu gunakan normal caps, sedangkan untuk judul bisa dipilih antara All Caps (huruf kapital semua) atau normal caps. Hal ini berguna misalnya jika kita memilih font yang sama untuk judul dan konten, atau kombinasi font yang kita gunakan ukurannya hampir sama besar.

c. Kombinasi ukuran font. Umumnya font untuk judul akan lebih besar daripada font untuk konten. Seberapa besar-nya tergantung selera juga, namun untuk blog yang judul postingannya cenderung kalimat-kalimat panjang, lebih baik menggunakan font judul yang tidak terlalu besar. Font untuk konten juga ukurannya sebaiknya sedang-sedang saja, antara 14px sampai 18px, tergantung jenis font dan balik lagi ke selera dan kesesuaian dengan desain blog keseluruhan.

Contoh font pairing untuk blog

3. Tulislah dalam paragraf yang pendek-pendek dan beri subjudul.

Buat paragraf sependek mungkin kalau bisa. Paragraf yang terlalu panjang membuat mata capek dan orang jadi malas membaca (contohnya saya). Saya cenderung membaca postingan yang panjang dengan metode skimming, jadi adanya subjudul membantu saya untuk bisa tahu dengan cepat misalnya bagian ini isinya tentang apa, dan jika memang tertarik saya akan baca lebih detil. Adanya subjudul juga membantu SEO, tentu jika diformat dengan benar sebagai H2 atau H3.

4. Jangan memilih font yang tebal atau cursive untuk konten.

Contoh font yang tebal ialah Montserrat, menurut saya Montserrat kurang cocok dijadikan font konten, tapi bisa jadi alternatif yang bagus untuk judul. Contoh font cursive ialah Dancing Script, Rochester, Parisienne. Saya langsung bisa membayangkan pusingnya jika melihat konten post menggunakan font Parisienne. Biasanya langsung saya skip, pindah baca blog yang lain 😀

Don't use thick and script fonts for body text

5. Pilih warna font yang kontras dengan background.

Background blog terbaik adalah warna putih, tapi kalau mau pakai warna lain, pilih yang sangat light mendekati putih. Untuk warna font bisa pilih hitam, abu-abu tua sekali mendekati hitam, biru tua atau coklat tua. Saya biasanya mengatur warna font untuk konten tidak 100% hitam (#000000) tapi abu-abu tua (#555555) ; supaya tidak terlalu crong di mata.

Kombinasi warna font putih atau warna terang dengan background hitam (atau warna gelap lainnya) bisa digunakan untuk bagian kecil yang perlu mendapat perhatian / sebagai attention grabber. Jangan digunakan untuk keseluruhan post karena bisa menyakitkan mata.

Use dark font on light background

6. Tambahkan jarak antar huruf

Tambahkan jarak antar huruf untuk tampilan yang lebih ringan / light. Caranya dengan menambahkan kode css : letter-spacing: 0.5px atau letter-spacing: 1px. Silakan bereksperimen dengan value letter-spacing tapi biasanya 0.5px sudah cukup. Kalau terlalu jauh jarak antar huruf-nya malah jadi sulit dibaca.

7. Tambahkan jarak antar baris

Tambahkan jarak antar baris untuk tampilan yang lebih ringan / light. Caranya dengan menambahkan kode css : line-height: 1.5 atau line-height: 2. Line-height: 0 artinya tidak ada jarak antara baris yang atas dengan bawah (jadi tumpang tindih). Semakin besar nilai line-height-nya maka jarak antar baris semakin lebar.  Line-height untuk konten yang ideal ialah antara 1.5 – 2.

Bagaimana mengedit css-nya? Di dashboard WordPress klik Appearance > Editor, pastikan yang tampil adalah file Stylesheet (style.css) untuk child theme aktif. Scroll sampai bawah (untuk theme responsive, posisikan tepat di atas css untuk media queries) lalu copy paste css berikut :

p {
letter-spacing: 0.5px;
line-height: 2;
}

Ada beberapa themes WordPress yang memiliki kotak pengaturan custom css tersendiri jadi kode tersebut bisa langsung dimasukkan ke dalam kotak yang sesuai tidak harus di Editor.

letter-spacing-line-height

Semoga bermanfaat! ^_^ Monggo kalau ada yang mau menambahkan.

Similar Posts

96 Comments

    1. Ada sih yang belom, di mana cari font yang bagus, bagaimana cara install-nya di blog, dan contoh-contoh font combo yang okehh… buat next post aja ah wkwkwk…

    1. Kalau untuk header lebih bebas mbak pilihan font-nya selama sesuai dengan kepribadian kita dan sedap dipandang mata ^_^ Saya juga koleksi banyak font kruwel-kruwel, untungnya di Google Font banyak font cakep-cakep (either yang kruwel, kriwil atau yang “normal” :D)

  1. saya suka yang simple dan dikiiit gendut hehehee… pengen sih skali2 mengutak-atik font dan area nulis, apa ya namanya… supaya tampilannya bersih, jelas dan keren, tapi takut berantakan dan gak bisa balik lagi ke bentuk semula. so far masih betah pasrah. nice sharing mba.

    1. Sama-sama mbak ^_^ Saran saya mbak bikin 1 blog lagi untuk dijadikan “playground”, jadi bisa belajar utak atik segala macem tanpa takut “merusak” blog yang beneran-nya. Kalau sudah OK baru kustomisasinya bisa dipindahkan ke blog yang benerannya. Seru lho ngutak atik begitu sampai bisa lupa waktu hihihi…

  2. Masih pemula dalam dunia blog. Jadi masih perlu banyak belajar mengenai seluk beluk blog, khususnya mengenai desain template yang menarik dan friendly.

    Terima kasih ilmunya. Akan aku coba terapkan ke dalam blog yang aku punya.
    Salam

    1. Nyaman, mak Vita ^_^ Pilihan font, ukuran dan warnanya OK menurutku. Kalo body udah pake PT Sans sih udah gak bakal salah. Btw font untuk title-nya aku baru tahu euy, namanya unik ya “Yanone+Kaffeesatz”; kalo aku mungkin akan nambahin letter-spacing untuk font tsb.

  3. Wah saya baru tahu loh kalo kebanyakan media cetak dan online memakai font sherif 🙂 Kalo blogku, fontnya udah enak dibaca belum mba? Ditunggu sarannya 🙂

  4. Tulisan yang bermanfaat tentang tips memilih jenis font di blog. Selama saya ngeblog saya kurang perhatian dengan jenis – jenis font yang dipakai, biasanya hanya menggunakan standar tanpa mengganti – ganti.

  5. Mba Alma, terima kasih sekali tipsnya. Aku yang pembaca baru langsung suka sama blog Mba Alma. Mba aku mau tanya terkait permasalahan font di blog. Sering banget belakangan ini kalo nge-post tulisan di blog, font-nya berubah sendiri gak sesuai sama yang udah aku atur saat menulis. Kirain masalahnya karena aku nulis di word terus di copy ke blog, tapi ternyata nulis langsung pun masalahnya sama. Kenapa ya Mba?

    Terima kasih

    1. Sama-sama Justin, salam kenal yaa 🙂 font yang tampil di blog diatur pakai kode CSS, jadi mungkin kalo ngga sesuai dengan yg udah diatur waktu nulis postingan, kemungkinan karena di-override sama kode css-nya 🙂

  6. Wah mantap teh ulasan nya mau tak ptaktek di blog ku ahh…

    Btw kok banyak emak2 ngumpul di mari ya hehe (canda).

    Klo boleh saran si formulir komen nya di ubah dunk, sakit mata sakit leher tau ngetik nya (via android)

  7. Hmmm btw mbak saya baru tahu perbedaan sans serif sama serif. Dari dulu udah sering denger sih dua jenis font tersebut cuman belum “ngeh” ajah apa bedanya. Hmm kalau font favorit saya sih Roboto, Open Sans, Product Sans. Hehehe

    Emang bener typography itu penting bangetmbak, aturan penulisan paragraf antara media cetak dan media elektronik juga beda. Hehe. Kalau media elektronik sebisa mungkin memanjakan mata.

      1. Iya mbak, saya paling terkesan sama Product Sans itu, heheh font yang dipakek logo Google. 😀

  8. Hai, mbak Alma. Salam kenal, saya Alma juga^^
    Makasih udah sharing ilmunya. Saya yang masih otak-atik blog jadi nambah pengetahuannya di sini. Segera diterapkan deh ilmunya. HIhihii…
    Makasih sekali lagi ya, Mbak 🙂

  9. Makasih atas tipsnya Mbk, aku jadi pengen nanha juga gimana ngatur jarak gambar dengan font, kok di blogku kalau gambarnya kanan atau kiri malah mepet fotonya dengan font, ada solusi gak, Mbk?

  10. Informatif banget nih mba, alhamdulillah udah diterapin di blog. Dan samaan untuk warna font di konten, saya juga lebih suka abu-abu gelap ketimbang pure hitam 🙂

  11. Trims tipsnya mbak Alma, jadi inget waktu awal banget ngeblog pake font yg nggak blogable, hahaha. Kalau sekarang udah kayak blog beneran belum ya mbak?
    Tp nggak ngerti deh sama kode2an itu, saya biasanya nulis dan ngatur konten di word baru dikopi ke blog.

    1. Udah cakep banget itu blognya ^_^ Gapapa sih; ga wajib utak atik css. Kalo aku di WP ini, Word cuma dipake nulis draft aja, pas di -paste ke WP nya biasanya aku take out semua formatting dari Word karena malah suka jadi aneh. Jadi formattingnya dari WordPress-nya.

  12. Mba Alma kereen ih. Aku baru ganti font juga untuk blog, ngikutin yang di marketplace BP tuh yang Modish. Soalnya itu kan buat blogspot, lah aku wp 😀

    Masukan dong Mba, terlalu samar nggak sih abu-abunya? Masih jelas kan ya? *mbandingin sm blog ini.
    Terus untuk H2 kurang gede nggak?

  13. *catet semuanya*

    Thanks for sharing mbak :D, sebelum ini aku ngga begitu tau tentang font serif, sans serif, sama cursive ini. Sekarang baru paham gimana pemakaiannya. Tapi bener emang, kalau kombinasinya kebanyakan di blog rasanya rame bener.

  14. Oh ternyata lebih baik pakai Sand Serif ya mbak, waduh saya selama ini pakai Arial nih… Apa akan berdampak buruk pada kunjungan blog dikarenakan salah memilih font atau tidak mbak??
    Terus terang saja tulisan di atas keren sekali pemilihan jenis hurufnya, mudah di baca dan bikin betah, bener kata mbaknya… Mohon pencerahannya ya mbak Alma. Ditunggu lho.. 😀

  15. saya pikir awalnya font konten di almazia.co pakai calibri, ternyata Helvetica Neue. Hampir mirip 😀

    Kayanya saya harus sering-sering main ke sini, mau nimba ilmu. bolehkan ya bu?
    salam kenal.

    1. Kalau saya sebagai visitor lebih suka font ukuran sedang. Kalau terlalu kecil sulit dibaca, terlalu besar juga ngga nyaman menuh-menuhin layar 😀

  16. Terima kasih Mbak tipsnya, saya pribadi menggunakan WP dan nggak pernah utak atik font. Font yang saya gunakan bawaan theme aja, eh pas baca ini jadi penasaran buat utak atik jenis font.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.