Typography Hierarchy: Definisi, Level, Komponen, & Aturannya

Apa yang Dimaksud dengan Typography?

Typography adalah seni dan teknik mengatur huruf untuk membuat teks tertulis mudah dipahami dan estetik. Dalam praktiknya, typography mencakup beberapa hal yakni:

• Pemilihan jenis huruf (typeface).

• Ukuran huruf (font size).

• Jarak antar huruf (letter spacing).

• Jarak antar baris (line spacing atau leading).

• Penataan huruf atau teks.

Lebih lanjut, typography tidak hanya terbatas pada cetak atau media digital. Ia juga ada pada berbagai bidang desain seperti web, iklan, papan tanda, dan identitas merek.

Secara keseluruhan, typography bertujuan untuk meningkatkan keterbacaan, memastikan pesan disampaikan secara efektif, dan menambah nilai estetika pada komunikasi visual.

Apa yang Dimaksud dengan Typography Hierarchy?

Typography hierarchy adalah sistem organisasi visual yang digunakan untuk memberi prioritas dan menata informasi dalam desain grafis. Hal tersebut memastikan bahwa pembaca dapat menavigasi dan memahami konten dengan mudah.

Prinsip ini berfokus pada berbagai elemen typography yang mencakup:

• Ukuran font

• Berat font

• Pemilihan typeface dan warna

• Penataan tingkatan penting dalam teks (judul, subjudul, dll).

Level-Level dalam Typography Hierarchy

Dalam typography hierarchy, informasi disusun menurut tingkat kepentingannya. Berikut adalah tingkatan dalam typography hierarchyi:

1. Judul Utama (H1)

Tingkatan pertama adalah judul utama atau heading 1. Ini merupakan elemen paling menonjol dalam sebuah desain. Judul utama sering kali berbentuk sebagai teks terbesar di halaman.

2. Subjudul atau Judul Bagian (H2)

Tingkatan kedua adalah subjudul atau judul bagian yang juga dikenal sebagai sub-heading maupun heading 2. Ini memiliki peran untuk membantu memecah konten menjadi bagian-bagian yang lebih mudah dikelola.

3. Judul Kecil atau Sub-Subjudul (H3 - H6)

Tingkatan berikutnya adalah judul kecil yang mencakup heading 3 hingga 6. Ini sering kali digunakan untuk memulai paragraf atau bagian spesifik dalam konten. 

4. Teks Badan atau Paragraf

Tingkatan selanjutnya adalah teks badan atau paragraf. Ini merupakan teks utama dimana konten atau pesan utama disampaikan.

5. Daftar Berpoin atau Bernomor

Terakhir adalah daftar berpoin atau bernomor yang juga dikenal sebagai bullets and numbering. Daftar ini membantu memecah informasi menjadi poin-poin yang lebih mudah dicerna. Ini memudahkan pembaca untuk mengikuti urutan atau kategori informasi.

Komponen Typography Hierarchy

Komponen dalam typography hierarchy mencakup berbagai elemen desain yang berinteraksi untuk menciptakan struktur dan organisasi. Berikut adalah komponen utamanya:

1. Ukuran Font (Font Size)

Ini merupakan komponen yang menunjukkan hirarki secara langsung dan terang-terangan. Ukuran yang besar biasanya digunakan untuk judul atau informasi penting. Sedangkan ukuran font kecil biasanya digunakan untuk teks badan atau informasi tambahan.

2. Berat dan Gaya Font (Font Weight & Style)

Berat font bisa diartikan sebagai bold. Sementara itu, gaya font contohnya bisa dilihat dari italic. Kedua hal ini digunakan untuk menarik perhatian ke area teks tertentu. Fungsinya adalah untuk menunjukkan perbedaan tingkat kepentingan antara berbagai elemen teks.

3. Warna

Ini digunakan untuk menandai informasi penting atau untuk membedakan antara berbagai jenis konten. Penggunaan warna harus konsisten dan harmonis dengan skema warna keseluruhan desain.

4. Kontras

Ini berkaitan dengan kontras antara teks dan latar belakangnya. Selain itu, ini juga digunakan antar elemen teks yang berbeda. 

5. Pemilihan Typeface (Typeface Choice)

Memilih typeface bisa memengaruhi bagaimana informasi dipandang dan dipahami. Misalnya, serif fonts sering dianggap lebih formal. Sementara itu, sans-serif fonts dianggap lebih modern dan rapi.

6. Penjajaran dan Penataan (Text Alignment)

Ini berkaitan dengan cara teks dijajarkan dan ditata dalam halaman. Misalnya adalah rata kiri, kanan, tengah, atau justify. Ini bisa memengaruhi aliran pembacaan dan organisasi visual informasi.

7. Penggunaan Whitespace

Ini membantu menciptakan tampilan yang bersih dan terorganisir. Selain itu, ini juga memainkan peran kunci dalam membedakan antara elemen teks dan memfasilitas aliran pembacaan yang alami.

8. Elemen Pendukung

Ini bisa mencakup elemen desain lain seperti garis, bingkai, ikon, atau gambar. Tujuannya adalah untuk digunakan bersama dengan teks dan memperkuat hirarki dalam navigasi visual.

9. Spacing

Ini merupakan komponen inti untuk ciptakan teks yang terbaca dan enak dilihat. Berikut adalah beberapa hal yang mencakup spacing:

Faktor Penting dalam Mendesain Elemen Typography

Dalam mendesain elemen typography ada beberapa hal yang perlu diperhatikan. Berikut adalah poin-poin penting dalam mendesain elemen tipografi:

Aturan Penggunaan Typography dalam Proyek Digital

Dalam proyek digital, penggunaan tipografi tidak terbatas pada estetika, tapi juga berperan dalam fungsionalitas dan SEO. Memahami aturan tipografi untuk proyek digital dapat meningkatkan aksesibilitas dan keterbacaan konten.

Selain itu, mengikuti aturan tersebut juga bisa memastikan konten dapat diindeks dengan baik oleh mesin pencari. Berikut adalah beberapa aturan penggunaannya dalam proyek digital:

• Judul Dokumen (Title): Penting bagi pengguna dan web crawler. Umumnya, diwakili dalam tag <title> dalam HTML. Tag tersebut berbeda dengan penggunaan <h1>

• Teks Badan (Body): Menentukan cara konten utama harus disajikan. Mencakup pemilihan typeface, ukuran font, dan line spacing untuk memastikan keterbacaan teks.

• Header (H1 - H6): Digunakan untuk membedakan judul dan subjudul. Tag <h1> mewakili bagian terpenting dan terbesar. Sementara itu, tag <h6> mewakili informasi tambahan.

• Tebal (Bold): Mendefinisikan bagian teks penting dan ingin ditonjolkan.

• Miring (Italic): Menandai teks yang ingin ditekankan.

Itulah pembahasan lengkap mengenai typography hierarchy. Dari penjelasan di atas, bisa dilihat bahwa typography hierarchy memiliki peran penting dalam meningkatkan keterbacaan teks dan mengorganisasi struktur konten.

Hal ini tentunya juga berlaku dalam UI/UX design yang melibatkan elemen visualisasi. Berbicara tentang UI/UX, MinDi ingin rekomendasikan Bootcamp UIUX/Product Design. Program ini sangat cocok buat kamu yang mau belajar UI/UX dari nol sampai mahir.

Di sini, kamu bisa belajar dari teori dasar, alat pendukung, hingga implementasinya dengan real-case project. Selain itu, pembelajarannya dipandu oleh profesional dan dilengkapi dengan silabus beginner-friendly. Jadi, siapapun bisa ikut dan jadi mahir!

Lewat program ini, kamu bakal dibimbing sampai jadi! So, segera gabung dan tingkatkan keahlianmu bareng Dibimbing.id!