Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Typography

Memilih Font yang Tepat: Panduan Praktis untuk Tipografi di Web

Read Time: 10 mins

Indonesian (Bahasa Indonesia) translation by Suci Rohini (you can also view the original English article)

Tipografi adalah bidang yang sangat luas. Orang-orang mencurahkan bertahun-tahun hidupnya untuk kerajinan kuno ini, namun selalu ada sesuatu yang baru untuk dipelajari. Pada artikel ini, saya akan meninjau poin utama yang harus Anda pertimbangkan ketika memilih jenis huruf untuk situs web.

Tutorial yang diterbitkan Ulang

Setiap beberapa minggu, kita mengunjungi kembali beberapa posting favorit pembaca dari sepanjang sejarah situs. Tutorial ini pertama kali diterbitkan pada Oktober 2010.


Tipografi Praktis

Saat Anda mendesain untuk web, Anda harus menerima bahwa konten akan berubah. Ini hanya keluar dari pertanyaan untuk meluangkan waktu untuk mengatur (menyesuaikan ruang antara masing-masing huruf) setiap judul di situs web besar. Dengan kata lain, Anda menyerahkan kendali.

Apa yang akan saya fokuskan hari ini adalah tipografi praktis. Bagi saya, ini berarti menerima bahwa Anda tidak akan pernah memiliki kontrol penuh atas jenis di situs web Anda. Memilih jenis huruf, menentukan ukuran, ini semua adalah hal-hal yang kita sebagai perancang katakan. Tipografi praktis berarti mempelajari cara, dan yang lebih penting mengapa, untuk menyesuaikan apa yang Anda kendalikan. Mari kita mulai.


Dapat dibaca

Apa yang Anda lakukan dengan tipe? Membacanya! Jadi mengapa begitu banyak situs web membuatnya sangat sulit untuk melakukan hal itu? Baik itu ukuran font kecil, tinggi garis penuh, atau hanya font jelek, sepertinya banyak situs di luar sana bertekad untuk tidak membiarkan Anda menikmati konten mereka!

Dengan membuat tipe Anda dapat dibaca, Anda segera melompati setidaknya setengah dari kompetisi, yang beruntung, sungguh, karena itu tidak sulit!

Typefaces

Saat memutuskan jenis huruf apa yang akan digunakan di situs web Anda, penting untuk diingat: jangan terlalu dipikirkan. Saya tahu bahwa banyak desainer benci menggunakan Helvetica, karena terlalu banyak digunakan. Saya setuju dengan ini, tetapi ada satu informasi yang sangat penting dari pernyataan ini: mengapa. Orang terlalu sering menggunakan Helvetica karena sangat bagus. Cocok dengan hampir setiap desain yang bisa dibayangkan, juga bekerja dengan baik dalam ukuran kecil, maupun besar.

Meskipun mungkin bertentangan dengan keyakinan Anda untuk mengatur jenis Anda di wajah yang disalahgunakan, jika itu berhasil, maka lakukanlah.

Salinan tubuh Anda bisa dibilang bagian dari desain yang harus paling mudah dibaca, jadi pastikan Anda memilih font yang berfungsi baik dalam ukuran kecil. Apa yang saya maksud dengan itu? Jika Anda dapat mengatur salinan ke 10px dan Anda masih bisa melihat apa yang dikatakannya, maka itu indikasi yang baik bahwa Anda memilih jenis huruf yang dapat dibaca.

Itu mencakup salinan tubuh, tetapi bagaimana dengan judul?

Dapat dibaca dalam judul-judul besar jauh lebih mudah untuk dipahami daripada dalam salinan tubuh. Jika Anda bisa mengetahui apa yang dikatakannya dengan segera, maka itu cukup mudah dibaca.

Apa yang baik tentang tipografi adalah bahwa setelah Anda mengerjakan proyek yang cukup, Anda akan memiliki ide bagus tentang apa yang berhasil dan yang tidak. Dari sana, Anda akan berada dalam posisi yang lebih baik untuk membuat pilihan kritis tentang font.

Tidak ada rumus untuk memilih font yang tepat untuk situs web Anda. Seringkali, cara terbaik untuk memutuskan satu adalah dengan hanya mencoba setiap font yang Anda pikir akan berfungsi, dan kemudian membandingkan. Memilih font benar-benar naluri, tetapi penting untuk diingat bahwa 90% dari waktu, pengguna tidak akan berpikir tentang font apa yang digunakan, jadi jika itu dapat dibaca, maka itu sering kali cukup baik.

Pemasangan

Jarang (jika pernah) suatu situasi di mana hanya satu jenis huruf yang sesuai untuk digunakan di situs. Situs web rata-rata memiliki banyak teks. Tidak mungkin satu jenis huruf akan bekerja untuk mereka semua! Sebagian besar situs web yang dirancang dengan baik menggunakan dua tipografi: satu untuk salinan tubuh, dan satu untuk berita utama.

Saat memilih sepasang font, hal yang paling penting untuk dipertimbangkan adalah bagaimana mereka bekerja bersama. "Apakah mereka cukup mirip?" "Terlalu mirip?" "Tidak cukup berbeda?" Semua ini adalah pertanyaan yang harus kamu tanyakan pada dirimu sendiri. Saya menemukan bahwa cara terbaik untuk memilih sepasang font yang berfungsi adalah dengan meletakkan banyak font secara berdampingan dan memutuskan yang terbaik. Tidak ada cara untuk mengetahui mana yang terbaik sampai Anda sudah mencoba semuanya.

Terkadang, hal yang paling tepat adalah dua sans-serif, sementara di lain waktu, Anda menginginkan sans untuk tajuk berita utama, dan serif untuk salinan tubuh. Tidak masalah jika mereka terlihat serupa, yang penting adalah jika mereka bertindak serupa. Ini tentu saja tergantung pada sisa desain Anda. Apapun font yang Anda pilih harus menyampaikan pesan Anda dengan kuat, dan jika itu berarti memiliki tipografi yang kontras, maka lakukanlah.

Simon Collison menggunakan pemasangan font dengan sangat baik di situsnya, memilih sans-serif yang kuat untuk judul utama, dan Serif sederhana untuk yang lain, tajuk yang lebih kecil, serta salinan. Kemitraan ini dengan ahli menampilkan pesan yang coba dikatakan situs web, dengan cara yang masing-masing font tidak dapat ungkapkan.

Ukuran

Sebagai aturan umum, desainer suka mengatur salinan tubuh mereka setidaknya 12px. Namun, sebagian besar memilih ukuran yang lebih besar seperti 14px, yang bahkan lebih baik untuk dibaca. Ukuran font sangat mudah untuk memutuskan untuk menyalin tubuh, tetapi judul yang mulai menjadi rumit.

Seberapa besar judul Anda? Tergantung. Dalam pengamatan dan pembuatan situs web saya, saya sampai pada kesimpulan bahwa judul seharusnya hanya sebesar yang seharusnya. Ini berarti bahwa Anda harus mencoba ukuran yang berbeda sampai Anda menemukan ukuran yang cukup besar untuk menarik perhatian yang Anda inginkan, tetapi tidak lebih besar, kecuali Anda ingin teks yang besar, dalam hal ini teruskan ke depan.

Hirarki

Sifat judul itu besar. Ini adalah item penting pada halaman, jadi tentu saja itu harus lebih besar, bukan? Iya dan tidak. Ya, judul umumnya lebih besar dari elemen lainnya, tetapi tidak, ini bukan satu-satunya cara untuk menarik perhatian mereka. Warna, berat, dan penempatan semuanya sama pentingnya untuk membangun hierarki visual yang jelas untuk halaman Anda.

Poin kunci untuk diingat tentang hierarki visual adalah bahwa semuanya relatif. Teks di situs Anda hanya menonjol dibandingkan dengan teks lain di situs Anda. Ambil contoh situs Wilson Miner. Judulnya cukup kecil untuk seberapa pentingnya mereka, dan secara mengejutkan ukurannya hampir sama. Namun, penggunaan warna membedakan judul yang paling penting, dan memberi mereka lebih banyak makna.

Penggunaan tipe adalah alat yang sangat penting untuk membangun hierarki visual, baik itu melalui ukuran, warna, berat, atau bahkan penempatan.

Terkemuka

Leading, atau jarak antar baris teks, adalah alat yang sangat berharga untuk teks yang dapat dibaca. Pimpinan yang buruk dapat merusak salinan yang luar biasa, dan pemimpin yang baik dapat membuat jenis yang paling buruk pun dapat dibaca. Untungnya, ini tidak terlalu sulit untuk diimplementasikan.

Dengan menggunakan properti ketinggian garis CSS, Anda dapat dengan mudah menetapkan ruang di antara baris salinan Anda. Secara umum, untuk blok teks besar, ukuran teks 1.5 kali lebih baik. Teks yang lebih kecil harus memiliki yang lebih ketat, dan teks yang besar harus memiliki banyak. Sebenarnya tidak begitu rumit.

Pelacakan

Pelacakan adalah ruang antar karakter dalam teks. Saya akui, ini sedikit abu-abu ketika datang ke "Praktis Tipografi," di CSS yang tidak memberi kita kendali besar terhadapnya. Biasanya, Anda tidak perlu khawatir tentang itu untuk teks kecil, itu hanya untuk judul yang menjadi masalah. Secara umum, menambahkan jarak huruf: 1px; atau spasi huruf: 2px; ke CSS Anda harus cukup ruang antara surat-surat.

Tempat lain yang akan bermanfaat untuk menambahkan pelacakan adalah topi kecil. Di sini, umumnya dianggap praktik yang baik untuk menambahkan satu atau dua piksel tambahan di antara karakter, karena mereka secara alami tampak lebih besar.

Warna

Meskipun bukan tipografi yang jelas, warna adalah bagian yang sangat penting dari setiap jenis situs web. Saya tidak berbicara tentang skema warna, melainkan tentang kontras yang diperlukan untuk memastikan keterbacaan di situs Anda. Teks hitam pada background putih (atau background terang) secara luas dianggap sebagai warna yang paling mudah dibaca untuk teks.

Saya tidak mengatakan Anda harus pergi dan mengatur semuanya menjadi hitam putih, hanya saja ketika Anda mendesain, Anda harus menyadari perbedaan teks Anda. Itu bisa kembali menggigit Anda jika Anda tidak hati-hati.

Grid

Menurut pendapat saya, penggunaan kisi adalah ide paling penting untuk tipografi praktis di web. Anda dapat memiliki font, spasi, dan warna yang bagus, tetapi jika Anda tidak memiliki tata letak yang baik, Anda mungkin juga bisa menggunakan komik komik.

Menggunakan kisi saat Anda mendesain dengan tipe memberikan keseimbangan dan struktur geometris yang jelas untuk desain Anda. Ini bukan perbaikan ajaib untuk desain yang buruk, tetapi jika Anda mendesain dengan kisi sejak awal, Anda dapat yakin bahwa paling tidak, tata letak Anda akan solid.

Jadi, apa hubungannya kisi dengan tipografi? Sederhananya: semuanya. Grid mewujudkan semua cita-cita dasar tipografi. Itu geometris, konsisten, dapat digunakan, dan di atas segalanya: indah.

Menyetel teks Anda dengan kisi-kisi adalah cara kunci untuk membangun hierarki visual, dan itu adalah indikator yang bagus untuk seberapa besar (atau kecil) teks Anda seharusnya.


Menonjol

Seperti yang saya katakan sebelumnya, jika tipografi Anda dapat dibaca, maka Anda sudah unggul 50% dari kompetisi, jadi bagaimana dengan setengah lainnya? Jika Anda telah sampai sejauh ini, maka bersama-sama meninggalkan aturan keterbacaan yang jelas dan konsisten dan memasuki dunia keruh dan misterius menjadi unik.

Font

Anda ingin situs web Anda menonjol? Langkah 1. Gunakan tipografi unik. Mungkin bagi Anda ini berarti menggunakan beberapa font unik. Tapi apa yang membuat font unik? Bagi saya, itu bukan yang tidak sering digunakan, tetapi yang memiliki pesan atau perasaan yang tidak digunakan oleh wajah lain.

Memilih font yang unik sebenarnya tentang perasaan. Apakah font ini terasa berbeda? Atau apakah itu hanya terlihat berbeda? Saat memilih tipografi untuk proyek apa pun, Anda harus selalu mempertimbangkan perasaan desain. Karena ini sepenuhnya pendapat pribadi, saya tidak dapat membantu Anda menemukan jenis huruf yang unik. Apa yang bisa saya lakukan adalah menunjukkan contoh font unik.

Cubicle Desain memiliki logo dan desain yang sangat unik. Ini kuat namun berkelas, menarik perhatian namun halus. Ketika saya melihat desainnya, perasaan kelas baru saja keluar dari situs. Dikatakan, "Saya tahu apa yang saya lakukan."

Menjadi Tidak Ortodoks

Berapa banyak situs web yang Anda tahu yang logonya sebesar konten? Bagaimana dengan judul yang sangat tipis? Tidak seperti poin terakhir saya, menjadi tidak ortodoks adalah tentang melihat apa yang dilakukan orang lain, dan kemudian melakukan yang sebaliknya.

Orang-orang di Savvy Belfast cerdas. Mereka memperhatikan tampilan sempit sebagian besar situs web, dan memutuskan untuk mengganti semua salinan yang tidak berarti itu dengan satu pernyataan.

Sekalipun Anda mengunjungi situs mereka hanya sesaat, Anda pasti ingat nama mereka.

Sesuaikan Desain Anda

Tipografi bukan miliknya sendiri. Ini adalah bagian dari desain web seperti yang lainnya. Ketik itu penting, ya, tapi jangan lupa bahwa itu hanyalah bagian dari apa yang membuat desain web hebat. Anda harus mendesain tipe Anda dengan sisa desain Anda dalam pikiran.

Jika Anda menggunakan tekstur latar yang sangat rumit, maka mungkin serif yang bagus akan bagus untuk judul Anda.

Maksud saya di sini sederhana: Jangan lupa konteksnya. Desain adalah bidang yang sangat luas, dan hari ini saya hanya berbicara tentang satu bagian saja. Untuk desain situs web yang sukses, semua bagian harus menyatu bersama-sama sukses. Itulah tujuannya: untuk menyusun pengalaman yang akan dimiliki seseorang di situs web Anda. Anda tidak dapat melakukan itu dengan hanya mengetik, atau hanya warna, atau bahkan konten saja!

Jenis Emosional

Begitu banyak pengalaman didefinisikan oleh bagaimana perasaan Anda: bahagia, sedih, geli, marah, bla bla bla. Manusia memiliki berbagai macam emosi, dan sebagai desainer, adalah tugas kita untuk membangkitkan emosi ini dengan desain kita.

Dari semua hal yang saya bicarakan hari ini, sejauh ini yang paling abstrak, dan agak sulit untuk dijelaskan. Alih-alih mencoba menjelaskan ini kepada Anda, izinkan saya menunjukkan kepada Anda.

Ketika saya pertama kali mengunjungi Solid Giant, saya tersenyum. Saya tersenyum pada saat saya melihatnya, dan bahkan di waktu berikutnya. Segera saya merasakan kekeluargaan terhadap desain. "G" besar dan kabur itu terlalu manis untuk dilupakan!

Sejujurnya, saya pikir itu jenius.

Tidak ada cara untuk mengajarkan desain emosional, itu adalah sesuatu yang harus Anda alami, dan kemudian bermain dengan desain Anda sendiri.


Tipografi Praktis

Nah, Anda sudah mencapai akhir posting. Saya harap setidaknya Anda telah mempelajari sesuatu, tetapi jika tidak, itu juga baik-baik saja. Jika ada satu yang saya pikir ingin saya tinggalkan setelah membaca ini, itu yang terpenting: bisa dibaca. Sisanya akan mengikuti.

Menurut Anda apa bagian terpenting dari tipografi di web? Tinggalkan pendapat Anda di komentar!


Juga di Tuts+

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.