Tipografi merupakan unsur penting di dalam desain, karena tipografi adalah inti. Tipografi adalah salah satu elemen yang menyampaikan isi dan maksud dari sebuah karya desain. Tidak jarang, desain yang efektif adalah desain yang hanya menggunakan tipografi yang baik tanpa menggunakan elemen visual sama sekali.
Sebegitu pentingnya peran tipografi pada desain yang kita hasilkan, jadi biarpun desain visual kita “wah”, tetapi kalau tipografi nya tidak mudah di baca dan susah di mengerti, maka desain tersebut termasuk gagal. Untuk menghindari itu, berikut 6 tips dasar untuk membuat tipografi lebih menarik, nyaman dan mudah terbaca.
Kerning
Kerning adalah jarak antar huruf. Dan ini merupakan favorit saya, kalau sudah bingung bagaimana membuat judul/kalimat tertentu menjadi lebih menarik, saya biasanya mendempetkan kerning pada judul/kalimat tersebut.
Namun harap di perhatikan, jangan sampai terlalu mendempetkan kerning karena hasilnya judul/tulisan akan susah terbaca dan terasa ‘penuh’. Jadi, gunakanlah teknik ini secukupnya.
Pemilihan Font
Pemakaian jenis font yang tepat dapat membantu desain menjadi lebih menyatu dan lebih cepat mengkomunikasikan maksud dari desain. Misalnya, pada desain brosur kecantikan, kita tidak mungkin menggunakan font yang ‘keras’, berbentuk kaku dan tebal. Akan lebih tepat jika kita menggunakan font yang tipis dan luwes, sesuai dengan kepribadian target market yang di tuju, yaitu wanita.
Jenis font bisa di ibaratkan jenis ‘suara’ yang berbicara pada desain. Font dengan gaya tebal akan terasa seperti suara laki-laki dan bersuara berat. Font berbentuk kaku dan kotak-kotak, akan terasa seperti robot atau mesin yang berbicara, dan seterusnya. Masing-masing jenis font mempunyai jenis suara tersendiri.
Berat dan Ukuran
Kita bisa memainkan berat (tebal tipis) dan ukuran (besar kecil) font, untuk memberikan emphasis (elemen mana yang akan di baca atau di tampilkan terlebih dahulu). Sehingga secara tidak langsung pembaca akan di tuntun sesuai dengan flow yang kita mau.
Cara ini juga untuk mencegah pembaca pusing akan bagian mana yang seharusnya di lihat terlebih dahulu. Salah urutan dalam membaca akan mengakibatkan informasi yang kita sebarkan susah di mengerti.
Leading
Leading adalah jarak spasi antara kalimat atas dan bawah dalam satu paragraf. Biasanya elemen ini jarang di utak-atik oleh kebanyakan desainer. Padahal leading yang di atur dengan baik akan membuat pembaca tidak merasa lelah jika mereka membaca suatu artikel yang panjang.
Jarak yang di hasilkan jika kita memainkan leading akan memberikan kesan ruang kosong (whitespace). Yang tentu saja membuat mata tidak cepat lelah saat melihat teks yang begitu banyak.
Warna
Warna pada font biasanya di sesuaikan dengan background. Jika background berwarna (foto) maka lebih baik menggunakan 1 warna font yang netral (putih misalnya). Yang pasti harus menghasilkan kontras yang cukup, sehingga tetap nyaman di baca dan tidak ‘menusuk’ mata.
Teman-teman desainer kebanyakan pasti menyukai warna background hitam, namun masalahnya kalau di website, kombinasi background hitam dan teks putih itu akan menghasilkan ‘efek negatif film’ pada mata saat kita selesai membaca.
Akan lebih baik jika warna background di buat tetap gelap, namun tidak hitam 100%, dan berikan warna abu-abu muda pada font. Dengan begitu maka mata tidak akan terlalu lelah dan ‘efek negatif film’ tidak akan ada lagi.
Lebar Paragraf
Hal ini sangat penting, karena sangat mempengaruhi kenyamanan membaca. Coba bayangkan paragraf yang lebar di halaman website dengan artikel yang panjang. Kita sampai harus perlu memutar kepala sedikit (dari kiri ke kanan) untuk membaca artikel tersebut. Saya jamin kita hanya akan bertahan 1-2 paragraf saja!
Idealnya paragraf tidak terlalu lebar (dan tidak terlalu pendek), harus di sesuaikan dengan besar font juga. Untuk ini memang kita harus mencoba langsung membaca paragraf yang kita desain untuk menemukan lebar yang ideal. Jika kita masih menggerakan kepala lumayan sering, itu artinya kita harus mengatur kembali lebar paragraf tersebut.
Kesimpulan
Dengan ke 6 tips di atas semoga kita bisa lebih peka dalam mengatur tipografi (terlebih jika teks nya banyak!). Percayalah, dengan tipografi yang mudah terbaca maka orang juga akan lebih menyukai desain kita. Mulai sekarang anggaplah tipografi sebagai bagian penting dalam desain (atau yang lebih ekstrim, tipografi sebagai visual juga).
Apakah kamu mempunyai tips tambahan lain? Ayo di bagikan dengan teman-teman yang lain di kolom komentar 
Tautan Terkait
Merancang Tipografi Gaya Bebas
Temui Jurus Grafis di Facebook dan ikuti Twitter Jurus Grafis. Kalau tidak ingin ketinggalan posting berikutnya, kamu bisa berlangganan melalui Email atau RSS.
[...] This post was mentioned on Twitter by Richard Fang, Jurus Grafis. Jurus Grafis said: Terbaru! – 6 Tips Membuat Tipografi Lebih Menarik & Mudah Terbaca http://ow.ly/X6QB [...]
1.Warna
Saya pikir itu hanya selera aja Mas? Saya kira pemakaian warna abu2 karena trend, ga taunya karena untuk menghindari “efek negatif film” itu yah, Hmm…baru tau saya
2.Lebar Paragraf
Ini juga biasanya bisa dijadikan option lain untuk menyesuaikan lebar area untuk wilayah text.
Nice Tips Richard!
yup warna bisa masalah selera juga sih, tapi yang penting jangan ‘nabrak’ aja warnanya hehehe
bagus tipsnya, tentang dropcap ga ditambahin
cakep om,, monanya dikiit, manajamen font itu apa si, perlu ga, soalnya gw ga pernah make, apakah itu semacem klasifikasi ? sopwernya yg pas apa y ?
manajemen font fungsi nya untuk memudahkan kita memakai font (yang sudah kita install di komputer), ya betul untuk klasifikasi dan pengelompokan juga bisa (jadi bisa buat folder serif, sans, retro, dll) jadi gampang pas kita mendesain.
software nya banyak banget, klo mau yang free pakai font viewer (silakan googling), enteng dan cepet loading nya
thanks brader! very helpfull… he…
mas mo nanya nh kalo untuk deck, jenis fontnya harus berbeda ga dengan font untuk judul?
bisa iya bisa engga
tergantung kebutuhan nya, kalau font judul udah cukup unik bentuknya, lebih baik sih untuk deck di bedain (mungkin bisa sama dengan font body text). supaya ga terkesan ‘penuh’ artikel nya.
Wah pengen banget belajar tipografi yang baik dan benar, tapi sayang saya ga ada sense sama sekali ama yang ini
Belajaar Laaa…
:p
gak sekalian jelasin jenis2 font??
kalo ada artikelnya boleh tuh..
sans serif cocok buat aplikasi apa, serif buat aplikasi yg kaya gmn, retro, dekoratif, dsb..
Weits, nice post as usual. Presentasi visual nya keren abis
Chard, bahas lebih detail aplikasi tipografi dalam web desain dong. Setau gue ada aturannya juga kan? Kaya yang lu bilang itu, kalau heading enakan di kecilin kerningnya dll. Gue rasa bakalan useful banget tuh
salam kenal mas Richard, mantep neh ilmunya mas..saya suka maen kemari buat curi ilmu, tp baru skarang mulai komen.. hehe
bagus banget Richard, jarang tulisan berbahasa Indonesia dengan materi ini.
ada yang perlu ditambahkan beberapa poin:
- apa bedanya serif dan sans-serif?
- kapan saat yang tepat kita menggunakan serif atau sans-serif?
wah artikel yang bagus sekali!
saya suka banget dengan bagian warna
eh iya ada yang mau ditanyain nih
1.apakah om chad punya font sendiri? dan apa program untuk membuat font yang bai dan benar? (setahu saya sih ada program namanya font maker) tapi apa ada yang lain?
2.desainer luar banyak juga yang bikin artikel tentang dwebsite dummies prohibition, salah satunya penggunaan template “Lorem Ipsum” kalo menurut om fang sendiri gmn?
oh iya ada saran, gmn klo artikel berikutnya om chad ngejelasin tentang manajemen warna, hehehe soalnya penting juga yak ^_^
thanks bro!
1. ga punya tuh, dulu pernah sih buat coba2, lupa pake software apa
2. Lorem Ipsum memang baiknya di hindari, lebih baik untuk headline jangan Lorem Ipsum, klo bisa headline yang sudah pasti di pakai di desain.
kalau body text, untuk kepentingan efisiensi kerja masih boleh lah pake Lorem Ipsum (kadang2 klien suka lama juga membuat konten dan ga mungkin kita ngikutin timeline klien)
warna boleh banget tuh, nanti ya
@ all thanks saran untuk artikel selanjutnya, nanti akan dipikirkan
Ok deh mas, makasih atas masukannya
mas richard ga ditulis sekalian kelebihan & kekurangan serif & Sans serif, baik untuk tujuan cetak atau di layar saja. btw keren banget tutorialnya.
semakin menarik artikelnya, berisi!! dan tentunya original!! berdasarkan pengalaman dan ilmu yang di dapat, jujur masalah yang gini saya emang agak kurang peka,
yang paling saya suka yang efek negatif film, saya ga tau seperti itu, kayanya saya harus lebih sering-sering ke sini, thank ya ilmunya,,
saya sebagai orang yang belajar secara otodidak merasa terbantu!!
terima kasih..
mantap bang tipsnya, klo menurut sya tips di atas sudah lengkap dan wajib hukumnya
Untuk jenis font di Web, WebAIM.org menyebut Verdana lebih usable dan aksesibel karena ciri khas yang membedakan huruf i dan l -nya. Misalnya: ill, illness, illegal.
Huruf serif mungkin lebih nyaman dibaca di media cetak, selain faktor psikologis paparan jenis huruf itu di dunia nyata. Tapi membaca huruf bertangkai/serif di Web disebutkan relatif lebih melelahkan dibanding huruf jenis sans-serif. Kecuali jumlah teksnya tidak ‘terlalu banyak’.
Untuk kontras warna, sependek yang saya tahu, ada rekomendasi Web Content Accessibility Guidelines (WCAG) 2.0 dari W3C untuk memenuhi Luminosity Contrast Ratio. Pengaya Colour Contrast Analyser di Fx (Firefox) bisa membantu.
Untuk latar halaman Web, kecuali ditujukan khusus (misal galeri foto, seni), disarankan memakai latar pastel (jika putih dianggap terlalu konservatif) dengan teks lebih gelap. Lebih usable dan aksesibel bagi pengguna yang memiliki keterbatasan penglihatan warna.
Rata tepi kiri, blok paragraf, pranala bukan hanya berbeda di sisi warna (karena ada pengguna yang buta warna), itu termasuk tipografi ngga, Mas Richard?
skrg susah ya buka jurusgrafis… lemotnya minta ampun,,, pake sapidol lemot, pake im2 lemot, pake wifi gratisan lemot… kenapa sih??
kemungkinan server nya pas lo buka lagi down bro.. gue udah complain ke host nya kok, mudah2an cepet di tanganin
nice illo!
Bung Richard, saya ada 1 pertanyaan, di lihat dari segi alignment sebuah artikel, sebaiknya di gunakan justify rata kanan-kiri atau di biarkan default (rata kiri)? Terima kasih.
lebih baik sih di rata kiri yah, karena kalau di justified, nanti untuk baris yang kalimatnya sedikit akan di “tarik” huruf2 nya, jadi secara visual ga bagus
kcuali bisa di pastikan jumlah huruf per baris nya bisa pas
[...] Hitam adalah warna yang gelap, suram, menakutkan tetapi elegan. Saya merasa elemen apapun jika di taruh di atas background hitam akan terasa lebih bagus (misalnya, pada waktu menampilkan foto, portfolio atau produk). Tapi tidak selalu efektif di dalam kasus tipografi. [...]
[...] Referensi lain : 6 Tips Membuat Tipografi Lebih Menarik & Mudah Terbaca Categorized under: seputar blogging. Tagged with: latar blog, manajemen blog, permasalahan [...]
tutorial yang sangat usefull!! kereennn!! go go richard fang!
makasih sob udah share tips yg keren ini…:)
boleh minta izin share ke yg lain ya,…
thanks
iyah saya juga lagi pusing memikirkan masalah kombinasi warna antara huruf dan background, saya mau pakai background #000 dan bingung warna font nya…
Bang ichad keren tips nya, tapi sebelum saya baca artikel ini saya juga sudah sering kutak katik dan memainkan 6 aspek yang abang bilang diatas.. hasilnya emang mantap bang.. very useful and affective tips.. penggunaan white spacenya sangat pas n efektif..
Nak Richard..
saya pernah beli software grafis yg bentuk tulisan ada gambar2nya..
contoh : gambar balon berisi huruf atau pakaian yg dijemur di dada kaos ada hurufnya, buah2an berhurur..dsb.
itu namanya tipografi juga ya, nak..
atau ada nama lain? dimana saya bisa dapatkan itu..
saya butuh tipografi untuk dunia anak-anak..
makasih banyak ya, nak.. salam kenal dari bu guru..
[...] fungsi tersebut diterapkan dengan sangat baik oleh Richard Fang dalam postingnya yang berjudul 6 Tips Membuat Tipografi Lebih Menarik & Mudah Terbaca. Di posting tersebut — selain berfungsi memberi istirahat sejenak bagi mata — gambar [...]
[...] 6 Tips Membuat Tipografi Lebih Menarik & Mudah Dibaca oleh Richard Fang dari Jurusgrafis. [...]
Makasih banyak jurus tipografi nya. Klo bertamu ke blog saya kira-kira pendapat bang Richard gimana sudahkah setidaknya mendekati tipografi yang baik?mohon masukannya. Tks.
maunya bikin posting ttg typo bwt blog sendiri, habis buka ini,…ehhhmmm langsung copas link nya..boleh kan om…
bagus tentang typonya …
keren mas..
mas saya ijin, web saya itu, sayahubungkan ke web sampean. untuk pembelajaran
bang boleh kutip lagi gak bwt roommagz #4..
thanks
izin copas dikit ea mas,.
Kebetulan suruh dosen nyari artiket tentang Tipografi..
artikelnya bagus banget..
bisa buat referensi blog juga,.he.e
Ship gue jdi tau tips grafis,low buat audio visual apakah tipografi juga berpengaruh mas????
rada ganyambung sih, tapi mw nanya nama font yg dipake d image judul ma image utama (yg da gambar kacamatanya) tu apa ya mas??
Tipsnya bener-bener bagus
thanks gan..
trims kang ilmau dan informasinya ,,,, semoga bermanfaat
Makasi ilmunya khususnya yang ngebahas soal kerning. Saya baru tau kerning sempit ternyata bisa bermanfaat besar
yah saya agak payah dengan urusan font… ternyata ada tipsnya juga. thanks kang richard artikelnya bermanfaat banget.
Artikel yang menarik! Saya jadi sedikit banyak tahu ilmu baru tentang tipografi. Kebetulan karena saya juga sedang menekuninya mas.
Salam hangat
Azzam
waaah,,ternyata banyak bgt yg blom gw tau soal webdesign tp di bahas di sini..sangat membantu sekali artikel2nya..keep posting ya bro
[...] Hitam adalah warna yang gelap, suram, menakutkan tetapi elegan. Saya merasa elemen apapun jika di taruh di atas background hitam akan terasa lebih bagus (misalnya, pada waktu menampilkan foto, portfolio atau produk). Tapi tidak selalu efektif di dalam kasus tipografi. [...]
artikel yang menarik mas..
sangat membantu orang-orang seperti saya yang masih sangat perlu belajar mengenai design web:)
Makasih mas..
[...] Hitam adalah warna yang gelap, suram, menakutkan tetapi elegan. Saya merasa elemen apapun jika di taruh di atas background hitam akan terasa lebih bagus (misalnya, pada waktu menampilkan foto, portfolio atau produk). Tapi tidak selalu efektif di dalam kasus tipografi. [...]
masih ada enggak tips membuat tipografi ?
Keereeen,
Perlu dipelajari nih