Dalam dunia web design, tipografi memainkan peran penting dalam menyampaikan pesan, meningkatkan keterbacaan, dan meningkatkan keseluruhan estetika situs. Dengan Theme OceanWP, Anda diberikan kendali penuh untuk menyesuaikan berbagai elemen tipografi di situs WordPress Anda.

Dalam tutorial ini, kita akan mengeksplorasi berbagai pengaturan tipografi yang tersedia dan bagaimana cara menggunakannya dengan maksimal. Mari mulai!

Screenshot 2023 08 31 092714 — Setting Typography

Dasar Tipografi

General

Mengatur gaya tipografi dasar untuk seluruh situs Anda, termasuk warna font, jenis font, dan ukuran.

Warna Font: Warna font mempengaruhi legibilitas dan mood situs Anda. Pastikan memilih warna yang kontras dengan latar belakang untuk keterbacaan yang optimal.
Jenis Font: Jenis font atau typeface menentukan karakter dan suasana situs Anda. Ada banyak pilihan seperti serif, sans-serif, dan lainnya.
Ukuran Font: Ukuran font harus sesuai untuk memastikan keterbacaan teks. Terlalu besar atau kecil bisa mengganggu pengalaman pengguna.

Body

Ini adalah gaya teks utama yang akan Anda lihat di sebagian besar konten situs Anda.

Paragraf: Ini adalah blok teks utama di situs Anda. Pastikan memilih ukuran dan jenis font yang nyaman untuk dibaca dalam jangka waktu yang lama.
Link: Gaya tipografi untuk link dalam konten Anda. Penting untuk memastikan link menonjol namun tetap kohesif dengan teks lainnya.

All Headings

Penyesuaian global untuk semua judul di situs Anda, mulai dari H1 hingga H4.

Hierarki: Memahami hierarki judul sangat penting. H1 biasanya digunakan untuk judul utama, sementara H2, H3, dan H4 digunakan untuk sub-judul dengan tingkat kedalaman informasi yang berbeda.
Konsistensi: Meski tiap heading memiliki fungsi dan ukuran berbeda, penting untuk menjaga konsistensi dalam jenis font dan gaya.

Heading 1 (H1) – Heading 4 (H4)

Penyesuaian individual untuk setiap level judul.

H1: Ini adalah judul utama dan biasanya yang paling mencolok di halaman. Harus jelas dan mendefinisikan konten halaman.
H2: Digunakan untuk sub-judul utama. Seringkali digunakan untuk membagi bagian-bagian besar konten atau menandai awal topik baru.
H3 & H4: Ini lebih spesifik dan biasanya menguraikan detail atau poin-poin tambahan di bawah H2. Pastikan mereka konsisten dan jelas dalam hierarki tipografi Anda.

Branding & Menu Tipografi

Logo

Menyesuaikan tampilan tipografi dari logo situs Anda.

Pilihan Font: Logo Anda adalah representasi merek Anda. Pilih jenis font yang mencerminkan karakter dan identitas merek Anda.
Ukuran & Bobot: Ukuran font dan bobot (ketebalan) font sangat mempengaruhi visibilitas logo. Sesuaikan agar logo mudah dikenali namun tidak mendominasi tampilan halaman.
Efek Khusus: Beberapa logo menggunakan efek khusus seperti bayangan, garis bawah, atau efek 3D. Pastikan efek tersebut menunjang desain dan tidak mengganggu keterbacaan.

Top Bar & Main Menu

Menyesuaikan tipografi untuk bilah atas situs Anda dan menu utama.

Konsistensi: Meskipun top bar dan menu utama mungkin memiliki fungsi yang berbeda, penting untuk menjaga konsistensi tipografi agar tampilan situs tetap harmonis.
Hover & Klik: Perhatikan bagaimana tipografi berubah saat mouse berada di atas atau saat diklik. Pengguna harus dapat dengan mudah mengetahui item mana yang sedang dipilih atau diklik.
Spacing: Jarak antar item di top bar dan menu utama sangat penting untuk navigasi yang jelas dan keterbacaan yang baik.

Main Menu: Dropdowns & Mobile Menu

Pengaturan khusus untuk menu dropdown dan tampilan menu di perangkat seluler.

Dropdowns: Pastikan tipografi untuk item dropdown konsisten dengan menu utama, namun cukup berbeda sehingga pengguna dapat dengan mudah membedakan antara item menu utama dan sub-item.
Mobile Menu: Dengan layar yang lebih kecil, penting untuk memastikan bahwa menu mudah dibaca dan diklik. Perhatikan ukuran font, jarak, dan responsivitas tampilan menu pada berbagai ukuran layar.
Transisi & Animasi: Saat menu dropdown diperluas atau menu seluler ditampilkan, animasi dan transisi yang halus dapat meningkatkan pengalaman pengguna.

Halaman & Konten Blog Tipografi

Page Title & Page Title Subheading

Mengatur gaya tipografi untuk judul halaman dan subjudulnya.

Pentingnya Hierarki: Judul halaman harus menonjol, sedangkan subjudul memberikan konteks tambahan. Perbedaan dalam ukuran, bobot, atau jenis font dapat membantu menciptakan hierarki yang jelas.
Posisi & Jarak: Posisi judul dan subjudul, serta jarak di antara keduanya, mempengaruhi kesan pertama pengunjung dan bagaimana mereka membaca konten Anda.
Efek Dekoratif: Menggunakan garis bawah, bayangan, atau efek lain pada judul dan subjudul dapat menambah daya tarik visual, tetapi harus dilakukan dengan bijaksana agar tidak mengalihkan perhatian.

Breadcrumbs

Penyesuaian tipografi untuk breadcrumb, memandu pengunjung melalui struktur situs Anda.

Navigasi yang Jelas: Breadcrumbs harus mudah dibaca dan difahami, menunjukkan jalan pengunjung melalui situs dengan jelas.
Pemisah: Pilih simbol pemisah (seperti panah atau garis miring) yang sesuai dengan desain situs Anda.
Hover & Klik: Efek saat mouse berada di atas atau saat breadcrumb diklik harus konsisten dengan navigasi lainnya di situs Anda.

Blog Entry Title & Blog Post Title

Mengoptimalkan tampilan judul entri dan postingan blog Anda.

Menonjolkan Konten: Judul entri dan postingan adalah salah satu elemen pertama yang dilihat pembaca. Mereka harus menonjol tetapi tidak mendominasi.
Interaksi: Respons saat judul diklik atau mouse berada di atasnya dapat meningkatkan interaktivitas dan pengalaman membaca.
Konsistensi dengan Konten: Gaya tipografi judul harus konsisten dengan isi postingan, menciptakan aliran yang harmonis dari judul ke konten.

Sidebar Widget Heading & Widgets

Menentukan gaya untuk judul widget dan konten widget lainnya di sidebar.

Pembeda dari Konten Utama: Widget di sidebar seringkali berfungsi sebagai informasi tambahan atau navigasi. Gaya tipografinya harus membedakannya dari konten utama, namun tetap kohesif.
Fokus pada Fungsionalitas: Widget memiliki tujuan spesifik, baik itu daftar postingan terbaru, pencarian, atau kategori. Gaya tipografi harus mendukung fungsionalitas tersebut tanpa mengganggu.
Responsivitas: Dengan berbagai ukuran layar yang digunakan oleh pengunjung, pastikan widget Anda tetap terlihat bagus dan fungsional di semua perangkat.

Footer & WooCommerce Tipografi

Footer Widget Heading, Footer Copyright & Footer Menu

Mengatur tampilan tipografi untuk bagian footer situs Anda, termasuk hak cipta dan menu footer.

Pentingnya Keterbacaan: Meskipun berada di bagian bawah situs, footer memainkan peran penting dalam memberikan informasi penting. Pastikan teks mudah dibaca dan tidak terlalu kecil.
Estetika & Fungsionalitas: Hak cipta, tautan kebijakan, dan menu footer harus ditampilkan dengan cara yang menarik namun tetap fungsional.
Konsistensi dengan Desain Keseluruhan: Gaya tipografi footer harus konsisten dengan bagian lain dari situs Anda, menciptakan tampilan yang seragam dari atas hingga bawah.

WooCommerce Elements

Dari judul produk hingga notifikasi, pastikan setiap elemen WooCommerce Anda memiliki tampilan tipografi yang konsisten dan menarik.

Highlight Produk: Judul produk, harga, dan informasi kunci lainnya harus menonjol. Penyesuaian ukuran font, bobot, dan warna dapat membantu produk Anda menjadi pusat perhatian.
Navigasi & Interaksi: Tombol “Tambah ke Keranjang”, pemberitahuan, dan elemen interaktif lainnya harus mudah diidentifikasi dan diklik oleh pengunjung.
Detail Produk & Arsitektur Informasi: Judul arsip, kategori, dan elemen lain yang membantu pengguna menavigasi produk Anda harus memiliki tipografi yang jelas dan konsisten, memandu pengunjung melalui proses belanja dengan mudah.

Penutup

Tipografi adalah salah satu elemen desain yang paling mendasar, namun seringkali diabaikan. Dengan memanfaatkan fitur-fitur yang disediakan oleh Theme OceanWP, Anda bisa memastikan situs Anda tidak hanya tampak menarik, tetapi juga mudah dibaca dan dinavigasi.

Setelah menyelesaikan tutorial ini, Anda seharusnya merasa lebih percaya diri dalam menyesuaikan tipografi situs Anda agar sesuai dengan merek dan visi Anda. Selamat mendesain!