Contoh tipografi web yang baik, buruk, dan bagus. Contoh tipografi web yang baik, buruk, dan bagus

Daftar ini disusun berdasarkan hasil kuartal kedua. 2008. “Parade hit” sebelumnya dapat ditemukan dan.

Setiap contoh disertai dengan komentar singkat, dan mengklik tangkapan layar akan mengarahkan ke situs aslinya.

Konferensi Benih

Tanpa flash, tanpa gambar, tanpa noise yang tidak perlu; hanya font yang ditata dengan baik dan teks yang ditulis dengan baik: bukti nyata bahwa Anda bisa mendapatkan hasil yang luar biasa hanya dengan font. Saya ingin melihat beberapa contoh lagi yang serupa.

Merancang Berita

Kontras yang luar biasa antara judul dan isi isi, banyak ruang bersih dan organisasi yang baik.

OmniTI

Logo bagus, teks jelas dan warna sangat bagus. Anda dapat membaca lebih lanjut tentang pengembangan desain.

Desainer.itu

Logo hiasan yang indah (ada yang tahu font apa ini?) dan banyak detail indah.

Tampilan Desain

Andy Rutledge adalah seorang desainer yang mempraktikkan prinsip yang sama dengan yang dia anjurkan. Saya suka cara mengubah ukuran font tergantung pada tanggal publikasi artikel, sehingga teks terbaru sesuai dengan font terbesar.

Admin WordPress.org & WP 2.5.x

Meskipun platform blog WordPress tidak berbasis situs web, situs mereka ditampilkan di ribuan, bahkan jutaan, layar kita setiap hari. Saya berharap lebih banyak aplikasi online dan offline terlihat sebagus ini.

Tipe Kami

Saya sebenarnya tidak ingin memasukkan situs ini ke dalam ulasan karena menggunakan Flash. Namun, ia berhasil menampilkan beberapa font yang bagus (dan beberapa favorit saya, mungkin saya tambahkan).

Dek

Situs lain yang hanya didasarkan pada font secara keseluruhan. Contoh yang bagus tentang hierarki dan tata letak. Siapa bilang “sebuah foto berbicara lebih dari seribu kata”? Tidak, fontnya berbicara lebih baik.

Sial Ya Bung

Banyak informasi tanpa terasa sesak, ditambah lagi situs ini terikat dengan grid tata letak yang baik.

Arsitek Informasi

Para desainer tidak takut dengan area kosong yang luas dan rentang warna yang terbatas.

Naz Hamid

Bagus sekali. Sebuah desain yang berbicara sendiri.

Jon Tan

Tipografinya kaya, elegan dan tanpa kekacauan, dan logonya... bukan gambar!

Dalam pertimbangan

Ada banyak informasi yang terorganisir dengan baik, dan disertai dengan palet warna yang dipilih dengan rapi.

Saham Elliot Jay

Situs ini telah dinominasikan dalam banyak kompetisi. Itu sampai di sini berkat penggunaan font yang bagus.

Hal yang Kami Buat

Font berwarna-warni, terorganisir, dan besar.

Pada artikel berikutnya, “Pandangan Mendalam pada Tipografi untuk Web,” kita akan melihat lebih dekat beberapa situs ini.

Situs web yang bagus dimulai dengan tipografi yang indah. Meskipun beberapa aturan bisa dilanggar, terkadang hal yang benar untuk dilakukan adalah kembali ke prinsip dasar tentang tipografi yang baik dan cara membuatnya.

Pengingat ini akan membantu Anda melihat desain Anda dengan pandangan segar, memikirkan pendekatan baru, atau kembali ke desain yang lebih sederhana.

Jadi hari ini, kita akan mengabaikan tren mode dan fokus pada teori tipografi, dan bagaimana "aturan" dapat membantu kita membuat teks yang indah.

Ukuran dan hierarki

Ukuran diperhitungkan. Untuk membuat tipografi yang mudah dibaca, ini bisa menjadi faktor penting. Teks yang kecil sulit dilihat apalagi dibaca, namun teks yang terlalu besar akan melebihi tinggi garis dan menimbulkan kebingungan.

Tipografi yang dapat dibaca memiliki banyak lapisan hierarki. Lapisan ini memberi tahu pengguna apa yang harus dibaca pertama, kedua, dan ketiga. Selain itu, terdapat hierarki yang jelas dalam ukuran teks - satu ukuran untuk judul, ukuran lainnya untuk isi teks, dan ukuran ketiga untuk subjudul.

Pelacakan dan kerning

Tracking dan kerning sering kali membingungkan. Kerning adalah proses mengubah jarak antar huruf secara selektif tergantung pada bentuknya. Pelacakan adalah mengubah jarak antar kumpulan huruf, misalnya paragraf, atau seluruh blok teks.

Kerning sering diterapkan pada elemen tertentu untuk menciptakan kejelasan, meningkatkan keterbacaan, dan bahkan menyesuaikan gaya bagian teks yang besar. Pelacakan sering digunakan untuk mempersempit font isi teks yang terlalu lebar.

Batasi jumlah gaya font yang Anda terapkan

Untuk sebagian besar proyek, dua atau tiga gaya sudah cukup. Untuk menghindari kesalahan pilihan, temukan jenis font dengan banyak variasi gaya yang tersedia. Font kualitas terbaik hadir dalam berbagai gaya—tebal, reguler, miring, kental, hitam, dll.

Campur dan bandingkan gaya

Saya sarankan memilih dua gaya berbeda. Pasangan yang paling umum adalah serif dan sans serif. Saat menggabungkan gaya dan guratan yang berbeda, carilah huruf yang memiliki tinggi dan bentuk cangkir yang sama (spasi di dalam huruf tertutup seperti "o").

Detail kecil ini akan membuat perbedaan besar dalam tampilan font-font ini dan seberapa mudah teks dibaca.

Transfer dan penyelarasan

Dalam kebanyakan kasus, jeda baris dan pembenaran tidak diperlukan. Dalam kasus teks online, teknik ini hanya mempersulit asimilasi dan pemahamannya yang cepat. Tanda hubung mengganggu pembacaan, dan pembenaran yang lengkap sering kali menyebabkan format tidak dapat dibaca.

Jangan mengubah font

Jangan pernah mengubah font. Jangan mencoba membuatnya lebih tebal, lebih tipis, atau lebih tinggi. Lebih baik pilih yang lain.

Desainer font menghabiskan banyak waktu untuk memastikan bahwa jenis huruf dapat dibaca dan memenuhi persyaratan gaya. Tidak perlu mengubah apa pun. Anda tidak akan bisa memperbaikinya, dan dalam banyak kasus Anda hanya akan merusak segalanya.

Jika fontnya tidak cocok untuk Anda, carilah yang lain. Gunakan alat font serupa Idenfont, alat yang mengidentifikasi font serupa.

Kontras

Gunakan tipografi untuk menciptakan kontras. Sama seperti Anda menggunakan ukuran berbeda untuk membuat hierarki, ciptakan daya tarik visual dengan mengubah bobot, warna, dan gaya font.

Warna adalah salah satu cara paling efektif dan sederhana untuk menciptakan kontras. Kontras yang ideal adalah teks gelap dengan latar belakang terang (atau sebaliknya). Anda memiliki pilihan warna yang hampir tak terbatas untuk membantu Anda mencapai tujuan ini. Saat bermain-main dengan warna dan tipografi, perlu diingat bahwa beberapa kombinasi warna, seperti merah cerah pada biru cerah, bisa jadi cukup sulit dibaca.

Dalam hal kontras, cara terbaik untuk membuat teks yang mudah dibaca adalah dengan menggunakan latar belakang yang sederhana. Namun jika mengandung elemen visual seperti gambar atau pola, maka perbesar ukuran hurufnya - ini akan membuat pemisahan antara elemen teks latar belakang dan latar depan.

Format strip panggilan

Format bilah ketik adalah ukuran wadah yang berisi teks. Ini bisa berupa lebar keseluruhan bingkai teks, atau satu kolom.

Format garis penting karena jumlah karakter (termasuk spasi, karakter khusus, dan tanda baca) pada layar memengaruhi keterbacaan. Jika garis terlalu panjang atau terlalu pendek, akan sulit bagi mata pengguna untuk menelusurinya.

Dari Elemen Gaya Tipografi: “Sejumlah karakter, mulai dari 45 hingga 75, dianggap sebagai panjang garis yang memuaskan untuk penyusunan huruf satu kolom. String 66 karakter (termasuk huruf dan spasi) dianggap ideal. Untuk pengetikan multi-kolom, opsi tengah yang ideal adalah garis sepanjang 40-50 karakter.”

Meskipun tidak ada seorang pun yang memikirkan tentang tipografi seluler pada saat buku ini diterbitkan, rekomendasi penyusunan huruf multi-kolom tetap relevan. Dalam kasus dengan layar kecil, Anda bahkan dapat menggunakan 35 karakter per baris.

Terjemahan artikel oleh Carrie Cousins

Kurator sumber font Typewolf, Jeremy Shoaf, memilih contoh situs dengan solusi font yang menarik dan menjelaskan kelebihan dan kekurangannya.

Dikombinasikan dengan tekstur kertas yang tipis, tipografi ini menciptakan perasaan seperti sedang membaca buku.

Cukup Permen Karet

Berkat font web yang membantu mencocokkan tipografi kemasan produk dengan tipografi situs web produsen. Hal ini semakin sering terjadi. Simply Gum telah memilih Gotham sebagai identitas mereknya, menjaga konsistensi identitas di saluran online dan offline.

Situs ini adalah contoh bagus tentang bagaimana terkadang hanya satu gaya saja yang dibutuhkan. Dengan menggunakan bobot dan judul huruf besar Gotham yang bervariasi, Simply Gum membuat hierarki yang jelas hanya dengan satu bobot.

Logo di header dan footer berformat PNG, sehingga kehilangan kejelasan dan skalabilitas font web. Menggunakan font web untuk logo Anda tidak selalu memungkinkan, terutama jika Anda memerlukan kontrol yang baik atas kerning; namun, gambar SVG lebih baik daripada gambar PNG dalam hal ini karena dapat diperbesar dan tetap mempertahankan kejelasannya.

Kesimpulan singkat

Untungnya, contoh di atas menunjukkan bagaimana keputusan tipografi tertentu dapat memengaruhi desain. Berikut adalah beberapa pemikiran utama:

  • Jika Anda akan menggunakan banyak bobot, kembangkan sistem yang konsisten dalam tipografi spesifik Anda dan patuhi itu.
  • Untuk isi teks, pilih font dengan gaya miring normal, tebal, dan miring tebal.
  • Jika Anda menginginkan font yang populer, coba padukan dengan font yang kurang umum untuk membuat desainnya menonjol.
  • Buat panduan gaya di awal proyek untuk memastikan penggunaan font yang konsisten di antara anggota tim Anda.
  • Gunakan gaya yang kontras daripada gaya serupa.
  • Jangan gunakan font layar untuk teks isi. Gunakan gaya sebagaimana dimaksud.
  • Jangan takut untuk menggunakan hanya satu gaya keluarga. Anda dapat membuat hierarki dengan bobot dan gaya berbeda dalam kelompok yang sama.
  • Jika logo Anda memungkinkan, buatlah dalam SVG untuk kejelasan dan skalabilitas.

 

Mungkin bermanfaat untuk membaca: