Bagaimana Menyusun Hirarki Tipografi yang Efektif

Mengatur konten secara efektif dalam sebuah desain sehingga mudah dipahami dan dikonsumsi adalah salah satu pekerjaan terpenting seorang desainer. Dan karena sebagian besar desainer konten bekerja dengan berbasis teks, membuat hierarki tipografi yang efektif adalah salah satu hal terpenting yang dapat dipelajari seorang desainer.

Meskipun berlatih dan bereksperimen dengan menciptakan hierarki yang efektif adalah cara terbaik untuk benar-benar menguasai keterampilan, ada sejumlah pedoman yang harus dipelajari desainer terlebih dahulu, sebelum memulai sendiri. Lagi pula, tidak mungkin melanggar aturan secara efektif tanpa terlebih dahulu mengetahui apa itu.

Apa itu Hirarki Tipografi?

Desainer pemula terkadang meremehkan perlunya menggunakan hierarki tipografi. Namun lihat contoh ini:

Informasi yang sama disampaikan di kedua sisi, namun di sebelah kiri, tidak mungkin untuk mengatakan bahwa ada header, subheader, dan teks isi. Di sebelah kanan, segera terlihat bahwa ada hierarki pada informasi yang diberikan.

Hirarki tipografi menunjukkan kepada pembaca informasi mana yang menjadi fokus—mana yang paling penting dan mana yang hanya mendukung poin-poin utama.

Ada berbagai hal yang membentuk hierarki tipografi di web. Ini termasuk:

Ukuran. Ukuran umumnya merupakan hal pertama yang dilakukan oleh desainer baru ketika mencoba membuat hierarki tipografi. Dan untuk alasan yang bagus: Ini segera, mudah diidentifikasi oleh pembaca. Lebih besar = lebih penting, lebih kecil = kurang penting. Tapi ukuran bisa menjadi penopang ketika ada begitu banyak pilihan lain untuk membuat hierarki.

Bobot. Membuat jenis huruf lebih tebal atau lebih tipis adalah cara lain yang mudah dikenali untuk membuat hierarki yang mudah dikenali bahkan oleh non-desainer.

Warna. Warna sering diabaikan sebagai cara untuk membuat hierarki, tetapi ini adalah pilihan yang fantastis. Bahkan menggunakan nuansa yang lebih terang dan lebih gelap dari warna tertentu dapat menciptakan hierarki yang lebih berbeda. Membuat lebih kontras antara tipe dan latar belakangnya juga dapat menambah hierarki tipografi.

Kontras. Selain warna yang kontras, kontras antara ukuran, bobot, dan gaya yang berbeda juga merupakan kunci untuk membuat hierarki tipografi. Perbedaan hanya satu atau dua titik dalam ukuran tipe tidak akan menciptakan kontras yang cukup untuk membuat hierarki terlihat oleh sebagian besar pengguna. Sebaliknya, desainer harus menggunakan ukuran, bobot, dan gaya yang mudah dibedakan untuk dengan mudah membuat kontras antara hal-hal seperti header atau teks isi.

Kasus. Meskipun penggunaan huruf besar pada teks isi umumnya bukan ide yang baik dari perspektif keterbacaan, menggunakan karakter huruf besar dalam judul atau subjudul dapat membantu membedakan judul yang berbeda atau jenis lainnya.

Posisi dan Penjajaran. Penempatan heading dan subheading, bersama dengan tipe lain yang ingin menonjol oleh desainer, dapat memiliki banyak dampak pada tempat tipe berada dalam hierarki. Tipe centering, misalnya, cenderung membuatnya menonjol. Menyetel jenis di luar margin biasa halaman juga dapat membuat jenis itu menonjol dalam hierarki halaman.

Cara Membuat Hirarki Tipografi (dan Mengatur Desain Anda Secara Visual)

Desainer memiliki banyak pilihan dalam hal membuat hierarki tipografi. Tetapi hanya mengetahui apa yang diperlukan untuk membuat hierarki saja tidak serta merta membantu desainer membuat hierarki yang efektif.

Salah satu hal pertama yang perlu dipertimbangkan adalah berapa banyak tingkat hierarki yang harus dimiliki sebuah desain. Sebagai aturan umum, setiap desain harus mencakup tiga tingkat hierarki: heading, subheading, dan body text. Dari sana, terserah kepada desainer untuk mempertimbangkan level tambahan yang mungkin diperlukan. Ini dapat mencakup keterangan, subjudul tambahan, kutipan tarik, dan informasi meta (untuk hal-hal seperti penulis atau tanggal pada artikel).

Dari sana, kuncinya adalah untuk mengetahui bagaimana membedakan antara bagian-bagian berbeda dari hierarki. Seharusnya tidak perlu dikatakan lagi, tetapi judul harus lebih menonjol daripada subpos, yang harus lebih menonjol daripada body copy. Teks umumnya harus kurang menonjol daripada salinan isi, dan kutipan tarik harus berada di antara salinan isi dan subjudul.

Jenis Ukuran:

Skala tipografi tradisional ada untuk membantu desainer memulai. Tapi ini hanya titik awal, dan desainer harus merasa bebas untuk bereksperimen dengan bobot dan gaya yang berbeda sambil menyimpang dari timbangan tradisional ini. Sebagian besar mendasarkan skala mereka pada ukuran teks isi dan berkembang dari sana.

Skala tipografi klasik dari The Elements of Typographic Style sudah tidak asing lagi bagi sebagian besar desainer karena cenderung menjadi default yang ditawarkan sebagian besar program pengolah kata saat memilih ukuran font. skalanya adalah:

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60, dan 72.

Ada contoh skala tipografi tambahan di luar sana yang mengikuti berbagai persamaan matematika untuk menghitung ukuran yang meningkat.

Desainer memiliki kecenderungan untuk default ke ukuran teks isi 12 poin, tetapi meningkatkannya menjadi 14 atau 16 (atau bahkan setinggi 24) dapat menyebabkan peningkatan keterbacaan tergantung pada jenis huruf yang digunakan. Website pribadi Jeffrey Zeldman, misalnya, menggunakan ukuran font 24px untuk body copy, sedangkan Vogue.com menggunakan ukuran body text 19px.

Sebelum menyelesaikan skala sebenarnya, desainer harus memastikan tipografi yang digunakan dalam desain telah diselesaikan. Tipografi yang berbeda dapat tampak lebih besar atau lebih kecil secara signifikan meskipun secara teknis ukurannya "sama".

Memilih Koordinasi Jenis Huruf

Apa yang sering membedakan desain "profesional" dari upaya yang lebih amatir adalah kombinasi tipografi. Menggabungkan tipografi secara efektif adalah sebagian naluri dan sebagian ilmu, tetapi ada beberapa panduan yang dapat diikuti oleh desainer untuk menggabungkan tipografi dari keluarga yang berbeda.

Pertama, mencampur serif dengan sans serif secara signifikan lebih mudah daripada menggabungkan dua serif atau dua sans serif. Tapi itu tidak sesederhana hanya mengambil serif dan sans serif apa pun, dan menggabungkannya dalam sebuah desain.

Pertimbangkan konteks di mana tipografi akan digunakan. Misalnya, jika desainnya seharusnya ringan dan menyenangkan, maka pastikan tipografinya sesuai dengan suasana hati itu. Jika desainnya lebih serius, maka tipografi harus mencerminkan hal itu. Dengan kata lain, suasana tipografi apa pun yang digabungkan harus cocok.

Desainer juga harus menggunakan kontras untuk keuntungan mereka. Menggabungkan tipografi tipis dan tebal seringkali bekerja lebih baik daripada menggabungkan dua yang sangat mirip dalam berat.

Cari tipografi dengan tinggi x yang sama (jarak antara garis dasar dan garis rata-rata huruf kecil dalam tipografi). Ini membantu mencegah konflik antar tipografi. Hal lain yang membantu mencegah konflik termasuk kerning dan bentuk karakter yang serupa. Jenis huruf dengan bentuk huruf yang sangat bulat tidak boleh digabungkan dengan jenis huruf yang lebih persegi.

Meskipun pedoman dapat membantu dalam membuat kombinasi jenis huruf, tidak ada yang akan menggantikan eksperimen dan latihan. Desainer harus meluangkan waktu untuk bereksperimen dengan tipografi dan berlatih menggabungkannya sesering mungkin. Menemukan beberapa kombinasi jenis huruf mundur yang dapat bekerja dalam berbagai konteks juga berguna untuk proyek-proyek di mana anggaran dan sumber daya yang tersedia tidak memungkinkan untuk banyak percobaan dan kesalahan.

Dengan panduan ini di tangan, desainer dapat mengikuti proses empat langkah yang ditetapkan oleh sumber tipografi web Better Web Type untuk membuat kombinasi yang efektif:

1. Temukan font jangkar untuk teks isi utama Anda
2. Temukan beberapa font sekunder untuk kemungkinan kombinasi
3. Evaluasi kombinasi
4. Hilangkan/pilih kombinasi font

Pertimbangan Tambahan

Bereksperimen dengan gaya dan bobot yang berbeda setelah memilih tipografi akhir dapat membuat tingkat hierarki tambahan tanpa harus membuat judul utama berukuran super. Menjaga tipografi kira-kira berukuran sama, tetapi membuat heading yang lebih penting menjadi tebal, sementara membuat yang kurang penting menjadi miring menciptakan hierarki visual yang pasti.

Hal yang sama dapat dilakukan dengan warna. Subjudul dengan warna aksen akan lebih menonjol daripada subjudul yang warnanya sama dengan teks isi. Desainer harus bermain dengan warna di subpos mereka untuk memisahkan teks yang lebih penting tanpa hanya mengandalkan ukuran jenis.

Spasi juga dapat digunakan untuk memisahkan heading dan subheading yang penting. Menciptakan lebih banyak ruang di sekitar judul sehingga menonjol dari teks isi yang menyertainya membuatnya semakin menonjol. Sebaliknya, subpos yang diberi spasi sama dengan teks isi dibuat kurang penting.

Bahkan jarak antar karakter dapat digunakan untuk membuat hierarki. Spasi karakter dapat membuat garis tertentu lebih menonjol. Hal ini sangat efektif bila dikombinasikan dengan huruf besar huruf-huruf itu. Namun, desainer harus berhati-hati untuk tidak berlebihan, karena juga dapat terlihat amatir jika digunakan secara berlebihan.

Kesimpulan

Eksperimen dan praktik adalah cara terbaik untuk menguasai hierarki tipografi, tetapi mempelajari panduan ini akan membantu desainer memulai dengan langkah yang benar. Mempelajari bagaimana ukuran, warna, jarak, berat, dan faktor lain berkontribusi pada hierarki yang efektif adalah langkah pertama.

Setelah dasar-dasar tersebut ditetapkan dalam pikiran (dan praktik) seorang desainer, mereka dapat secara lebih intuitif membuat hierarki visual yang mengikuti atau melanggar "aturan" yang diperlukan untuk membuat desain unik yang terinspirasi dan menyenangkan bagi pengguna.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Merancang untuk Keterbacaan – Panduan Tipografi Web (dengan Infografis)
• Memahami Nuansa Klasifikasi Typeface
• Landasan Desain – Panduan Hirarki Visual (dengan Infografis)
• Gaya Jenis Huruf untuk Desain Web dan Cetak
• Tingkatkan UX Anda dengan Hirarki Visual yang Jelas