Font Pairings

CSS Zo'r Shrift Kombinatsiyalari

Zo'r shrift kombinatsiyalari ajoyib dizaynning asosiy qismidir.

Shrift Kombinatsiyalari Qoidalari

Mana ba'zi asosiy qoidalar, ular orqali ajoyib shrift kombinatsiyalari yaratish mumkin:

1. Bir-birini to'ldirish

Doimiy ravishda bir-birini to'ldiradigan shriftlarni topish xavfsiz yo'ldir.

Ajoyib shrift kombinatsiyasi o'zaro uyg'unlashishi kerak, lekin juda o'xshash yoki juda farqli bo'lmasligi lozim.

2. Shrift Superoilasidan Foydalanish

Shrift superoilasi bu bir-biri bilan yaxshi ishlashi uchun yaratilgan shriftlar to'plamidir. Shuning uchun, superoiladagi turli shriftlarni ishlatish xavfsizdir.

Masalan, Lucida superoilasi quyidagi shriftlarni o'z ichiga oladi: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif va Lucida Math.

3. Kontrast Qoidasi

Juda o'xshash bo'lgan ikkita shrift bir-biri bilan to'qnashishi mumkin. Biroq, to'g'ri qilingan kontrast har bir shriftning eng yaxshi tomonlarini namoyon qiladi.

Masalan: Serif shriftini sans-serif bilan birlashtirish keng tarqalgan kombinatsiya hisoblanadi.

Kuchli superoilalar tarkibiga serif va sans-serif variantlari kiradi (masalan, Lucida va Lucida Sans).

4. Faqat Bitta Boshliq Tanlang

Bitta shrift boshliq bo'lishi kerak. Bu sahifadagi shriftlar uchun iyerarxiya o'rnatadi. Buni shriftning kattaligi, vazni va rangini o'zgartirish orqali amalga oshirish mumkin.

Misol

Hech qanday shubha yo'qki, "Georgia" bu yerda boshliq:

body {
  background-color: black;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: gray;
}
 
h1 {
  font-family: Georgia, serif;
  font-size: 60px;
  color: white;
}

Quyida ba'zi mashhur shrift kombinatsiyalari ko'rsatilgan, ular ko'plab brendlar va kontekstlarga mos keladi.

Georgia va Verdana

Georgia va Verdana klassik kombinatsiya hisoblanadi. Bu veb xavfsiz shrift standartlariga ham mos keladi:

Misol "Georgia" shriftidan sarlavhalar uchun, "Verdana" shriftidan matn uchun foydalaning:

<h1>Chiroyli Norvegiya</h1>
<p>Norvegiya umumiy maydoni 385,252 kvadrat kilometrni tashkil qiladi...</p>

Helvetica va Garamond

Helvetica va Garamond yana bir klassik kombinatsiya bo'lib, u ham veb xavfsiz shriftlarni ishlatadi:

Misol "Helvetica" shriftidan sarlavhalar uchun, "Garamond" shriftidan matn uchun foydalaning:

<h1>Chiroyli Norvegiya</h1>
<p>Norvegiya umumiy maydoni 385,252 kvadrat kilometrni tashkil qiladi...</p>

Mashhur Google Shrift Kombinatsiyalari

Agar HTML standart shriftlaridan foydalanishni istamasangiz, Google Shriftlaridan foydalanishingiz mumkin.

Google Shriftlar bepul va 1000 dan ortiq shriftlarni taklif qiladi.

Quyida ba'zi mashhur Google veb shrift kombinatsiyalari keltirilgan.

Merriweather va Open Sans

Misol "Merriweather" shriftidan sarlavhalar uchun, "Open Sans" shriftidan matn uchun foydalaning:

<h1>Chiroyli Norvegiya</h1>
<p>Norvegiya umumiy maydoni 385,252 kvadrat kilometrni tashkil qiladi...</p>

Ubuntu va Lora

Misol "Ubuntu" shriftidan sarlavhalar uchun, "Lora" shriftidan matn uchun foydalaning:

<h1>Chiroyli Norvegiya</h1>
<p>Norvegiya umumiy maydoni 385,252 kvadrat kilometrni tashkil qiladi...</p>

Abril Fatface va Poppins

Misol "Abril Fatface" shriftidan sarlavhalar uchun, "Poppins" shriftidan matn uchun foydalaning:

<h1>Chiroyli Norvegiya</h1>
<p>Norvegiya umumiy maydoni 385,252 kvadrat kilometrni tashkil qiladi...</p>

Cinzel va Fauna One

Misol "Cinzel" shriftidan sarlavhalar uchun, "Fauna One" shriftidan matn uchun foydalaning:

<h1>Chiroyli Norvegiya</h1>
<p>Norvegiya umumiy maydoni 385,252 kvadrat kilometrni tashkil qiladi...</p>

Fjalla One va Libre Baskerville

Misol "Fjalla One" shriftidan sarlavhalar uchun, "Libre Baskerville" shriftidan matn uchun foydalaning:

<h1>Chiroyli Norvegiya</h1>
<p>Norvegiya umumiy maydoni 385,252 kvadrat kilometrni tashkil qiladi...</p>

Space Mono va Muli

Misol "Space Mono" shriftidan sarlavhalar uchun, "Muli" shriftidan matn uchun foydalaning:

<h1>Chiroyli Norvegiya</h1>
<p>Norvegiya umumiy maydoni 385,252 kvadrat kilometrni tashkil qiladi...</p>

Spectral va Rubik

Misol "Spectral" shriftidan sarlavhalar uchun, "Rubik" shriftidan matn uchun foydalaning:

<h1>Chiroyli Norvegiya</h1>
<p>Norvegiya umumiy maydoni 385,252 kvadrat kilometrni tashkil qiladi...</p>

Oswald va Noto Sans

Misol "Oswald" shriftidan sarlavhalar uchun, "Noto Sans" shriftidan matn uchun foydalaning:

<h1>Chiroyli Norvegiya</h1>
<p>Norvegiya umumiy maydoni 385,252 kvadrat kilometrni tashkil qiladi...</p>

Google Shriftlarining to'liq ro'yxati uchun bizning Google Shriftlar Darsligini ko'rib chiqing.

Ushbu sahifada