Pengertian Typographic Hierarchy

Berarti hirarki tipografi (dalam bahasa Indonesia) typographic hierarchy adalah sistem yang menggunakan tipografi seperti ukuran, font, dan layout atau tata letak berbagai teks untuk membuat divisi hierarkis yang dapat menunjukkan kepada pengguna tempat mencari jenis informasi tertentu berdasarkan simpulan Kami yang bersumber dari Situs Technopedia.

Hirarki tipografi adalah sistem pengorganisasian untuk menetapkan pesanan dalam satu set data dengan membuat berbagai ukuran, bentuk dan blok teks.

Para developers atau pengembang dapat mengarahkan mata pengguna ke informasi yang paling dibutuhkan audiens atau mengelompokkan informasi tersebut secara visual untuk audiens.

Apa itu Hirarki Tipografi ? 

Hirarki tipografi merupakan bentuk lain dari hierarki visual, sebuah sub-hierarki per se dalam proyek desain keseluruhan.

Hirarki seni tulisan ini menyajikan huruf sehingga kata-kata yang paling penting ditampilkan dengan dampak paling besar sehingga pengguna dapat memindai teks untuk informasi kunci.

Tanpa adanya typography hierarchy, setiap huruf, setiap kata dan setiap kalimat dalam desain akan terlihat sama.

Hirarki tipografi menciptakan kontras antara elemen. Desainer mencapai ini melalui penggunaan tipografi, ukuran, berat, huruf kapital dan huruf kecil, cetak tebal atau miring, orientasi dan warna.

Kombinasi dari alat-alat desain tersebut digunakan untuk membuat tipe atau jenis huruf yang jatuh ke lapisan yang berbeda.

Faktor-Faktor yang Membentuk Typographic Hierarchy

Mengacu pada penjelasan pengertian dan arti typographic hierarchy di atas, hirarki tipografi menunjukkan kepada pembaca informasi yang menjadi fokus, seperti perbedaan mana yang paling penting dan mana yang hanya mendukung poin-poin utama.

Ada berbagai hal yang membentuk hierarki tipografi terutama di website, berikut ini adalah beberapa faktor-faktor pembentuk typography hierarchy yang harus kalian ketahui :

1. Type dan Font Style

Tipografi dan berat ukuran font memainkan peran penting dalam membangun hierarki tipografi, terutama untuk tajuk berita utama dan subjudul.

Secara umum, huruf tebal, dekoratif, atau typestyles yang lebih khas menuntut perhatian dan menunjukkan kepentingan, tetapi demikian juga jenis huruf ultra ringan dalam pengaturan yang tepat.

2. Font Size

Mata penonton biasanya ditarik ke tipe berukuran terbesar terlebih dahulu (yang biasanya, tetapi tidak selalu seperti judul) dan kemudian beralih ke elemen lain.

Meskipun tajuk paling umum muncul berada di bagian atas halaman, penempatan ini bukanlah menjadi sebuah keharusan. Komposisi yang dirancang dengan baik akan memandu pembaca ke tajuk utama dan elemen penting lainnya di mana pun mereka berada.

3. Color

Penggunaan warna dapat menarik perhatian atau mengurangi elemen. Sebagai contoh misalnya, jenis huruf warna merah pada halaman dengan sebagian besar teks hitam akan langsung menonjol, sementara membuat elemen abu-abu yang kurang penting di tengah-tengah teks hitam akan mengecilkannya.

Perlu diingat bahwa terlalu banyak warna yang digunakan dalam banyak contoh dapat membuat kebingungan visual, yang pada gilirannya merusak efektivitasnya.

4. Case

Penggunaan case atau huruf besar dalam dosis kecil dapat menjadi cara yang efektif untuk menarik perhatian dan menunjukkan kepentingan, terutama untuk judul atau subjudul.

Di sisi lain, pemberian huruf besar diketahui akan membuat keterbacaan berkurang, jadi menggunakan huruf besar dan kecil lebih disukai untuk pengaturan yang panjang, termasuk running text.

5. Position dan Space

Penempatan semua elemen, serta ruang antara dan di sekitarnya adalah bagian dari keseluruhan hierarki. Selalu jaga agar informasi yang paling penting tetap menonjol. Tempatkan semua elemen terkait secara bersamaan, sambil memisahkan yang lain secara visual untuk mengatur konten.

6. Alignment

Alignment atau penjajaran adalah bagaimana elemen-elemen disejajarkan dapat menyiratkan tingkat signifikansi relatifnya. Centering misalnya untuk menyampaikan rasa penting, dan sering digunakan untuk judul, berita utama, pengumuman dan undangan.

Sebaliknya, menjalankan body copy (bagian utama teks) biasanya membutuhkan penekanan yang lebih sedikit daripada judul dan subjudul dan biasanya dibiarkan rata yang lebih mudah dibaca.

7. White Space

Penggunaan white space digunakan untuk menciptakan penekanan dan menarik perhatian pada elemen-elemen penting.

Tahan godaan untuk mengisi setiap bit ruang pada halaman yang dapat menciptakan terlalu banyak “noise visual” yang dapat membingungkan.

Kategori dalam WordPress Template Hierarchy

Semua website yang dibuat di WordPress terbagi ke dalam tujuh tipe halaman. Setiap kategorinya memiliki built-in WordPress template hierarchy :

1. Site Front Page

Ketika WordPress memuat halaman beranda utama website, hal pertama yang akan dicari adalah file front-page.php. Seandainya file ini tidak ditemukan, maka platform WordPress akan kembali ke home.php. Jika kedua file ini tidak dapat ditemukan maka WordPress akan mencari file index.php.

Begini urutan cara kerja hirarkinya :

1. front-page.php
2. home.php
3. index.php

Meskipun ketiga file tersebut sama, WordPress masih saja mengacu pada internal logic-nya. Walaupun demikian, hirarkinya ini terkesan lebih mudah.

2. Single Posts

Sebelum WordPress melakukan rendering terhadap file tersebut, sebaiknya tentukan terlebih dulu mana file template yang akan digunakan di halaman secara keseluruhan.

Berikut cara kerja hirarki single posts :

1. single-{post-type}-{slug}.php
2. single-{post-type}.php
3. single.php
4. singular.php
5. index.php

Pada daftar single-{post-type}-{slug}.php. Misalnya saat ini tengah membangun dan mengelola toko online, maka contohnya akan seperti ini, single-product-ca-12.php. Dengan kata lain, WordPress akan mencari file template yang unik untuk setiap post yang di-load dalam kategori tertentu. Seandainya platform WordPress tidak bisa menemukan template yang relevan, maka CMS ini akan kembali ke single-{post-type}.php dan begitu seterusnya sampai tiba di index.php.

Cara ini memungkinkan untuk mendesain sendiri template yang hendak di pasang di masing-masing post atau produk. Jika ingin menerapkan satu template untuk semua post di situs, maka gunakan single.php.

3. Single Pages

Single pages membuat kategori sendiri di WordPress. Disini akan mengambil situs Hostinger sebagai contoh. https://www.example.co.id adalah beranda atau halaman utama website. Pada saat mengakses halaman utama, WordPress akan meloading template front-page.php. Sementara itu halaman lain, seperti https://www.example.co.id/web-hosting menjadi bagian dari single pages.

Berikut hirarki yang dipatuhi oleh single page :

1. File template custom.
2. page-{slug}.php
3. page-{id}.php
4. page.php
5. singular.php
6. index.php

Di nomor satu, entry tersebut bukanlah nama file. Hal ini terjadi karena WordPress bisa mendeteksi beberapa tipe konten sebagai single pages. Misalnya, jika ingin mengelola sebuah post, WordPress akan menetapkan hirarki default yang telah kami jelaskan sebelumnya. Di sisi lain, single pages (contohnya /web-hosting) akan berpindah ke page-slug.php. Sebagai contoh page-web-hosting.php (seandainya file seperti ini tersedia).

Sistem kerja hirarki pada single page akan sama seperti pada post. Jika tidak ada file template untuk slug unik dari suatu halaman, maka WordPress akan mencari file yang cocok dengan ID-nya. Seperti biasa, semua line akan berakhir di index.php semisal beberapa file sebelumnya tidak ditemukan.

4. Category and Tag Pages

Berikut file template yang masuk dalam hirarki untuk kategori ini :

1. category-{slug}.php
2. category-{id}.php
3. category.php
4. archive.php
5. index.php

Cara kerja hirarki di bagian ini sama seperti cara kerja hirarki terhadap post dan halaman. WordPress akan mencari template yang unik untuk kategori yang hendak di-loading. Pertama platform ini akan mencari filename yang menyertakan slug, kemudian ID. Jika filename yang dimaksud tidak ditemukan, maka WordPress akan mencari category.php. Apabila gagal lagi, WordPress akan kembali mencari archive.php. Arsip WordPress haruslah memuat post dari semua kategori sehingga dapat diikutsertakan dalam hirarki.

Selain itu telah dikelompokkan WordPress tag ke bagian ini karena keduanya merupakan elemen taxonomic. Hirarki keduanya pun serupa, kecuali jika mengganti semua contoh category dari tag.category-{slug}.php menjadi tag-{slug}.php.

5. Custom Post Types

Pada dasarnya custom post types adalah tipe atau jenis konten yang tidak tergabung dalam klasifikasi default WordPress. Misalnya jika memiliki blog yang berfokus pada konten review atau ulasan, maka sudah pasti ingin membuat custom post type yang disebut reviews dan kemudian menambahkan fitur tambahan ke dalam konten review tersebut.

Berikut hirarki dari tipe kontent :

1. archive-{post_type}.php
2. archive.php
3. index.php

Hirarki tersebut tidak menyediakan informasi yang mendetail seperti pada beberapa hirarki sebelumnya. Meski demikian, WordPress masih harus melewati beberapa file template sebelum sampai pada index.php untuk membuat berbagai halaman yang rumit atau kompleks.

6. Search Result Pages

Umumnya, kategori search result pages tidak sesulit lima kategori sebelumnya. Hal ini dikarenakan telah tersusunnya tata letak atau layout terkait. Kemudahan ini tercermin dalam hirarki search result pages :

1. search.php
2. index.php

Dalam kasus ini, WordPress diatur secara default ke index.php apabila tidak ditemukannya custom template untuk halaman hasil pencarian (search result page). Sebagian besar tema modern akan menyertakan beberapa kustomisasi untuk halaman pencarian.

7. 404 Error Pages

Halaman error adalah salah satu halaman yang paling dihindari oleh siapa pun baik sebagai pemilik situs maupun para pengunjung website. Namun, tetap saja halaman error harus dibuat jikalau kesalahan terjadi. Sekadar informasi, WordPress tidak menawarkan custom error pages. Namun jangan khawatir untuk membuat halaman error sangatlah mudah.

Jika membuat halaman error, WordPress akan mendeteksinya terlebih dulu, seperti yang akan didemonstrasikan oleh hirarkinya di bawah ini :

1. 404.php
2. index.php

Di sarankan untuk membuat halaman error jika traffic website saat ini semakin ramai.

Cara kerja WordPress Template Hierarchy

Template tersebut digunakan ketika halaman atau post telah di muat. WordPress template hierarchy menentukan template yang akan digunakan beserta fungsinya.

Sebagai contoh, apabila mencoba loading halaman di kategori hosting hypothetical maka inilah yang terjadi di background :

1. WordPress akan mencari file template category-hosting.php di direktori tema saat ini.
2. Jika file category-hosting.php tidak ditemukan maka WordPress akan mencari file yang menggunakan ID kategori, misalnya category-2.php.
3. Apabila WordPress tidak juga menemukan dua file yang dimaksud, maka CMS ini akan mencari file generic category.php.
4. Jika file category.php tidak ditemukan maka WordPress akan mencari template archive.php.
5. Jika semua file di atas tidak juga ditemukan, platform blogging ini akan meloading file tema index.php dan menggunakannya sebagai template halaman.

File template akan dicari sesuai urutan. Karena itulah, file-file tersebut tersusun dalam sebuah hirarki. Dalam artian lebih luas, website WordPress terdiri atas tujuh kategori halaman dan masing-masing memiliki hirarki yang ketat.

Tips Menerapkan Typographic Hierarchy yang Baik dalam Desain

Halaman yang tampak cantik membutuhkan ketulusan dan rasa dalam membuatnya. Di bawah ini adalah beberapa tips penerapan typographic hierarchy atau hirarki tipografi yang harus diketahui terutama dalam desain web :

• Mengetahui konten

Untuk membuat hierarki tipografi yang berhasil, penting untuk memahami kedua elemen yang dibutuhkan pada halaman dan kepentingan relatifnya.

• Pisahkan bagian dari paragraf

Hal ini menghasilkan desain halaman yang lebih harmonis dan pengalaman membaca yang lebih baik.

• Coba dengan kombinasi jenis yang berbeda

Ukuran, warna, posisi, jenis huruf. Ini hanyalah beberapa atribut yang dapat dicoba untuk membuat hierarki tipografi. Kombinasi yang tepat akan memberikan konten di tampilan yang sama sekali baru, buat judul bagian pop dan membantu membimbing mata pembaca melalui halaman.

• Gunakan huruf yang lebih besar untuk teks isi

Tidak akan dapat membaca artikel panjang dengan font 12px sampai akhir, terutama pada layar mobile (seluler) atau perangkat komputer lainnya yang dari tahun ke tahun semakin mengecil.

• Tempatkan gambar di atas konten terkait

Arah membaca alami adalah kiri ke kanan, atas ke bawah. Otak akan merasakan dan memproses gambar lebih cepat daripada teks, yang berarti melihat gambar terlebih dahulu, lalu secara alami melanjutkan membaca apa pun yang ditemukan di bawahnya.

• Berikan mock up pada teks untuk proyek yang kaya konten

Untuk sebagian besar proyek dapat bereksperimen dengan tipe saat bekerja dengan elemen lain di tata letak. Kemungkinan tidak akan membutuhkan lebih dari satu judul halaman, judul bagian dan teks paragraf. Tetapi jika proyek melibatkan hierarki tipografi yang lebih kompleks (seperti koran atau majalah online), maka hal yang terbaik adalah melakukan mockup terlebih dahulu.