Contoh tipografi. Tipografi yang indah dalam desain web. Batasi jumlah gaya font yang diterapkan

Daftar ini berdasarkan hasil triwulan II. 2008. "Grafik" sebelumnya dapat ditemukan dan.

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

Konferensi Benih

Tanpa flash, tanpa gambar, tanpa noise tambahan; 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 lebih banyak contoh seperti ini.

Merancang Berita

Kontras luar biasa antara header dan konten utama, banyak ruang bersih dan organisasi yang baik.

OmniTI

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

Desainer.itu

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

tampilan desain

Andy Rutledge adalah seorang desainer yang menerapkan prinsip yang sama dengan yang ia promosikan. Saya suka bagaimana ukurannya berubah tergantung pada tanggal publikasi artikel, sehingga teks terbaru sesuai dengan ukuran 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 sebanyak mungkin aplikasi online dan offline terlihat sama bagusnya.

Tipe Kami

Saya sebenarnya tidak ingin memasukkan situs ini ke dalam review karena menggunakan flash. Namun, ada beberapa font yang bagus di dalamnya (dan beberapa favorit saya, saya harus menambahkan).

Dek

Situs lain yang hanya didasarkan pada font saja. Contoh bagus tentang hierarki dan markup. Siapa bilang "sebuah gambar mengungkapkan lebih dari seribu kata"? Tidak, fontnya berbicara lebih baik.

Ya, Bung

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

Arsitek Informasi

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

Naz Hamid

Bagus sekali. Desain yang berbicara sendiri.

John Tan

Tipografinya kaya, elegan, dan rapi, ditambah logo... ini bukan gambar!

Dalam pertimbangan

Banyak informasi yang tertata rapi, dan disertai dengan palet warna yang serasi.

Saham Elliot Jay

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

Hal-Hal yang Kami Buat

Font berwarna-warni, terorganisir, dan besar.

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

Situs web yang bagus dimulai dengan tipografi yang indah. Meskipun ada beberapa aturan yang bisa dilanggar, terkadang ada baiknya kita kembali ke prinsip dasar tentang tipografi yang baik dan cara membuatnya.

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

Jadi hari ini, kita akan mengabaikan tren fesyen, 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 penentu. Teks kecil sulit dilihat apalagi dibaca, namun terlalu besar akan melebihi tinggi garis dan menimbulkan kebingungan.

Tipografi yang dapat dibaca memiliki beberapa 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 perubahan selektif dalam jarak antar huruf tergantung pada bentuknya. Pelacakan adalah perubahan 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 sebagian besar teks. Pelacakan sering digunakan untuk mempersempit isi teks yang terlalu lebar.

Batasi jumlah gaya font yang diterapkan

Untuk sebagian besar proyek, dua atau tiga gaya sudah cukup. Agar tidak salah dalam memilih, carilah keluarga font dengan variasi wajah yang tersedia banyak. Font kualitas terbaik hadir dalam berbagai gaya – tebal, reguler, miring, kental, hitam, dll.

Padu padankan gaya

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

Detail kecil ini akan membuat perbedaan besar dalam tampilan font-font ini dan keterbacaan teks.

Transfer dan pembenaran

Dalam kebanyakan kasus, jeda baris dan pembenaran tidak diperlukan. Dalam kasus teks online, teknik ini hanya mempersulit penyerapan dan pemahaman cepat. Tanda hubung mengganggu pembacaan, dan pembenaran yang lengkap sering kali mengakibatkan 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 jenis huruf menghabiskan banyak waktu untuk memastikan jenis huruf dapat dibaca dan memenuhi persyaratan gaya. Anda tidak perlu mengubah apa pun. Anda tidak dapat memperbaikinya, dan dalam banyak kasus Anda hanya akan merusak segalanya.

Jika fontnya tidak cocok untuk Anda, carilah yang lain. Gunakan alat font serupa Identfont, alat yang mendeteksi font serupa.

Kontras

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

Warna adalah salah satu cara paling efektif dan termudah untuk menciptakan kontras. Kontras yang ideal adalah teks gelap dengan latar belakang terang (atau sebaliknya). Anda memiliki rentang 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 dan biru cerah, bisa jadi cukup sulit dibaca.

Dalam hal kontras, yang terbaik adalah menggunakan latar belakang sederhana untuk membuat teks yang mudah dibaca. 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 bilah panggilan

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

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

Dari The Elements of Typographic Style: "Sejumlah karakter, antara 45 dan 75, dianggap sebagai panjang garis yang masuk akal untuk satu set kolom. String 66 karakter (termasuk huruf dan spasi) dianggap ideal. Untuk kumpulan multi-kolom, string sepanjang 40-50 karakter akan ideal."

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

Terjemahan artikel oleh Carrie Cousins

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

Dipadukan dengan tekstur kertas yang tipis, tipografi ini membuat Anda serasa 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 nama mereknya, menjaga konsistensi identitas di saluran online dan offline.

Situs ini adalah contoh bagus tentang bagaimana terkadang hanya satu gaya yang Anda perlukan. Menggunakan bobot dan judul huruf besar Gotham yang bervariasi, Simply Gum membuat hierarki yang jelas hanya dengan satu bobot.

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

Kesimpulan singkat

Untungnya, contoh di atas telah menunjukkan bagaimana keputusan tipografi tertentu dapat memengaruhi sebuah desain. Berikut beberapa pemikiran penting untuk Anda:

• 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 gaya yang populer, coba padukan dengan gaya yang tidak terlalu ketinggalan jaman untuk membuat desain Anda menonjol.
• Buatlah panduan gaya di awal proyek untuk memastikan penggunaan font yang konsisten di antara anggota tim Anda.
• Gunakan gaya yang kontras, bukan gaya serupa.
• Jangan gunakan font layar untuk teks isi. Gunakan font sebagaimana mestinya.
• Jangan takut untuk menggunakan hanya satu gaya keluarga. Anda dapat membuat hierarki dengan bobot dan gaya berbeda dari keluarga yang sama.
• Jika logo Anda mengizinkannya, buatlah dalam SVG untuk keterbacaan dan skalabilitas.