CSS matn stillari (font, size, align)

Sahifaning katta qismi matndan iborat. Sarlavha va paragraflarni HTML bilan belgilagan edingiz — endi ularning ko’rinishini boshqaramiz. Yaxshi tipografiya bezakdan oldin o’qish qulayligini hal qiladi: harf yetarli kattalikda, qatorlar orasida nafas, satr esa ko’z yo’qolmaydigan kenglikda bo’lishi kerak.

Shrift oilasi va zaxira

font-family brauzer ishlatadigan shriftlar ketma-ketligini beradi:

body {
  font-family: Inter, Arial, sans-serif;
}

Brauzer birinchi mavjud shriftni tanlaydi. Oxiridagi sans-serif, serif yoki monospace umumiy oila sifatida zaxira beradi. Tizim shriftlari tashqi fayl yuklamaydi va sahifani tez ko’rsatadi:

font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

O’lcham va qalinlik

h1 {
  font-size: 2rem;
  font-weight: 750;
}

p {
  font-size: 1rem;
  font-weight: 400;
}

1rem odatda hujjat ildizining shrift o’lchamiga teng. Foydalanuvchi brauzer sozlamasini kattalashtirsa, rem asosidagi o’lchamlar unga moslashadi. px ham foydali, lekin asosiy matnni mutlaq kichik o’lchamga qamab qo’ymang.

font-weight normal, bold yoki 100–900 orasidagi son bo’lishi mumkin. Shrift fayli barcha og’irlikni qo’llamasligi mumkin; mavjud variantlarni tekshiring.

Line-height va o’qish kengligi

line-height satrlar orasidagi vertikal masofani boshqaradi:

.article {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.75;
}

Birliksiz 1.75 qiymati shrift o’lchamiga ko’paytiriladi va farzand elementlarga mos meros bo’ladi. ch taxminan 0 belgisi kengligiga teng; 60–75ch uzun maqola satri uchun ko’pincha qulay boshlang’ich oraliqdir.

Jonli tipografiya

<article class="article">
<p class="kicker">HTML VA CSS</p>
<h1>O'qishga qulay matn qanday yaratiladi?</h1>
<p class="lead">Tipografiya mazmun iyerarxiyasini ko'rsatadi va ko'zning sahifa bo'ylab harakatini yengillashtiradi.</p>
<h2>Asosiy tamoyil</h2>
<p>Yetarli shrift o'lchami, muvozanatli qator balandligi va cheklangan satr kengligi uzun matnni charchamasdan o'qishga yordam beradi.</p>
<a href="#">Keyingi mavzuni o'qish</a>
</article>

<style>
.article {
max-width: 64ch;
font-family: system-ui, sans-serif;
color: #172033;
}
.kicker {
color: #4338ca;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
}
h1 { font-size: 2rem; line-height: 1.12; }
h2 { margin-top: 1.6em; }
.lead { color: #526078; font-size: 1.1rem; }
p { line-height: 1.7; }
a { color: #3730a3; text-underline-offset: 3px; }
</style>

Tekislash va boshqa xususiyatlar

text-align inline mazmunni start, center, end yoki justify qiladi. Interfeys va uzun maqolalarda start odatda eng o’qiladigan tanlov. left va right o’rniga start/end yozuv yo’nalishiga moslasha oladi.

h1 { text-align: center; }

Qo’shimcha xususiyatlar:

a {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.label {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

letter-spacing ni uzun oddiy matnga katta qiymatda qo’llash o’qishni qiyinlashtiradi. Uppercase kichik yorliqlarda foydali bo’lishi mumkin, lekin uzun gaplarda vizual shovqin yaratadi.

Meros olish

Ko’p matn xususiyatlari ota elementdan meros olinadi. body ga shrift va rang bersangiz, ichki matn odatda shu qiymatlarni oladi. Sarlavha uchun faqat farq qiladigan xususiyatni qayta yozish yetarli:

body {
  font-family: system-ui, sans-serif;
  color: #172033;
}
h1 { font-size: 2.4rem; }

Amaliy mashq

Maqola bloki yarating: kicker, h1, lead, h2, ikki paragraf va havola. Tizim shrifti, 64ch maksimal kenglik, paragraf uchun kamida 1.6 line-height va ko’rinarli underline ishlating. Mobil va desktopda o’qib ko’ring.

Qisqacha xulosa

• font-family zaxira shriftlar ketma-ketligini beradi.
• rem foydalanuvchi asosiy shrift sozlamasiga moslashadi.
• line-height va satr kengligi o’qish ritmini belgilaydi.
• text-align: start uzun matn uchun xavfsiz tanlovdir.
• Matn ichidagi havola rangdan tashqari belgi bilan ham ajraladi.

Keyingi darsda CSS box model bilan matn atrofidagi ichki va tashqi masofalarni boshqaramiz.