Baik Anda mendesain untuk dicetak atau web, tipografi yang baik membantu menyeimbangkan struktur visual desain Anda antara konten dan visual. Terapkan delapan elemen tipografi ini untuk memastikan pemirsa Anda dapat menavigasi konten Anda seperti yang Anda inginkan.

1. Kontras Warna Kontras

warna yang baik mungkin tampak seperti konsep dasar, tetapi ada beberapa hal yang mudah diabaikan untuk diperhatikan saat memilih warna untuk tipografi dan desain keseluruhan Anda.

Salah satu kesalahan paling umum (dan yang paling mudah untuk diperbaiki) adalah meletakkan teks hitam di atas latar belakang putih – ini terlalu kontras! Jika Anda melihat sebagian besar situs web yang dirancang dengan baik, Anda akan melihat teks hitam pada latar belakang putih tidak benar-benar hitam – melainkan abu-abu. Teknik ini mengurangi kontras dan memudahkan pemirsa untuk membaca.

Kontras tidak dicapai hanya dengan menemukan dua warna yang sangat berbeda. Hanya karena dua warna berbeda tidak berarti keduanya akan memberikan kontras yang baik jika nilainya sama.

Tes sederhana untuk melihat apakah desain Anda memiliki kontras yang cukup adalah dengan mengubahnya menjadi grayscale. Ini akan memungkinkan Anda untuk dengan mudah melihat nilai warna, yang dalam hal kontras, jauh lebih penting daripada warna.

Pada gambar di bawah, meskipun warnanya sangat berbeda, setelah diubah menjadi skala abu-abu, Anda dapat melihat bahwa nilainya sangat dekat sehingga kata-kata menjadi hampir mustahil untuk dibaca. Ini memberitahu Anda bahwa warna-warna ini bukan pasangan yang baik.

Jika Anda mendesain di komputer seperti kebanyakan dari kita, ini sedikit lebih teknis, tetapi sama mudahnya. Di Photoshop, setelah meratakan pekerjaan Anda, pilih: Image>Adjustments>Desaturate. Di Illustrator Anda melakukan ini dengan memilih desain Anda, lalu pilih: Edit>Edit Colors>Convert to Grayscale.

2. Ukuran Font

Desain cetak dan desain web berbeda di sini – terutama karena medianya masing-masing.

Dalam desain cetak, font 10pt untuk body copy diterima secara umum, tetapi di web, kita berurusan dengan piksel. Setara dengan 10pt adalah 13px dan ini adalah ukuran yang baik untuk digunakan untuk body copy di web. Apa pun yang lebih kecil dari ukuran ini akan terlalu kecil untuk dibaca oleh pemirsa rata-rata.

Tentu saja, ingatlah audiens Anda. Jika Anda mendesain situs web atau brosur untuk audiens yang lebih dewasa, buat huruf Anda lebih besar – pemirsa Anda akan senang Anda melakukannya.

3. Leading

Leading adalah ruang antara baris teks – apa yang disebut oleh desainer web sebagai tinggi garis. Kata leading berasal ketika huruf diatur dengan tangan di mesin cetak. Strip timah (lead ) diletakkan di antara garis jenis untuk menambah ruang.

Tanpa spasi antar baris jenis, menjadi sulit bagi pemirsa untuk membaca dan mengikuti dari satu baris ke baris berikutnya. Menambahkan terlalu banyak ruang membuat sebagian besar teks membosankan untuk dibaca.

Dalam desain cetak, leading standar adalah 120% ukuran titik font (10 point type/12 point leading, 12 point type/14.4 point leading). Dalam desain web, tinggi garis yang baik juga sekitar 120%. Dalam desain cetak dan web, persentase ini dapat sedikit berbeda berdasarkan jenis huruf yang digunakan tergantung pada tinggi x, ascender dan descender dari setiap bentuk huruf.

Sering kali, lead yang sangat ketat atau sangat terbuka dapat menghasilkan tipografi yang indah, tetapi harus disediakan untuk teks dalam jumlah kecil, bukan blok salinan yang besar.

4. Kerning

Kerning adalah proses mengatur spasi antar karakter individu.

Tujuan kerning adalah untuk mencapai tipe yang lebih seimbang – menyamakan tampilan spasi putih antar karakter. Ini sangat penting dalam header dan huruf besar. Meskipun tidak begitu penting dalam paragraf tipe kecil, kerning bisa sangat fungsional ketika Anda mencoba untuk menghindari jeda baris dalam desain Anda.

5. Hirarki

Web designer sering membuat hierarki tipografi dengan menggunakan tag <h1>, <h2>, dan seterusnya. Hirarki bukan hanya ukuran, tetapi lebih berkaitan dengan keunggulan elemen tipografi Anda relatif satu sama lain.

Ini dapat dicapai dengan menggunakan jenis huruf yang berbeda, warna yang kontras, ruang putih atau ukuran.

Mencapai hierarki yang baik biasanya harus dimulai dengan sketsa di mana Anda mengatur elemen visual terpenting Anda hingga elemen yang paling tidak penting.

Elemen yang paling penting tidak harus lebih besar, hanya perlu lebih menonjol dari elemen lainnya. Tanyakan pada diri Anda apa yang Anda ingin pemirsa baca terlebih dahulu. Ini tidak harus menjadi yang pertama dalam tata letak Anda – itu hanya perlu menjadi titik fokus.

Dalam contoh ini, halaman beranda thisisdare.com, apa titik fokusnya? "BERANI" kan? Dalam hal ini, titik fokus dicapai dengan ukuran dan warna, tetapi ke mana mata Anda selanjutnya? Saya akan mengatakan itu pergi ke bawah untuk mencari tahu apa DARE itu. Hirarki di sini dicapai dengan warna dan kontras meskipun urutannya dalam komposisi.

Bagaimana jika teks tentang kami berwarna hitam dan bukan oranye? Warna tidak digunakan hanya untuk kualitas estetika atau untuk mencocokkan kata DARE, tetapi digunakan dengan sengaja untuk membuat hierarki dan mengarahkan mata pemirsa ke tempat berikutnya.

6. whitespace 

Whitespace , atau ruang negatif, adalah ruang antar elemen dalam suatu komposisi.

Jika tipografi dan elemen desain lainnya padat dan terlalu berdekatan, konten Anda akan sulit dibaca. Di sinilah whitespace masuk.

Whitespace dapat digunakan untuk menciptakan keseimbangan atau mengarahkan pandangan pemirsa dari satu bagian komposisi ke bagian berikutnya. Itu dapat memunculkan perasaan elegan atau menambahkan tingkat komunikasi ke perawatan tipografi.

Logo FedEx menggunakan spasi putih antara huruf besar E dan x untuk membuat counterform – panah. Ini menambahkan tingkat komunikasi sekunder pada kata tersebut.

7. Serif vs. Sans Serif

Desainer cetak selalu memperdebatkan font mana yang lebih mudah dibaca – serif atau sans serif. Sebenarnya, tidak ada bukti yang mendukung bahwa salah satu lebih terbaca daripada yang lain di media cetak. Beberapa orang mengatakan font sans serif harus disediakan untuk judul dan header dan font serif harus digunakan untuk body copy, sementara banyak orang lain mengatakan sebaliknya.

Namun, ketika berurusan dengan desain web atau segala jenis desain di layar, umumnya disepakati bahwa font sans serif lebih mudah dibaca di layar. Mereka harus digunakan untuk sebagian besar teks di layar sementara font serif harus digunakan terutama untuk bagian kecil seperti judul dan header.

8. Menggunakan Webfonts

Di masa lalu, tipografi di web terbatas pada web safe atau font sistem. Jika Anda mendesain situs web menggunakan jenis huruf Akzidenz-Grotesk, hampir tidak ada orang yang menginstalnya di komputer mereka dan akibatnya, pengunjung Anda akan melihat teks Anda dalam Helvetica atau lebih mungkin, Arial – jenis huruf apa pun yang mereka pasang di sistem mereka . Dalam upaya sia-sia untuk mengimbangi semua orang di setiap sistem (bahkan pengguna Linux)

Hari ini tipografi di web berkembang. Ada beberapa teknologi yang memungkinkan pengguna akhir untuk merasakan font yang Anda inginkan untuk mereka lihat. Beberapa menggunakan font-replacement, WOFF, javascript atau font yang dihosting. Daftar teknologi bisa memusingkan tetapi semuanya bermuara pada ini: Anda dapat menggunakan font non-sistem dan percaya bahwa pengguna Anda akan melihatnya. Biasanya, yang perlu Anda lakukan hanyalah menambahkan tautan di <head> Anda dan Anda bebas untuk membuat kode dengan percaya diri. Anda tidak lagi memerlukan font cadangan di dunia yang mendukung font web.

Memahami elemen tipografi dasar ini dan menerapkannya dengan terampil ke desain cetak atau web Anda akan meningkatkan keterbacaan untuk pemirsa Anda dan kualitas desain Anda. Ingatlah bahwa desain adalah proses kreatif dan perlakukan pedoman ini sebagai dasar untuk desain Anda – bukan seperangkat aturan yang harus diikuti.

terjemahan bebas dari https://www.crazyegg.com/blog/typography-design-elements/