# CSS matn stillari (font, size, align)

> CSS tipografiyasini o'rganing: font-family, font-size, font-weight, line-height, letter-spacing, text-align, decoration va o'qish kengligi.

Manba: https://learncode.uz/html-css/matn-stillari/
Sana: 2026-05-21

Sahifaning katta qismi matndan iborat.
[Sarlavha va paragraflarni](https://learncode.uz/html-css/sarlavha-paragraf) 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:

```css
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:

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

## O'lcham va qalinlik

```css
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:

```css
.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

```html
<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>
```

```css
.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; }
```

## 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.

```css
h1 { text-align: center; }
```

Qo'shimcha xususiyatlar:

```css
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.

> **Havola belgisini yo'qotmang**
>
> `text-decoration: none` bilan barcha underline'ni olib tashlasangiz, havola
> oddiy matndan farqlanmay qolishi mumkin. Rangning o'zi yagona signal bo'lmasin;
> matn ichidagi havolani underline yoki boshqa barqaror belgi bilan ajrating.

## 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:

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

> **Avval body matnini sozlang**
>
> Asosiy shrift, rang va line-heightni global darajada belgilang. Keyin sarlavha,
> lead va kichik metalar uchun aniq iyerarxiya yarating. Ko'p tasodifiy o'lcham
> o'rniga kichik tipografik shkala ishlating.

## 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](https://learncode.uz/html-css/box-model) bilan matn atrofidagi
ichki va tashqi masofalarni boshqaramiz.