Tipografi yang indah dalam desain web. Tipografi yang indah di desain web tipografi yang indah

Kurator sumber daya tentang Typewolf Fonts Jeremy Schoa memilih contoh situs dengan solusi font yang menarik dan menggambarkan kelebihan dan kekurangan mereka.

Dalam kombinasi dengan tekstur kertas tipis, tipografi ini menciptakan perasaan bahwa Anda membaca buku.

Sederhananya permen karet.

Berkat font web, membantu menyesuaikan tipografi pengemasan produk ke situs tipografi pabrikan. Ini lebih sering terjadi dan lebih sering. Situs hanya gusi memilih Gotham dalam menggambar merek-Nya, yang mempertahankan identitas konstan dan pada online, dan pada kanal offline.

Situs ini adalah contoh yang baik tentang bagaimana hanya satu hasil imbang kadang-kadang satu-satunya yang diperlukan. Menggunakan saturasi yang berbeda dari Gotham dan mengatur header dalam huruf besar, cukup gusi memasang hierarki yang jelas dari segala sesuatu dengan satu intensitas.

Logo di header dan footer berdiri dalam format PNG, sehingga mereka kehilangan kejelasan dan skalabilitas font web. Penggunaan font web untuk logo tidak selalu layak, terutama jika Anda membutuhkan kontrol yang baik atas keriting; Namun, gambar dalam SVG akan sesuai dengan kasus ini lebih baik daripada PNG, karena dapat berskala dan pada saat yang sama mempertahankan kejelasannya.

Ringkasan

Untungnya, contoh-contoh di atas diperagakan karena solusi tertentu dalam tipografi dapat memengaruhi desain. Di sini Anda memiliki beberapa pemikiran utama:

Jika Anda akan menggunakan beberapa stroke, maka kembangkan sistem konstan dalam tipografi tertentu dan tempelkan.
Untuk teks utama, pilih font dengan huruf miring normal, prasasti berlemak dan kebugaran bergaya berani.
Jika Anda akan memilih desain yang populer, cobalah untuk menggabungkannya dengan kurang dibawa untuk membuat desain desain.
Buat panduan gaya di awal proyek untuk menjamin penggunaan font di antara anggota tim Anda.
Gunakan kontras, dan tidak mirip dengan desain.
Jangan gunakan font di layar untuk teks utama. Gunakan desain di tujuan.
Jangan takut menggunakan hanya satu tujuh undian. Anda dapat mengatur hierarki dengan bantuan saturasi dan gaya satu keluarga yang berbeda.
Jika logo Anda memungkinkan Anda untuk membuatnya di SVG untuk memberikan definisi dan skalabilitas.

Situs web yang sangat baik dimulai dengan tipografi yang indah. Dan meskipun beberapa aturan dapat dipatahkan, kadang-kadang, akan segera kembali ke prinsip-prinsip dasar dari apa tipografi yang baik, dan bagaimana cara membuatnya.

Pengingat ini akan membantu Anda dengan tampilan baru pada proyek Anda, pikirkan tentang pendekatan baru, atau kembali ke desain yang lebih sederhana.

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

Ukuran dan hierarki

Ukuran diperhitungkan. Untuk membuat tipografi baca-dari konsumsi, itu mungkin merupakan faktor yang menentukan. Teks-teks kecil itu sulit dipertimbangkan, bukan sesuatu untuk dibaca, tetapi terlalu besar, akan melebihi ketinggian garis dan menyebabkan kebingungan.

Tipografi yang dapat dibaca memiliki beberapa lapisan hierarki. Lapisan-lapisan ini menunjukkan kepada pengguna yang perlu dibaca di yang pertama, di posisi kedua, dan di tempat ketiga. Juga, ada hierarki yang jelas dalam ukuran teks - satu ukuran tajuk utama, yang lain, pada teks utama, dan yang ketiga di subtitle.

Pelacakan dan Kerning.

Pelacakan dan kerning sering bingung. Kerning adalah perubahan selektif dalam interval antara huruf tergantung pada formulir mereka. Pelacakan adalah perubahan dalam interval antara set huruf, A., paragraf, atau semua blok teks.

Kerning sering diterapkan pada elemen-elemen tertentu untuk menciptakan kejelasan, peningkatan keterbacaan, dan, bahkan, untuk mengutip teks besar yang stylish. Pelacakan sering digunakan untuk mempersempit terlalu banyak font teks utama.

Batasi jumlah gaya gaya yang diterapkan

Untuk sebagian besar proyek, ada dua atau tiga gaya. Agar tidak membuat kesalahan dalam memilih, temukan keluarga font dengan jumlah besar Variasi gambar yang tersedia. Font berkualitas tinggi memiliki berbagai macam gaya - lemak, biasa, miring, terkondensasi, hitam, dll.

Campur dan bandingkan gaya

Saya sarankan memilih dua gaya yang berbeda. Pasangan yang paling umum adalah serif dan sans serif. Menghubungkan berbagai gaya dan gambar, cari huruf dengan tinggi dan bentuk mangkuk yang sama (ruang di dalam huruf tertutup, seperti "O").

Rincian kecil ini akan secara signifikan mempengaruhi bagaimana font ini akan terlihat bersama, dan pada kenyamanan membaca teks.

Transfer dan Off.

Dalam kebanyakan kasus, transfer string dan tidak membutuhkannya. Dalam kasus teks online, teknik ini hanya mempersulit asimilasi dan pemahaman yang cepat. Transfer mengganggu membaca, dan kekuatan penuh tidak sering menyebabkan pemformatan yang tidak dapat dibaca.

Jangan ubah font

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

Desainer pengembangan font menghabiskan banyak waktu bahwa font ini berkonsultasi, dan memuaskan gaya gaya. Tidak perlu mengubah apa pun. Anda tidak akan dapat memperbaikinya, dan dalam banyak kasus itu hanya akan merusak segalanya.

Jika font tidak cocok untuk Anda, cari sesuatu yang lain. Gunakan alat font serupa identifont, alat yang mendefinisikan font serupa.

Kontras

Gunakan tipografi untuk membuat kontras. Juga, bagaimana cara membuat hierarki Anda menggunakan berbagai ukuran, membuat minat visual dengan mengubah berat, warna, dan gaya font.

Warna adalah salah satu yang paling efisien dan cara sederhana Penciptaan kontras. Kontras sempurna - teks gelap pada latar belakang cahaya (atau sebaliknya). Anda memiliki serangkaian warna yang hampir tidak terbatas yang akan membantu Anda mencapai tujuan ini. Bermain dengan warna dan tipografi, perlu diingat bahwa beberapa kombinasi warna, misalnya, merah cerah pada biru cerah, bisa sangat sulit.

Ketika mencapai kontras, untuk membuat teks yang dapat dibaca dengan tangan menggunakan latar belakang sederhana. Tetapi jika mengandung elemen visual seperti gambar atau pola, maka tingkatkan ukuran huruf - ini akan membuat pemisahan antara latar belakang, dan elemen teks latar depan.

Format strip koleksi

Format pita panggilan adalah ukuran teks kontainer. Ini bisa menjadi lebar seluruh bingkai teks, atau satu-satunya kolom.

Format string itu penting karena jumlah karakter (termasuk spasi, karakter khusus, dan tanda baca) pada layar memengaruhi keterbacaan. Jika baris terlalu panjang atau terlalu pendek, penampilan pengguna akan sulit untuk dipindahkan.

Dari unsur-unsur gaya tipografi: "Sejumlah karakter, mulai dari 45 hingga 75, dianggap sebagai panjang string yang memuaskan untuk set kolom tunggal. String 66 karakter (termasuk huruf dan spasi) dianggap sempurna. Untuk set multikolon, rata-rata ideal akan berupa string, simbol 40-50 yang panjang. "

Bahkan terlepas dari kenyataan bahwa pada saat publikasi buku ini, tidak ada yang memikirkan tipografi seluler, rekomendasi yang berkaitan dengan set multicolon tidak kehilangan relevansinya. Dalam kasus dengan layar kecil, Anda bahkan dapat menggunakan 35 karakter per string.

Terjemahan artikel Carrie Casins

Daftar ini dikompilasi sesuai dengan hasil II. 2008. "Parang tit" sebelumnya dapat ditemukan dan.

Setiap contoh disertai dengan komentar singkat, dan menekan screenshot mengarah ke situs asli.

Konferensi benih

Tidak ada flash, tidak ada gambar, tidak ada suara; Hanya font bergaya dengan baik dan teks yang ditulis dengan baik: bukti nyata bahwa dengan font hanya dapat memperoleh hasil yang bagus. Saya ingin melihat beberapa contoh lebih dari jenis ini.

Merancang berita.

Kontras besar antara judul dan konten utama, banyak ruang murni dan organisasi yang baik.

Omniti.

Logo yang menyenangkan, teks yang jelas dan skema warna yang sangat bagus. Pelajari lebih lanjut tentang pengembangan desain dapat dibaca.

DesignR.it.

Logo superivasi yang luar biasa (apakah ada yang tahu font seperti apa?) Dan banyak bagian yang disempurnakan.

Tampilan desain.

Andy Ratdlezh - seorang desainer yang dalam praktik menerapkan prinsip-prinsip yang sama yang mempromosikan. Saya suka bagaimana dia mengubah ukuran busur tergantung pada tanggal publikasi artikel, sehingga teks paling segar sesuai dengan kehalitas terbesar.

Admin wordpress.org & wp 2.5.x

Meskipun platform blogger WordPress tidak didasarkan pada situs web, tetapi situs web mereka ditampilkan pada ribuan, jika bukan jutaan, layar kami setiap hari. Saya ingin lebih banyak aplikasi online dan offline juga.

Ourtype.

Saya benar-benar tidak ingin memasukkan situs ini dalam ulasan, karena flash digunakan di atasnya. Namun, beberapa font luar biasa disajikan di atasnya (dan beberapa favorit saya harus menambah).

Dek.

Situs lain yang didasarkan pada font dalam segala hal. Contoh hierarki dan penandaan yang sangat baik. Siapa bilang bahwa "foto itu mengatakan lebih dari seribu kata"? Tidak, font mengatakan lebih baik.