Interfeys tipografiyasi

1) Mahsulotda bosmaxonaning roli

• skanerlashni tezlashtiradi va kognitiv yukni kamaytiradi,
• ierarxiyani shakllantiradi va
• konversiyani oshiradi (CTA, shakllar) va xatolarni kamaytiradi,
• interfeysni qulay va lokalizatsiyaga chidamli qiladi.

2) Bazaviy parametrlar

Kegl (asosiy matn): desktop uchun 16-18 px, mobil uchun 15-16 px.
Satr oraligʻi (line-height): 1. 45–1. 6 matn uchun, 1. 2–1. sarlavhalar uchun 35.
Satr uzunligi (measure): 45-80 belgi; saydbarlarda - 36-60.
Xatlararo oraliq (tracking): oddiy matn uchun 0-1%; kaps uchun - + 2-4%.
Kontrast (WCAG): oddiy matn ≥ 4. 5:1, katta/semiz ≥ 3:1.
Registr: Doimiy ALL CAPSdan qoching; belgilar/chiplar uchun foydalaning, tracking kompensatsiyasi.

3) Ierarxiya va o’lchamlar shkalasi

Modulli yondashuvni tavsiya qilamiz: 8-pt grid + bosmaxona shkalasi.

• Display: 40/48 (LH 1. 15)
• H1: 32/40 (1. 25)
• H2: 24/32 (1. 25)
• H3: 20/28 (1. 3)
• H4: 18/26 (1. 4)
• Body/L: 18/28 (1. 55)
• Body/M: 16/26 (1. 55)
• Body/S: 14/22 (1. 5)
• Caption: 12/18 (1. 5)
• Mono/UI: 12–14/18–20

• Qo’shni darajalar o’rtasida - sezilarli qadam (kamida 12-16%).
• Ierarxiya o’lcham, og’irlik, interlinyaj, rang (kontrastni hisobga olgan holda) va qo’shni bloklargacha bo’lgan masofalar kombinatsiyasi bilan tuziladi.

4) Kapvisota, tayanch chiziq va optika

Elementlarni sarlavhalar balandligiga qarab tekislang (ikonkalarda qulay).
Matn bazasini 4/8 pt bosqichda ushlab turing - tekis ritmlar oʻqishni osonlashtiradi.
Optik cheklovlar: blokning ustidagi sarlavhalar uning ostidagidan kattaroqdir (masalan, yuqoridan + 4-8 px).

5) Chizmalar va variable-shriftlar

Minimal to’plam: Regular, Medium, SemiBold (Bold ixtiyoriy).
UI’da Ultra-Light/Thin’dan foydalanmang.

• Body: 420-470 (400 dan optik tekis).
• UI labels: 500–550.
• Headers/CTA: 600–650.
• Keglni kamaytirganda - ogʻirlikni biroz oshiring (kompensatsiya).
• Dekorativ ligaturalarni UI raqamlarida oʻchiring; kirill/lotin alifbosi uchun standart ligaturalarni saqlang.

6) Raqamlar, jadvallar va sanalar

Summalar, koeffitsiyentlar, taymerlar, reytinglar uchun tabular figures (monoshirinli raqamlar) ni kiriting.
+/ − belgilari - doimo ko’rinadi va yetarli kontrast bilan; manfiy qiymatlarni faqat rangda emas (piktogramma/strelka/yog’) tanlang.
Pul qiymatlari uchun nozik razryad ajratuvchisi (yoki lokal formati) sifatida tor boʻshliqdan foydalaning.
Jadvallarda o’nlik nuqtaga tekislang; mono-ustunlar uchun - monoshirinali shrift.
Imzo grafiklarida 12 px (mobile) va ≥ 13-14 px (desktop), LH 1 ≥. 3; afsonalar ≥ 4. 5:1.

7) Shakllar, inputlar, xabarlar

Leybllar 12-14 px, LH 1. 3–1. 4, muntazam yoki medium.
Placeholder «havodan kulrang» bo’lmasligi kerak - 3:1 maqsadi, vizual ravishda matndan farq qiladi.
Xatolar/muvaffaqiyat/xelp matn 12-14 px; faqat rangga (ikona/matn) tayanmang.

8) Qorong’u/yorqin mavzular

Qorong’i mavzuda # 000 ga #FFF qilishdan qoching: fonni L ≈ 0 ga ko’taring. 14–0. 18, matnni esa L ≈ 0 ga tushiring. 9 - porlashdan kam.
Darkdagi interlinyaj + 0 bo’lishi mumkin. 05 qulaylik uchun yuqoriroq.
Qorong’iga havolalar/urg’u - to’yinganlikni kamaytiring va yorug’likni 0 ga oshiring. 02–0. 04.

9) Mahalliylashtirish va ko’p tillilik

Kirill/lotin/yunon, urg’u belgilari va valyutalarni to’liq qo’llab-quvvatlaydigan oilalarni tanlang.
RTL: belgi/tekislash oynalari, lekin raqamlar va lotin alifbosi emas; koʻchirishlarni sinab koʻring.
Avtoperenoslar (’hyphens: auto’) faqat uzun kontent zonalarida yoqiladi; UI tugmalarida - koʻchirishni taqiqlash.
Turkcha/Ozarbayjoncha uchun «I/i» shakllarini tekshiring.
Gruzin va tay tillari uchun bazaviy keglni 1 px ga oshiring (chizish xususiyatlari).

10) Foydalanish imkoniyati (A11y)

Matn kontrasti: § 2 ga qarang.
Fokus uslublari - rangsiz koʻrinadi: underline, ramka, soya, siljish.
Shrift oʻlchami tizimli ravishda kattalashtiriladi (OS text size ni qoʻllab-quvvatlaydi).
Faqat rang/ogʻirlik orqali maʼnoni kodlamang - aniq imzolar va ikonkalarni qoʻshing.

11) Shriftlarni yuklash va ijro etish

Maqsadlar: blokirovkalarni minimallashtirish, prognoz qilinadigan FOUT va barqaror CLSni ta’minlash.

Kichik turkumlar (subset): lotin, kirill, raqamlar/belgilar - alohida fayllar.
Formatlar:’woff2’(asosiy),’woff’fallback sifatida.
’font-display: swap’ (yoki’optional’ikkinchi darajali oilalar uchun).

html
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Inter-UI-subset. woff2">

Variable-shrift o’rniga 3-4 statika - ko’pincha og’irlik jihatidan foydaliroq.
Budjet: ≤ 150-200 KB (gzip/brotlidan keyin).
Render: matnda bir nechta soyalar/niqoblardan qoching; tizim effektlaridan tejamkorlik bilan foydalaning.

12) Bosmaxona tokenlari (dizayn-tizim)

type. scale.{role}     # h1, h2, body, caption, mono type. weight.{role}    # regular, medium, semibold type. leading.{role}    # line-height type. tracking.{role}   # letter-spacing type. feature. numeric   # tabular, lining

json
{
"type": {
"family": { "ui": "InterVariable", "mono": "JetBrainsMonoVariable" },
"scale": { "h1": 32, "h2": 24, "h3": 20, "body": 16, "caption": 12 },
"leading": { "h1": 40, "h2": 32, "h3": 28, "body": 26, "caption": 18 },
"weight": { "body": 450, "label": 520, "cta": 620 },
"numeric": { "figures": "tabular", "zeros": "slashed" }
}
}

css
:root {
--font-ui: "InterVariable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: "JetBrainsMonoVariable", ui-monospace, SFMono-Regular, Menlo, monospace;

--fs-h1: 32px; --lh-h1: 40px; --w-h1: 600;
--fs-h2: 24px; --lh-h2: 32px; --w-h2: 600;
--fs-h3: 20px; --lh-h3: 28px; --w-h3: 550;
--fs-body: 16px; --lh-body: 26px; --w-body: 450;
--fs-caption: 12px; --lh-caption: 18px; --w-caption: 450;

--tracking-caps: 0. 04em;
--tracking-default: 0em;
}
.u-num {
font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

13) Verstka va ritm

8-pt vertikal modul; xatboshilar orasidagi masofalar = 1 × bazaviy qadam.
Roʻyxatlar: Marker chizigʻi matnning asosiy chizigʻiga tekislangan.
Tugmalar va maydonlar - balandliklar baza paneli chiziqlariga karrali (masalan, 40/48/56 px).

14) iGaming (praktikum) ning o’ziga xos xususiyatlari

Koeffitsiyentlar/imkoniyatlar, balanslar, taymerlar - tabular raqamlaridan foydalaning.
Yetakchilar/reytinglar: razryad bo’yicha tenglashtirish, yagona valyuta formati, aniq «↑/↓».
Mas’ul bildirishnomalar (18 +, limitlar, xavflar) - kontrast bo’yicha minimal AAA, ALL CAPS dan foydalanmaslik.
Promo-bannerlar: matn faqat kontrastni nazorat qiluvchi ploshka/overlelarda.

15) Anti-patternlar

Kichik keglalarda Light/Thin.
Kontrastni tekshirmasdan rangli fondagi kulrang matn.
Ikki va undan ortiq «go’zallik uchun» garnituralar.
Uzun satrlar (> 90 belgi) va zich line-height <1. 35.
Jadvallardagi mutanosib kenglik sonlari/« yuklanadigan »summalar.
Tugmalar/yorliqlardagi majburiy koʻchirishlar.

16) Revyu chek-varag’i

Oʻqish

• Bodi 16-18 px; LH ≥ 1. 45.
• Satrning uzunligi 45-80 belgidir.

Ierarxiya

• Qadam shkalasi ≥ 12%; cheklovlar toʻr bilan kelishilgan.

Raqamlar/jadvallar

• Tabular-nums summalar/koeffitsiyentlar uchun; o’nlik bo’yicha tekislash.

Foydalanish imkoniyati

• WCAG bo’yicha kontrastga erishildi; fokus uslublari rangsiz koʻrinadi.

Performance

• Subset/woff2; `font-display: swap`; budjet ≤ 200 KB.

Lokalizatsiya

• Kirill/Lotin/RTL tilini qo’llab-quvvatlash; tekshirildi/diakritik.

17) A/B va metrika

Sinab ko’ring: Body ± 1 px kegli, sarlavha shkalasi qadami, CTA og’irligi, interlinyaj.
O’lchang: read time, scroll depth, CTR CTA, shakl xatolari, CLS (matn barqarorligi).

Qisqacha xulosa

Tipografiya - interfeys skeleti. Oldindan aytiladigan shkalani belgilang, kontrast va ritmni saqlang, variable-shriftlar va tabular-raqamlardan foydalaning, yuklashni optimallashtiring. SHunda UI tez o’qiladi, barqaror ishlaydi va mavzu va tillarga moslashtiriladi.