Sebuah panduan pemula untuk memasangkan font

Pemasangan font bisa menjadi suatu tantangan. Memilih dua atau lebih font yang bekerja dengan baik adalah satu hal - memilih dua yang bekerja sama untuk mencapai tujuan tipografi Anda mungkin telah Anda meraih aspirin. Mari kita lihat jika kita dapat meringankan sakit kepala. Panduan ini akan membantu Anda memulai dengan font mempasangkan untuk web.

Untungnya, tipografi telah sekitar waktu lo-oong. Konvensi dan aturan tipografi telah memiliki banyak kesempatan untuk membuat sendiri dan ada banyak sumber daya untuk membantu Anda keluar. Satu-satunya masalah adalah bahwa dengan pencarian di internet yang Anda hanya akan menemukan diri Anda dihadapkan dengan jutaan pendapat bertentangan! Mari kita lihat jika kita dapat memperjelas beberapa hal.

Berikut ini adalah rincian cepat dari apa yang kita akan membahas dalam panduan ini:

• Tujuan Anda
• Berapa banyak font yang harus saya gunakan?
• Untuk membeli atau tidak membeli?
• Apakah sifat konten saya?
• Bagaimana cara mencapai berhasil melakukan pemasangan?
• Pemasangan 1: Concord
• Pasangan 2: kontras
• Pemasangan 3: konflik

Tujuan Anda

Ingatlah hal-hal penting. Ketika Anda memilih beberapa font untuk bekerja sama sangat penting bahwa Anda mempertahankan kesatuan dan berbagai.

Berapa banyak font yang harus saya gunakan?

Berapa banyak font yang Anda melemparkan ke dalam campuran adalah sepenuhnya terserah Anda, tapi ingat efek keseluruhan Anda mencoba untuk mencapai. Font, seperti orang, memiliki kepribadian. Dan font kepribadian, seperti orang-orang, dapat kadang-kadang bentrokan. Pikirkan font Anda sebagai tamu meja di resepsi pernikahan; satu penghibur adalah biasanya cukup karena terlalu banyak kepribadian yang kuat dapat membuat suasana canggung, seperti sebuah episode Big Brother.

Pastikan bahwa ada karisma dalam kelompok meskipun; delapan orang dengan sedikit untuk mengatakan hanya mengakibatkan toe-curling menunggu pidato...

Hal ini tidak lagi di sekitar, tapi situs bungkusan fusi iklan 2011 sicks dalam pikiran saya sebagai contoh penggunaan berhasil tumpukan-em-tinggi font.

Ada tidak ada aturan untuk mengatakan Anda harus atau tidak boleh menggunakan jumlah tertentu font pada tata letak halaman. Menggunakan beberapa font bersama bisa sulit, mencapai harmoni menantang, tetapi jika Anda mengelola hasilnya dapat dekoratif dan mencolok. Menggunakan font yang lebih sedikit dan tugas Anda lebih lurus ke depan. Cobalah untuk membuat yang terbaik dari kedua dunia dengan memilih font dengan beberapa varian dan beban. Dengan cara ini Anda dapat mengambil keuntungan dari berbagai gaya, aman dalam pengetahuan bahwa mereka akan pujian satu sama lain saja.

Untuk membeli atau tidak membeli?

Ada banyak layanan gratis melalui mana Anda dapat mengambil keuntungan dari @font-face: google font, fonts.com, fontsquirrel's font kit generator, tapi jangan segera diskon membayar untuk font jika proyek Waran itu. Biaya satu domain lisensi dapat bervariasi, tetapi ada beberapa keuntungan untuk shelling.

Kualitas. Perawatan dan perhatian yang masuk ke produksi komersial font ini biasanya terbukti dalam kualitas. Itu adalah bukan untuk mencadangkan desainer di belakang font gratis monyet sangkar, jauh dari itu, tetapi sering ada perbedaan secara kualitatif. Perbedaan yang terlihat dalam rincian yang lebih halus; ketebalan garis, bentuk, ruang putih dan kerning (jarak antara karakter).

Bandingkan font serupa ini dua...

Highlight dijalankan dengan Museo unggul. Tanpa beberapa mengutak-atik, highlight dalam pasir isap tidak sempurna (fokus pada ' o ' dan 'i' misalnya), dan bermain-main dengan highlight di web tidak sangat intuitif. Ada alat, kern.js misalnya, yang memungkinkan Anda untuk menentukan highlight pada basis per-karakter, tapi besar tubuh teks membuat ini tidak praktis.

"Masalah besar, perbedaan nyaris tak kentara!" Anda mungkin berkata, tetapi setan dalam rincian. Jadi saya Nan temanku padaku.

Orisinalitas. Keuntungan lain adalah kesempatan untuk berdiri keluar dengan karya asli. Memiliki dibayar font Anda, ada yang lebih besar kesempatan desain Anda akan mempertahankan elemen keunikan.

Komunitas. Meletakkan tangan Anda di saku Anda juga merupakan cara untuk mendorong pertumbuhan industri. Peleburan mengandalkan sehat perdagangan terus kerajinan mereka. Dalam setiap kasus, kita sedang melihat biaya yang dapat diperhitungkan dalam proyek dan diteruskan kepada klien.

Envato pasar menawarkan lebih dari 1.500 premium font untuk digunakan dalam proyek Anda, sehingga merasa bebas untuk melihat-lihat melalui dan melihat apa yang tersedia.

Apakah sifat konten saya?

Ketika memilih font sangat penting untuk mempertimbangkan sifat tata letak yang Anda hadapi. Apakah kita berbicara terutama tubuh salinan? Ada beberapa judul, sub-judul? Mungkin itu adalah majalah layout dengan deck, blockquotes? Ketika menggunakan beberapa font memastikan bahwa peran yang jelas ditetapkan; jika satu font digunakan sebagai sub judul, tidak beralih ke lain font untuk sub judul di tempat lain. Menjaga tujuan font yang jelas.

Untuk saat ini, kami akan menjaga hal-hal yang lurus ke depan dan pilih beberapa pasang font. Kami akan mempertimbangkan keadaan di mana mereka akan bekerja sama dengan baik, dan bertanya pada diri sendiri mengapa.

Bagaimana cara mencapai berhasil melakukan pemasangan?

Anda mungkin telah mendengar ini; pemasangan berhasil mengandalkan concord, atau kontras, tapi tidak konflik. Artinya font dipilih Anda dapat bekerja sama dengan baik dengan berbagi kualitas tertentu, atau menjadi sama sekali berbeda dari satu sama lain. Namun, font pasang dapat konflik dalam sejumlah cara - yang juga serupa yang hanya satu.

Mari kita periksa setiap kemungkinan sukses.

Pemasangan 1: Concord

Menggambarkan dua font memiliki kesesuaian menunjukkan kehadiran sifat sama di keduanya. Mungkin mereka highlight serupa, proporsi mereka, mereka topi tinggi. Lihat contoh-contoh ini dari Kerry Scott Jenkins dan Anda akan melihat kesamaan yang jelas sebanding.

Salah satu cara untuk mencapai Konkordans antara font adalah untuk pasangan dua dari keluarga yang sama. Jika mereka Keluarga, mereka pasti untuk mendapatkan pada sumur, kanan? Dalam setiap kasus, keluarga Droid, dirancang oleh Steve Matteson untuk digunakan pada Google Android perangkat, terdiri dari berbagai beban dan gaya, dengan wajah serif dan sans-serif. Mungkin sedikit PBB imajinatif, tetapi kedua bekerja sangat baik bersama-sama. Satu atau yang lain mengambil alih judul, yang lain dalam tubuh teks.

Either way bulat adalah kombinasi yang hebat.

They're bersih dan modern, ditambah (seperti yang Anda harapkan) mereka adalah cocok untuk web dan perangkat yang lebih kecil karena x-height besar mereka.

X-height font menjelaskan ketinggian dari garis dasar untuk hulu karakter huruf, seperti x. X-height proporsional besar membantu dengan mudah dibaca. Dan kedua kedua berbagi bahwa kualitas.

Sama, font dari designer yang sama sering berbagi kualitas yang membantu mereka mencapai keselarasan. Lihatlah proporsi mengejutkan serupa tampilan font ini dua (memeriksa ' o ').

Memperhatikan kualitas garis dua tipografi. Mereka mungkin pada awalnya tampak tidak ada kesamaan, tapi dua font crisply dieksekusi dapat bekerja lebih baik bersama-sama daripada yang Anda pikir:

Garis-garis lembut bersama-sama dapat hanya sebagai efektif:

Pasangan 2: kontras

Kontras antara font sering meminjamkan kombinasi pemenang, tapi dengan cara apa bisa font kontras? Berikut adalah hanya beberapa kualitas untuk mencari:

• Gaya: Lihatlah situs sumber daya font dan Anda akan melihat mereka dikategorikan sebagai Blackletter, Monospace, Script, lempengan Serif dll. Font yang berbeda gaya akan sering kontras.
• Ukuran: Besar font, font kecil. Mengatakan tidak lebih.
• Berat: Bervariasi berat font adalah cara yang umum untuk membentuk hirarki visual. Hirarki dicapai dengan kontras.
• Bentuk: Mempertimbangkan proporsi huruf. Apakah panjang relatif descenders, kelengkungan bahu, arah gerakan.
• Warna: Bukan sesuatu kita akan masuk ke sini, tapi warna dapat dengan mudah menentukan apakah dua font bekerja sama dengan baik.

Pada yang paling sederhana, mempertimbangkan kontras antara serif dan sans-serif font.

Ini adalah cara klasik pemasangan; mengambil serif dekoratif untuk judul dan yakin-footed sans-serif bagi tubuh. Atau sungguh-sungguh sans-serif untuk judul, dengan serif menyenangkan dibaca bagi tubuh. Pemenang dalam banyak kasus. Mari kita lihat beberapa, menendang dengan dua sistem font. That's right, bahkan mereka dapat bekerja sama dengan baik.

Dimana Anda bisa melihat kedua dalam tindakan? Kita lihat di boilerplate kerangka. Dilucuti semua styling yang berlebihan, Georgia dan Arial bekerja sempurna dalam lingkungan ini.

Untuk sedikit lebih perbaikan.

Jangan lupa peran teks apa pun Anda memilih font untuk. Dalam kasus di atas, kami telah menunjukkan hirarki melalui ukuran font; judul lebih besar dari tubuh teks. Ada cara lain untuk mendirikan siapa yang bos, berat yang jelas satu.

Mari kita mengatakan kita tidak peduli dengan tata letak halaman sepenuhnya tekstual. Mungkin kita berhadapan dengan dua judul dan tidak ada yang lebih (Under Construction pesan, misalnya). Kami mampu untuk menjadi sedikit lebih berani seperti kita tidak perlu account untuk langkah-langkah panjang atau besar tubuh teks. Bagaimana mencolok h1, ditambah dengan h2 memperkuat?

Kental font selalu bekerja dengan baik untuk mendapatkan perhatian Anda, karena mengambil banyak vertikal real estat.

Berikut adalah contoh dari kombinasi yang sama bekerja dengan sangat baik:

Dan bagi Anda tertarik, di sini adalah rincian dari apa yang mereka tipografi:

• Naskah: Scriptorama Tradeshow JF
• Body copy: aktor (Google Web font)
• Judul: Custom tipografi oleh Simon Walker

Dan lagi, benar-benar kontras kualitas, namun hirarki yang jelas melalui warna yang mencegah baik dari menginjak jari-jari yang lain...

Atau bagaimana tentang dua lurus-bermain sans-serif teman? Judul utama berikutnya (penakluk) adalah font inline yang dirancang secara tegas untuk sertifikasi. Dengan itu menjadi font huruf besar, Anda mungkin perlu untuk memperluas Surat-penjarangan sedikit, seperti yang dilakukan dalam contoh di bawah ini.

Inline menggambarkan huruf dengan garis-garis putih yang muncul dalam karakter stroke. -fonts.com

Sayangnya, hal tersebut tidak tersedia sebagai web font (belum) sehingga Anda akan harus membuat hubungannya dengan itu untuk pixel desain saat ini. It's definitely salah satu font favorit saya saat ini.

Ambil font serif lempengan ini; usaha minimal, dampak maksimum.

Lempengan serif membuat tangan-tangan sangat efektif perhatian, tetapi dapat menjadi sedikit memaksa jika Anda tidak hati-hati. Banteng di toko Cina semacam hal. Contoh di atas bekerja benar-benar sangat baik dengan mitra yang lebih halus, karena ini kontras sementara juga berbagi beberapa ciri-ciri kepribadian. Mereka muncul untuk menjadi font yang sangat berbeda, tetapi jika Anda memeriksa kurva, Anda akan melihat mereka tidak berbeda karena Anda pertama akan berpikir.

Beberapa font begitu lezat yang Anda hampir tidak bisa gagal. Ambil Buttermilk misalnya; mewah, rumit dan dekoratif. Ini akan terlihat besar apa pun yang Anda memasangkannya dengan (selama Anda tidak mencoba untuk mencuri thunder nya!) Di sini kita memiliki memasangkan dengan Georgia:

Dan dengan Aller, sama-sama halus sans-serif:

Maka ini akan menjadi contoh saya pasangan itu dengan kepribadian ketidakcocokan - terlalu kuat dalam dirinya sendiri. Tapi kau tahu apa? Aku bisa hidup dengan ini, itu sebenarnya cukup bagus! Saya kira kadang-kadang Anda tidak pernah tahu...

Pemasangan 3: konflik

Mari tidak berfokus terlalu banyak pada apa yang tidak bekerja baik, kita tidak ingin asam kombinasi menggembirakan di seluruh panduan ini kita? Yang mengatakan, mari kita hanya menggambarkan bagaimana dua font, yang bisa dibilang terlalu sama, dapat terlihat canggung bersama-sama.

Tapi mengapa mereka tidak bekerja sama dengan baik? Saya pikir ide adalah kontras sementara memastikan elemen kesatuan?

Mereka sedang gaya yang berbeda; salah satunya adalah Blackletter, serif lain Romawi, periksa.

Mereka memiliki proporsi yang berbeda; salah satu yang kental dengan x-height relatif besar, yang lain lebih diperluas dengan lebih tinggi ascenders, periksa.

Namun mereka berbagi berat badan dan ukuran, dan keduanya berbagi taji orang aneh pada akhir masing-masing karakter.

Di sinilah letak masalahnya. Dengan berbagi rincian tiga terakhir (berat, ukuran dan dekorasi), mereka telah menjadi terlalu sama. Mereka melakukan peran yang sangat mirip, tetapi perbedaan-perbedaan kecil bertentangan yang membuat efek keseluruhan canggung.

Pelekukan yang taji, misalnya, adalah benar-benar bertentangan satu sama lain:

Sumbu mereka hanya 'off':

Dan cara Blackletter yang membentuk memberikan arah yang sedikit, bertentangan dengan sifat vertikal Romawi:.

Perbedaan ini mungkin tidak menjadi masalah dalam contoh lain, tetapi di sini kita memiliki dua font yang (Sekilas) tampak sama. Hal ini agak seperti ketika Anda melihat seorang selebriti yang berdiri di samping model lilin mereka di Madame Toussauds. Itu tidak pernah nyaman untuk melihat.

Sulit untuk atribut 'bekerja' atau 'tidak bekerja' untuk fakta, biasanya ini akan menjadi perasaan yang Anda dapatkan, Anda akan tahu. Setelah Anda telah menyimpulkan bahwa Anda tidak suka pasangan font, mencoba untuk mencari tahu mengapa dan akan membantu Anda membuat keputusan lebih cepat di masa depan.

Salah satu Tip terakhir

Hari ini, jika Anda kepala di atas ke Google Web Font direktori, Anda akan menemukan pasangan saran untuk setiap font. Rapi.

Kesimpulan

Saya berharap pendekatan Anda untuk memasangkan font telah disederhanakan oleh pemula panduan. Jika ada satu aturan penting yang harus Anda ambil dari ini 's "Anda tidak akan tahu sampai Anda mencoba!"

Menjadi petualangan. Sebagai web designer kami memiliki sebuah repositori berkembangnya font yang tersedia untuk digunakan dalam desain kami. Mempertimbangkan dasar-dasar, maka percobaan. Tidak diragukan lagi Anda akan terkejut dengan apa yang Anda temukan.

Jika Anda ingin sesuatu yang benar-benar unik untuk tipografi situs web Anda, coba mendapatkan salah satu ahli Envato Studio untuk membuat jenis huruf yang kustom untuk Anda.