Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Typography
Webdesign

Panduan pemula untuk memadankan fon

by
Length:LongLanguages:
This post is part of a series called A-Z of Web Typography.
Getting the Hang of Hanging Punctuation
Start Using Quotation Marks the “Correct” Way

Malay (Melayu) translation by Muhammad Hasan (you can also view the original English article)

Memasang fon boleh menjadi satu cabaran. Memilih dua atau lebih fon yang berfungsi dengan baik adalah satu perkara - pilih dua orang yang bekerja sama untuk mencapai tujuan tipografi Anda mungkin telah mendapatkan aspirin Mari kita lihat jika kita boleh meringankan sakit kepala. . Panduan ini akan membantu anda memulakan dengan menaip fon untuk web

Nasib baik, tipografi telah berada di sekitar masa lo-oong. Konvensyen dan peraturan tipografi mempunyai banyak peluang untuk membuat anda sendiri dan terdapat banyak sumber untuk membantu anda. Satu-satunya masalah ialah dengan mencari internet anda hanya akan mendapati diri anda berhadapan dengan berjuta-juta pendapat yang bercanggah! Mari kita lihat jika kita boleh memperjelaskan beberapa perkara.

Berikut adalah butir-butir ringkas mengenai apa yang akan dibincangkan dalam panduan ini:

  • Matlamat anda
  • Berapa banyak fon yang harus saya gunakan?
  • Untuk membeli atau tidak membeli?
  • Apakah kandungan kandungan saya?
  • Bagaimana anda mencapai pemasangan yang berjaya?
  • Pemasangan 1: Concord
  • Pasangan 2: Sebaliknya
  • Pemasangan 3: konflik

Matlamat anda

Ingat perkara penting. Apabila anda memilih fon berganda untuk bekerja bersama, sangat penting untuk mengekalkan perpaduan dan kepelbagaian.

Berapa banyak fon yang harus saya gunakan?

Berapa banyak fon yang dibuang ke dalam campuran sepenuhnya kepada anda, tetapi ingat kesan keseluruhan yang anda cuba capai. Fon, seperti orang, mempunyai keperibadian. Dan fon kepribadian, seperti orang, kadang-kadang boleh bertempur. Fikirkan fon anda sebagai meja tetamu pada resepsi perkahwinan; satu penghibur biasanya cukup kerana terlalu banyak keperibadian yang kuat dapat membuat suasana janggal, seperti episod Big Brother.

Pastikan terdapat karisma dalam kumpulan sekalipun; lapan orang dengan sedikit untuk mengatakan hanya menyebabkan jari kaki untuk menunggu ucapan ...

Ini tidak lagi sekitar, tapi tapak pembungkusan gabungan iklan 2011 di dalam fikiran saya sebagai contoh keberhasilan penggunaan ketinggian stack-em- high font.

Tiada peraturan untuk mengatakan bahawa anda mesti atau tidak boleh menggunakan sejumlah font pada susun atur halaman. Menggunakan pelbagai fon bersama-sama boleh menjadi sukar, mencapai keharmonian yang mencabar, tetapi jika anda menguruskan hasilnya, ia boleh menjadi hiasan dan menarik. Gunakan fon yang lebih sedikit dan tugas anda lebih lurus ke hadapan. Cuba buat yang terbaik dari kedua dunia dengan memilih fon dengan beberapa varian dan beban. Dengan cara ini, anda boleh mengambil kesempatan daripada pelbagai gaya, selamat dalam pengetahuan bahawa mereka akan memuji satu sama lain sahaja.

Untuk membeli atau tidak membeli?

Terdapat banyak perkhidmatan percuma di mana anda boleh mengambil kesempatan daripada @ font-face: font google, fonts.com, penjana kit fontsquirrel, tetapi tidak segera diskaun membayar untuk fon jika projek Waran itu. Kos lesen domain boleh berubah-ubah, tetapi terdapat beberapa kelebihan untuk membanteras. Kos lesen domain tunggal boleh berbeza-beza, tetapi terdapat beberapa kelebihan untuk membebaskan diri.

Kualiti. Penjagaan dan perhatian yang masuk ke dalam pengeluaran komersil fon ini biasanya terbukti berkualiti. Itu bukan untuk merancang pereka di sebalik fon monkey sangkar percuma, jauh dari itu, tetapi sering terdapat perbezaan kualitatif. Perbezaan yang dilihat dalam butiran lebih halus; garis ketebalan, bentuk, ruang putih dan kerning (jarak antara aksara).

Bandingkan kedua fon ...

Pasir pasir dan Museo Sans

Sorotan dijalankan dengan Museo yang unggul. Tanpa pertunjukan yang mengagumkan, sorotan dalam pantas tidak sempurna (memberi tumpuan kepada 'o' dan 'i' sebagai contoh), dan bermain dengan sorotan di web tidak begitu intuitif. Terdapat alat, kern.js misalnya, yang membolehkan anda menentukan sorotan pada asas per aksara, tetapi teks tubuh yang besar menjadikannya tidak praktikal.

"Masalah besar, perbezaannya hampir tidak dapat dilihat!" Anda mungkin berkata, tetapi Setan dalam butirannya. Jadi saya adalah kawan saya Nan.

Keaslian. Keuntungan lain adalah peluang untuk menonjolkan kerja asal. Setelah membayar font anda, ada kemungkinan besar reka bentuk anda akan mengekalkan unsur keunikan.

Komuniti. Meletakkan tangan anda di dalam poket anda juga merupakan satu cara untuk menggalakkan pertumbuhan industri. Peleburan bergantung pada perdagangan yang sihat dan meneruskan kerajinan mereka. Dalam setiap kes, kita melihat kos yang boleh diambil kira dalam projek dan dikemukakan kepada pelanggan.

Pasaran Envato menawarkan lebih daripada 1,500 fon premium untuk digunakan dalam projek anda, jadi jangan ragu untuk melihat dan melihat apa yang ada.

Fonts on Envato Market
Fon pada pasaran Envato

Apakah kandungan kandungan saya?

Apabila memilih font, sangat penting untuk mempertimbangkan sifat susun atur yang anda hadapi. Adakah kita bercakap terutamanya mengenai salinan badan? Terdapat beberapa judul, sub-tajuk? Mungkin ia susun atur majalah dengan geladak, blok sekatan? Apabila menggunakan pelbagai fon memastikan bahawa peranannya jelas ditakrifkan; jika satu font digunakan sebagai sarikata, jangan beralih kepada font lain untuk sarikata di tempat lain. Pastikan matlamat fon jelas.

Buat masa ini, kami akan memastikan perkara lurus ke depan dan pilih beberapa pasang fon. Kami akan mempertimbangkan keadaan di mana mereka akan bekerja dengan baik bersama-sama, dan bertanya kepada diri sendiri mengapa.

Bagaimana anda mencapai pemasangan yang berjaya?

Anda mungkin pernah mendengar ini; pemasangan berjaya bergantung pada konsensus, atau kontras, tetapi tidak bercanggah. Ini bermakna fon yang anda pilih boleh berfungsi dengan baik dengan berkongsi kualiti tertentu, atau sama sekali berbeza antara satu sama lain. Walau bagaimanapun, pasang fon boleh bertentangan dengan beberapa cara - yang juga hanya satu.

Mari kita periksa setiap kejayaan yang mungkin.

Pemasangan 1: Concord

Menggambarkan dua fon yang mempunyai kesesuaian menunjukkan kehadiran sifat yang sama di kedua-duanya. Mungkin mereka menyoroti perkara yang sama, perkadaran mereka, mereka topi yang tinggi. Lihat contoh-contoh ini dari Kerry Scott Jenkins dan anda akan melihat persamaan yang jelas dapat dibandingkan.

Salah satu cara untuk mencapai kesesuaian antara fon adalah untuk pasangan dua dari keluarga yang sama. Sekiranya mereka adalah Keluarga, mereka pasti dapat meneruskannya dengan baik, bukan? Dalam setiap kes, keluarga Droid, yang direka oleh Steve Matteson untuk digunakan pada peranti Android Google, terdiri daripada pelbagai beban dan gaya, dengan wajah serif dan sans-serif. Mungkin sedikit UN yang imajinatif, tetapi kedua-duanya bekerja dengan baik. Satu atau yang lain mengambil alih tajuk, yang lain dalam tubuh teks.

Droid Serif dan Droid Sans

Sama ada cara pusingan adalah gabungan hebat.

Droid Sans dan Droid Serif

Mereka bersih dan moden, ditambah (seperti yang anda harapkan) mereka sesuai untuk web dan peranti yang lebih kecil kerana ketinggian besar mereka.

Fon ketinggian X menerangkan ketinggian asas bagi huruf besar hulu, seperti x. Ketinggian X berkadar besar membantu dengan mudah dibaca. Dan bahagian kedua kedua yang berkualiti.

Begitu juga, fon dari pereka yang sama sering berkongsi sifat yang membantu mereka mencapai keharmonian. Lihatlah bahagian yang mengejutkan sama seperti rupa fon kedua ini (menyemak 'o').

Cowboyslang dan Supria Sans tebal oleh Hannes von Döhren

Memberi perhatian kepada kualiti dua garis tipografi. Mereka mungkin pada awalnya tidak mempunyai apa-apa yang sama, tetapi dua fon yang disempurnakan dapat berfungsi lebih baik daripada yang anda fikirkan:

Bevan dan Arapey Italic

Garis lembut bersama-sama hanya boleh berkesan:

Anodyne dan Poulaire

Pasangan 2: Sebaliknya

Perbezaan antara fon sering meminjamkan kombinasi yang menang, tetapi dalam cara bagaimana fon boleh dikontraskan? Berikut adalah beberapa ciri yang perlu dicari:

  • Gaya: Lihat laman sumber fon dan anda akan melihat mereka dikategorikan sebagai Blackletter, Monospace, Skrip, slaid Serif dll. Font gaya berbeza akan sering berbeza.
  • Saiz: Fon besar, fon kecil. Jangan lagi.
  • Berat: Berat font berbeza adalah cara biasa untuk membentuk hierarki visual. Hierarki dicapai dengan kontras.
  • Bentuk: Pertimbangkan perkadaran huruf. Adalah panjang relatif keturunan, kelengkungan bahu, arah pergerakan.
  • Warna: Ini bukan sesuatu yang akan kami masukkan ke sini, tetapi warna dapat menentukan sama ada dua fon berfungsi dengan baik.

Paling mudah, pertimbangkan perbezaan antara fon serif dan sans-serif.

ni adalah kaedah pemasangan klasik; mengambil serif hiasan untuk tajuk dan sans-serif kaki yang pasti untuk badan. Atau benar-benar sans-serif untuk tajuk, dengan keseronokan serif untuk dibaca untuk badan. Pemenang dalam banyak kes. Mari lihat beberapa, menendang dengan dua sistem fon. Betul, walaupun mereka boleh bekerja dengan baik bersama-sama.

Georgia dan Arial

Di mana anda dapat melihat kedua-dua tindakan? Kami melihat kerangka boilerplate. Dilucutkan dari semua gaya yang berlebihan, Georgia dan Arial bekerja dengan sempurna dalam persekitaran ini.

Untuk sedikit peningkatan.

PT Serif dan PT Sans

angan lupa peranan teks yang anda pilih untuk font. Dalam kes di atas, kami telah menunjukkan hierarki melalui saiz fon; tajuknya lebih besar daripada tubuh teks. Ada cara lain untuk menentukan siapa bos, yang berat adalah jelas.

Brave Lora dan Istok Web

Katakan kita tidak peduli pada susun atur halaman teks sepenuhnya. Mungkin kita berurusan dengan dua tajuk dan tidak ada lagi (Contohnya di bawah mesej Pembinaan, contohnya). Kita dapat menjadi lebih berani kerana kita tidak perlu mengambil kira langkah panjang atau teks tubuh yang besar. Bagaimana mencetuskan h1, ditambah dengan h2 mengukuhkan?

Font tebal sentiasa berfungsi dengan baik untuk mendapatkan perhatian anda, kerana ia memerlukan banyak hartanah menegak.

Percuma Neue dan Alex berus

Berikut adalah contoh kombinasi yang sama yang berfungsi dengan baik:

Kerja-kerja Unik Gerren Lamson dan Simon Walker

Dan bagi anda yang berminat, inilah butiran mengenai apa yang mereka tipografi:

Dan sekali lagi, kualiti benar-benar berbeza, tetapi hierarki yang jelas melalui warna yang menghalang kedua-duanya daripada melangkah pada jari lain ...

Atau bagaimana dengan dua sahabat sans-serif bermain? Judul utama seterusnya (penakluk) adalah font inline yang direka bentuk secara jelas untuk pensijilan. Dengan itu menjadi font huruf besar, anda mungkin perlu mengembangkan Spacing sedikit, seperti yang dilakukan dalam contoh di bawah.

Inline menggambarkan huruf dengan garis putih yang muncul dalam watak strok. -fonts.com

Malangnya, ini tidak tersedia sebagai fon web (lagi) sehingga anda perlu membuat sambungan dengannya untuk reka bentuk piksel semasa. Sudah pasti salah satu fon kegemaran saya pada masa ini.

AW Conqueror Inline dan Gudea

Ambil pinggan serif ini; usaha yang minimum, impak maksimum.

Alpha Slab satu dan Mako

Plat serif membuat perhatian tangan sangat berkesan, tetapi boleh sedikit memaksa jika anda tidak berhati-hati. Bull di kedai Cina jenis perkara. Contoh di atas berfungsi dengan sangat baik dengan rakan kongsi yang lebih halus, kerana ini berbeza sementara turut berkongsi beberapa sifat keperibadian. Mereka kelihatan seperti fon yang sangat berbeza, tetapi jika anda menyemak lengkung, anda akan melihatnya tidak berbeza kerana anda akan berfikir dahulu.

Sesetengah fon hanya begitu lazat sehingga anda hampir tidak boleh gagal. Sesetengah fon sangat lazat sehingga anda tidak boleh gagal.  Ia akan kelihatan hebat tidak kira apa yang anda sepadan dengan (selagi anda tidak mencuba untuk mencuri guntur!) Di sini kita telah dipasangkan dengan Georgia:

Buttermilk dan Georgia

Dan dengan Aller, kedua-dua sans-serif licin:

Buttermilk dan Aller

Jadi ini akan menjadi contoh saya pasangan dengan keperibadian peribadi - terlalu kuat dengan sendirinya. Tetapi adakah anda tahu apa? Saya boleh hidup dengan ini, ia sebenarnya cukup bagus! Saya rasa kadang-kadang anda tidak tahu ...

Buttermilk dan eksentrik

Pemasangan 3: konflik

Mari kita tidak fokus terlalu banyak pada apa yang tidak berfungsi dengan baik, kita tidak mahu kombinasi asidik menjadi menarik sepanjang panduan kami? Yang berkata, mari kita huraikan bagaimana dua fon, yang boleh dikatakan terlalu serupa, boleh kelihatan janggal bersama-sama.

Almendra dan lit.

Tetapi kenapa mereka tidak bekerjasama dengan baik? Saya fikir idea itu berbeza sementara memastikan unsur perpaduan?

Mereka berada dalam gaya yang berbeza; salah satunya adalah Blackletter, satu lagi serif Rom, periksa.

Mereka mempunyai perkadaran yang berbeza; yang tebal dengan ketinggian x yang agak besar, yang lain lebih banyak diperluas dengan ascenders yang lebih tinggi, semak.

Tetapi mereka berkongsi berat dan saiz, dan kedua-duanya berkongsi tompok orang pelik pada akhir setiap watak.

Di sinilah masalahnya. Dengan berkongsi tiga butiran terakhir (berat, saiz dan hiasan), mereka telah menjadi sama. Mereka melakukan peranan yang sangat serupa, tetapi konflik perbezaan kecil yang membuat kesan keseluruhan menjadi janggal.

Sebagai contoh, kelengkungan spurs benar-benar bertentangan dengan satu sama lain:

Paksi mereka hanya 'mati':

Dan cara bentuk Blackletter memberikan sedikit arahan, bertentangan dengan sifat menegak Rom:

Perbezaan ini mungkin tidak menjadi masalah dalam contoh lain, tetapi di sini kita mempunyai dua fon (Gambaran Keseluruhan) yang kelihatan sama. Ini agak seperti apabila anda melihat seorang selebriti berdiri di sebelah model lilin mereka di Madame Toussauds. I a tidak selesa untuk dilihat.

Sukar untuk menamakan 'kerja' atau 'tidak berfungsi' kepada fakta, biasanya ini akan menjadi perasaan yang anda dapat, anda akan tahu. Setelah anda menyimpulkan bahawa anda tidak suka pasangan font, cuba cari tahu mengapa dan akan membantu anda membuat keputusan lebih cepat di masa depan.

Satu tip terakhir

Hari ini, jika anda mengetuai ke direktori Google Web Font, anda akan mendapati pasangan cadangan untuk setiap font. Rapi. Kemas.

Kesimpulannya

Saya harap pendekatan anda untuk memfailkan fon telah dipermudahkan oleh panduan pemula. Sekiranya terdapat satu peraturan penting yang perlu diambil dari "anda tidak akan tahu sehingga anda cuba!"

Menjadi pengembaraan. Sebagai pereka web kami mempunyai repositori untuk mengembangkan fon sedia untuk digunakan dalam reka bentuk kami. Pertimbangkan asas-asas, kemudian percubaan. Tidak syak lagi anda akan terkejut dengan apa yang anda dapati.

Jika anda menginginkan sesuatu yang benar-benar unik untuk tipografi laman web anda, cuba dapatkan salah seorang pakar Envato Studio untuk membuat font khusus untuk anda.

Lettering providers on Envato Studio

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.