Veb va interfeys dizayni uchun tipografiya asoslari

Interfeysda tipografiya nima

Tipografiya — chiroyli shrift tanlash emas. Bu o‘lcham, oraliqlar, qator uzunligi va qalinlik bo‘yicha qoidalar to‘plami bo‘lib, ular tufayli matn osongina o‘qiladi va ko‘z bilan tez ko‘rib chiqiladi. Ekranda interfeysning deyarli hammasi matndan iborat: tugmalar, yozuvlar, xatolar, navigatsiya.

Yaxshi tomoni shundaki, bir nechta asosiy qiymat ko‘pchilik vazifalarni yopadi. Sinalgan sozlamalardan boshlang, keyin real kontentni real qurilmalarda ko‘rib, moslashtiring.

Boshlang‘ich qiymatlar

Bu qonun emas, yo‘nalish. Kichik harflari baland shrift bir xil o‘lchamda kattaroq ko‘rinadi, tor shriftga esa biroz kattaroq o‘lcham kerak bo‘lishi mumkin.

O‘lchamlar shkalasi

Tipografik shkala — har bir element uchun yangi raqam tanlash o‘rniga hamma joyda qayta ishlatiladigan qat’iy o‘lchamlar to‘plami. U ierarxiyani izchil saqlaydi va dizayn-tizimni boshqarishni osonlashtiradi.

Keng tarqalgan usul — modulli shkala: har bir pog‘ona oldingisini koeffitsiyentga, masalan 1,2 yoki 1,25 ga ko‘paytirishdan hosil bo‘ladi. 16px asos va 1,25 koeffitsiyentda taxminan 16, 20, 25, 31, 39, 49 chiqadi. Butun piksellarga yaxlitlang va 5–7 pog‘ona qoldiring: o‘lchamlar bundan ko‘p bo‘lsa, ierarxiya odatda noaniq bo‘ladi.

CSS’da shkala bir marta — o‘zgaruvchilar yoki tokenlar orqali beriladi:

:root {
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.25rem;   /* 20px */
  --text-xl: 1.5625rem; /* 25px */
  --text-2xl: 1.9375rem;/* 31px */
}
body { font-size: var(--text-base); line-height: 1.5; }

rem birliklari matnga foydalanuvchi brauzeridagi shrift o‘lchami sozlamalarini hisobga olish imkonini beradi.

Qatorlar oralig‘i va qator uzunligi

Qatorlar oralig‘i ko‘zga keyingi qator boshiga qaytishga yordam beradi. Juda zich bo‘lsa, qatorlar bir-biriga yopishadi, juda keng bo‘lsa, abzas tarqalib ketadi. Asosiy matnga sarlavhalarga qaraganda ko‘proq havo kerak: 1,5 oraliqli katta sarlavha uzilgandek ko‘rinadi.

Qator uzunligi keng desktop maketlarida ko‘pincha e’tibordan chetda qoladi. 1400px kenglikdagi matn charchatadi. Konteynerni cheklang, masalan max-width: 65ch — shunda kenglik shriftning belgilar soniga bog‘lanadi.

Qalinlik va trekking

• Qalinliklar ierarxiya yaratadi. Qalin — sarlavha va urg‘ular uchun, oddiy — o‘qish uchun. Ingichka qalinliklar (100–300) kichik o‘lchamda kontrastni yo‘qotadi va yomon o‘qiladi.
• Trekking (harflar orasidagi masofa) asosiy matnda odatda standart holicha qoldiriladi. Katta sarlavhalarga ozgina manfiy trekking yarashadi, bosh harfli kichik yozuvlarga esa biroz musbat trekking kerak.
• Kontrast o‘lchamdan kam ahamiyatli emas. Oq fonda och kulrang matn maketda chiroyli ko‘rinadi, lekin real foydalanuvchilarga qiyinchilik tug‘diradi. Kontrastni WCAG talablari bo‘yicha tekshiring.

Ko‘p uchraydigan xatolar

1. Juda ko‘p o‘lcham va qalinlik. Har bir yangi qiymat ierarxiyani zaiflashtiradi.
2. Mobil qurilmada asosiy matn 16px dan kichik. Kattalashtirishga to‘g‘ri keladi, ba’zi mobil brauzerlarda esa kiritish maydonidagi kichik matn avtomatik zumni ishga tushiradi.
3. Katta ekranning butun kengligidagi abzaslar.
4. Uzun matnni markazga tekislash. Markazlash qisqa sarlavhalarga mos, abzaslarga emas.
5. Ierarxiya faqat o‘lcham orqali. Qalinlik, rang va oraliqlar ham xuddi shunday kuchli vosita.
6. Hamma joyda qat’iy px, foydalanuvchi sozlamalarini hisobga olmasdan.

Tipografiyani qanday tekshirish kerak

• Sahifani telefon va noutbukda oching va abzasni shunchaki ko‘rib chiqmasdan, to‘liq o‘qing.
• Brauzer masshtabini 200% ga oshiring va hech narsa buzilmasligi, ustma-ust tushmasligiga ishonch hosil qiling.
• Ko‘zingizni qisib qarang: sarlavha, kichik sarlavha va matn ierarxiyasi ko‘rinib turishi kerak.
• Uzun so‘zlar va boshqa tillarga tarjimalarni ham o‘z ichiga olgan real kontentda sinab ko‘ring.