Font va Text — family, size, weight, align, decoration

~15 daq · CSS · Box Model va Matn

Muammodan boshlaylik

Veb-sahifadagi ma'lumotning 90% i — matn. Ranglar, animatsiyalar, rasmlar ikkinchi darajali: agar matnni o'qish qiyin bo'lsa, foydalanuvchi ketadi.

Yomon tipografiyaning tipik belgilari: Times New Roman shrifti, qatorlar bir-biriga yopishgan, butun sahifa bo'ylab cho'zilgan 200 belgilik qatorlar, och kulrang fonda och kulrang matn. Bularning hammasi bir necha CSS xususiyati bilan tuzatiladi.

font-family — shrift oilasi

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

code {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

Bu — zaxira ro'yxati (font stack): brauzer chapdan o'ngga qarab, birinchi mavjud shriftni ishlatadi. Oxirida doim umumiy oila turishi kerak:

Umumiy oila	Qanday
`sans-serif`	"Oyoqchasiz" — ekran uchun eng ko'p ishlatiladigan
`serif`	"Oyoqchali" — kitob, gazeta uslubi
`monospace`	Har bir belgi bir xil kenglikda — kod uchun
`system-ui`	Operatsion tizimning o'z shrifti (Windows da Segoe UI, Mac da San Francisco)

Bo'shliqli nomlar — qo'shtirnoqda: 'Segoe UI'.

Veb-shriftlarni ulash

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Yoki o'z serveringizdan:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;     /* o'zgaruvchan shrift — barcha qalinliklar bitta faylda */
  font-display: swap;
}

woff2 — eng yaxshi siqilgan format; boshqasi kerak emas
font-display: swap — shrift yuklanguncha matn zaxira shrift bilan ko'rinadi (bo'sh ekran o'rniga)
Faqat ishlatiladigan qalinliklarni yuklang — har biri qo'shimcha fayl

[!TIP] O'zbek tilidagi matn uchun shriftda o' va g' dagi apostrofni (ʻ yoki ') yaxshi ko'rsatadigan, lotin kengaytirilgan (Latin Extended) to'plamli shrift tanlang. Inter, Roboto, Open Sans, Montserrat — yaxshi ishlaydi.

font-size — o'lcham

html { font-size: 100%; }            /* 16px — foydalanuvchi sozlamasi */
body { font-size: 1rem; }
h1   { font-size: 2.25rem; }          /* 36px */
h2   { font-size: 1.75rem; }          /* 28px */
small, .caption { font-size: 0.875rem; }   /* 14px */

11-darsdan: shriftlar — rem da. Asosiy matn uchun 16px dan kam bo'lmasin — mobil telefonlarda kichikroq matnni o'qish qiyin, va iOS 16px dan kichik shriftli input ga bosilganda sahifani avtomatik kattalashtiradi.

Bir xil nisbatli o'lchamlar shkalasi (masalan, har bir daraja 1.25 baravar katta) dizaynni uyg'un qiladi: 1rem → 1.25 → 1.563 → 1.953 → 2.441.

font-weight — qalinlik

p      { font-weight: 400; }   /* normal */
strong { font-weight: 700; }   /* bold */
.title { font-weight: 600; }   /* semibold */

Qiymat	Nomi
100	Thin
300	Light
400	Regular (`normal`)
500	Medium
600	Semibold
700	Bold (`bold`)
900	Black

Agar shriftning kerakli qalinligi yuklanmagan bo'lsa, brauzer uni "sun'iy" qalinlashtiradi — natija xunuk. Ishlatiladigan har bir qalinlikni yuklang.

font-style: italic — qiya yozuv.

line-height — qator balandligi

O'qiluvchanlik uchun eng muhim xususiyat:

body {
  line-height: 1.6;
}

h1, h2, h3 {
  line-height: 1.2;
}

Asosiy matn: 1.5–1.7
Sarlavhalar: 1.1–1.3 (katta shriftda qatorlar orasi baribir katta ko'rinadi)

[!INFO] line-height ni birliksiz yozing: 1.6, 1.6em yoki 24px emas. Birliksiz qiymat bola elementlarga koeffitsient sifatida meros o'tadi va har birining o'z shriftiga moslashadi. 24px esa bir xil meros o'tadi — kichik shriftli elementda qatorlar juda uzoq, kattasida esa ustma-ust tushib qoladi.

Matnni tekislash va bezash

text-align

.center  { text-align: center; }
.right   { text-align: right; }
article  { text-align: start; }   /* matn yo'nalishiga qarab (chap yoki o'ng) */

justify (ikki chetdan tekislash) ekranda ko'pincha so'zlar orasida "teshiklar" hosil qiladi — vebda kamdan-kam ishlatiladi.

[!INFO] text-align inline kontentni (matn, rasm, inline-block) tekislaydi, blok elementlarni emas. Blokni markazlash — margin: 0 auto (7-dars) yoki Flexbox (13-dars).

text-decoration

a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;     /* chiziq harflardan biroz pastroq */
}

a:hover {
  text-decoration-thickness: 2px;
}

.eski-narx {
  text-decoration: line-through;
}

Matn ichidagi havolalardan tagidagi chiziqni olib tashlamang — rang yolg'iz o'zi havolani ajratish uchun yetarli emas (rangni ajrata olmaydiganlar ko'p). Menyu va tugmalarda esa olib tashlash mumkin.

text-transform va letter-spacing

.label {
  text-transform: uppercase;
  letter-spacing: 0.05em;    /* katta harflar orasiga biroz bo'shliq */
  font-size: 0.75rem;
}

HTML da matnni katta harflar bilan yozmang ("KURSLAR") — text-transform bilan qiling. Ekran o'quvchilar katta harfli matnni harfma-harf o'qishi mumkin, va keyinchalik dizaynni o'zgartirish oson bo'ladi.

Rang va kontrast

body {
  color: #1e293b;          /* toza qora (#000) emas — ko'zni kamroq charchatadi */
  background: #ffffff;
}

.muted {
  color: #64748b;
}

Matn va fon orasidagi kontrast yetarli bo'lishi kerak. WCAG standarti: oddiy matn uchun kamida 4.5:1, katta sarlavhalar uchun 3:1. Och kulrang (#cbd5e1) oq fonda — o'qib bo'lmaydi. DevTools da rang namunasiga bosing — kontrast nisbati ko'rsatiladi.

O'qiladigan maqola — hammasi birga

.article {
  max-width: 65ch;                 /* 11-dars: qulay qator uzunligi */
  margin: 0 auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.125rem;             /* 18px */
  line-height: 1.7;
  color: #1e293b;
}

.article h2 {
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
}

.article p + p {
  margin-top: 1.25em;              /* 4-dars: paragraflar orasidagi bo'shliq */
}

.article a {
  color: #2563eb;
  text-underline-offset: 3px;
}

Nima uchun shunday?

Nima uchun shrift va matn uchun shunchalik ko'p e'tibor — bu shunchaki "chiroy" masalasi emasmi?

Yo'q — bu funksionallik. Tadqiqotlar ko'rsatadiki, qator uzunligi, qator balandligi va kontrast o'qish tezligi va tushunishga bevosita ta'sir qiladi: juda uzun qatorda ko'z keyingi qatorning boshini yo'qotadi, zich qatorlarda ko'z charchaydi, past kontrastda esa ko'zoynak taqadiganlar va quyoshda telefondan o'qiyotganlar matnni umuman ko'ra olmaydi. Dasturlash darsliklari uchun bu ikki karra muhim: foydalanuvchi uzun va murakkab matnni diqqat bilan o'qiydi. Yaxshi tipografiya ko'rinmaydi — u shunchaki o'qishni oson qiladi. Yomon tipografiya esa har bir qatorda o'zini his qildiradi.

Xulosa

Eslab qoling:

font-family — zaxira ro'yxati, oxirida umumiy oila (sans-serif)
Veb-shrift: woff2, font-display: swap, faqat kerakli qalinliklar
font-size — rem da; asosiy matn kamida 16px
font-weight — 400 normal, 700 bold; kerakli qalinlikni yuklang
line-height — birliksiz: matn 1.5–1.7, sarlavha 1.1–1.3
text-align — inline kontentni tekislaydi, bloklarni emas
Matndagi havolalarda tagidagi chiziqni qoldiring; text-underline-offset
text-transform: uppercase — HTML da katta harf bilan yozish o'rniga
Kontrast — kamida 4.5:1

Keyingi bo'lim

3-bo'lim: Layout — Flexbox — elementlarni qatorga va ustunga joylashtirish, markazlash va moslashuvchan layoutlar.