Interfeys tipoqrafiyası

1) Məhsulda mətbəənin rolu

• taramanı sürətləndirir və idrak yükünü azaldır,
• hiyerarxiya formalaşdırır və bir vəziyyətdə gəzməyə kömək edir,
• dönüşüm (CTA, formalar) artırır və səhvləri azaldır,
• interfeysi əlverişli və lokalizasiyaya davamlı edir.

2) Əsas parametrlər

Kegl (əsas mətn): masaüstü 16-18 px, mobil 15-16 px.
Sətir aralığı (line-height): 1. 45–1. 6 mətn üçün, 1. 2–1. 35 başlıqlar üçün.
Sətir uzunluğu (measure): 45-80 işarə; sidbarlarda - 36-60.
Hərflərarası interval (tracking): normal mətn üçün 0-1%; kaps üçün - + 2-4%.
Kontrast (WCAG): adi mətn ≥ 4. 5:1, böyük/yağlı ≥ 3:1.
Register: daimi ALL CAPS çəkinin; etiketlər/çiplər üçün istifadə edin, izi kompensasiya edin.

3) Hiyerarxiya və ölçü şkalası

modul yanaşma tövsiyə: 8-pt mesh + tipoqrafik şkala.

• 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

• Qonşu səviyyələr arasında - nəzərə çarpan bir addım (ən azı 12-16%).
• İyerarxiya ölçü, çəki, interlinyaj, rəng (kontrast nəzərə alınmaqla) və qonşu bloklara olan məsafələrin birləşməsi ilə qurulur.

4) Kapvost, baza xətti və optika

Elementləri başlıqların başlığı ilə bərabərləşdirin (ikonalarda rahatdır).
4/8-pt addım ilə mətnin əsas xəttini saxlayın - düz ritmlər oxumağı asanlaşdırır.
Optik girintilər: blokun üstündəki başlıqlar onun altından daha böyükdür (məsələn, yuxarıda + 4-8 px).

5) Desen və variable-şriftlər

Minimum dəst: Regular, Medium, SemiBold (Bold isteğe bağlıdır).
UI-də Ultra-Light/Thin istifadə etməyin.

• Body: 420-470 (optik 400-dən daha bərabərdir).
• UI labels: 500–550.
• Headers/CTA: 600–650.
• Kegle azaldıqda - çəkinizi bir az artırın (kompensasiya).
• UI ədədlərində dekorativ liqaturaları söndürün; kiril/latın əlifbası üçün standart liqaturaları saxlayın.

6) Rəqəmlər, cədvəllər və tarixlər

Məbləğlər, əmsallar, zamanlayıcılar, reytinqlər üçün tabular figures (monoshenic rəqəmlər) daxil edin.
+/ − işarələri - həmişə görünür və kifayət qədər təzadla; mənfi qiymətləri yalnız rənglə seçməyin (ikon/ox/yağ).
Pul dəyərləri üçün nazik boşluq ayırıcısı (və ya yerli format) kimi dar boşluqdan istifadə edin.
Cədvəllərdə onluq nöqtəyə bərabərləşdirin; mono-sütunlar üçün - mono enli şrift.
12 px (mobile) və ≥ 13-14 px (desktop), LH 1 ≥. 3; əfsanələr ≥ 4. 5:1 fon.

7) Formalar, inputlar, mesajlar

Etiketlər 12-14 px, LH 1. 3–1. 4, müntəzəm və ya medium.
Placeholder «havadan daha boz» olmamalıdır - fon üçün 3:1 hədəfi, vizual olaraq mətndən fərqlənir.
Səhvlər/uğur/help mətn 12-14 px; yalnız rəngə (ikona/mətn) güvənməyin.

8) Qaranlıq/parlaq mövzular

Qaranlıq mövzuda # 000 #FFF çəkinin: fonu L ≈ 0-a qaldırın. 14–0. 18 və mətni L ≈ 0-a endirin. 9 - daha az parıltı.
dark interlinyage + 0 ola bilər. 05 rahatlıq üçün yuxarıda.
Dark linklər/vurğular - doygunluğu azaltın və işığı 0 artırın. 02–0. 04.

9) Lokalizasiya və multiplikasiya

Kiril/Latın/Yunan, vurğu işarələri və valyutaları ilə ailələri seçin.
RTL: güzgü nişanlar/hizalama, lakin rəqəmlər və latın əlifbası deyil; köçürmələri test edin.
Avtoperenos ('hyphens: auto') yalnız uzun məzmun zonalarında daxil etmək; UI düymələrində - köçürməni qadağan edin.
Türk/Azərbaycan dili üçün «İ/ı» formalarını yoxlayın.
Gürcü və tay dilləri üçün əsas keglini 1 px artırın (yazı xüsusiyyətləri).

10) Mövcudluq (A11y)

Mətn kontrastı: bax § 2.
Focus stilləri - rəngsiz görünür: underline, çərçivə, kölgə, yerdəyişmə.
Şriftin ölçüsü sistemli şəkildə ölçülür (OS text size dəstək).
Mənanı yalnız rəng/çəki ilə kodlamayın - açıq imzalar və nişanlar əlavə edin.

11) Şriftlərin yüklənməsi və performans

Məqsədlər: kilidləri minimuma endirmək, proqnozlaşdırıla bilən FOUT və sabit CLS təmin etmək.

Alt çoxluqlar (subset): latın əlifbası, kiril əlifbası, rəqəmlər/simvollar - ayrı-ayrı fayllar.
Formatlar: 'woff2' (əsas), 'woff' fallback kimi.
'font-display: swap' (və ya 'optional' ikinci dərəcəli ailələr üçün).

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

3-4 statik əvəzinə variable şrift - çox vaxt çəki baxımından daha sərfəlidir.
Büdcə: kritik yolda ≤ 150-200 KB (gzip/brotli sonra).
Render: mətndə çoxsaylı kölgələrdən/maskalardan çəkinin; sistem effektlərindən qənaətlə istifadə edin.

12) Tipoqrafiya tokenləri (dizayn sistemi)

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) Düzmə və ritm

8-pt şaquli modul; paragraflar arasında məsafə = 1 × əsas addım.
Siyahılar: Markerin sapması mətnin baza xətti ilə hizalanır.
Düymələr və sahələr - hündürlüklər baz şəbəkə xəttinin qatıdır (məsələn, 40/48/56 px).

14) iGaming xüsusiyyətləri (praktikum)

Əmsallar/şanslar, balanslar, zamanlayıcılar - kritik sütunlarda tabular rəqəmlərindən, monoenindən istifadə edin.
Liderlər/reytinqlər: kateqoriya üzrə bərabərləşdirmə, vahid valyuta formatı, açıq «↑/↓».
Məsuliyyətli bildirişlər (18 +, limitlər, risklər) - kontrast üzrə minimum AAA, ALL CAPS istifadə etməyin.
Promo bannerlər: mətn yalnız kontrast nəzarəti ilə Plush/Overlay üzərində.

15) Anti-nümunələr

Light/Thin kiçik kegle.
Kontrast yoxlamadan rəngli fonda boz mətn.
İki və daha çox qulaqlıq «gözəllik üçün».
Uzun sətirlər (> 90 simvol) və sıx line-height <1. 35.
Cədvəllərdə proporsional genişlik ədədləri/« download »cəmləri.
Düymələrdə/etiketlərdə məcburi köçürmələr.

16) Revyu çek siyahısı

Oxuma qabiliyyəti

• Body 16-18 px; LH ≥ 1. 45.
• Sətir uzunluğu 45-80 işarədir.

İyerarxiya

• Addım ölçüsü ≥ 12%; girintilər şəbəkə ilə razılaşdırılır.

Ədədlər/cədvəllər

• Tabular-nums məbləğləri/əmsalları üçün; onluq bərabərləşdirmə.

Mövcudluq

• WCAG kontrastı əldə edilir; fokus üslubları rəngsiz görünür.

Performans

• Subset/woff2; `font-display: swap`; büdcə ≤ 200 KB.

Lokalizasiya

• Kiril/Latın/RTL dəstək; köçürmələr/diakritik yoxlanılır.

17) A/B və metrika

Test edin: Body Cegle ± 1 PX, Başlıq Şkalası, CTA çəkisi, Interlineage.
Ölçün: read time, scroll depth, CTR CTA, forma səhvləri, CLS (mətn sabitliyi).

Qısa xülasə

Tipoqrafiya - interfeys skeleti. Proqnozlaşdırılan şkalanı təyin edin, kontrast və ritmi saxlayın, variable-şriftləri və tabular-rəqəmləri istifadə edin, yükləməni optimallaşdırın. Sonra UI tez oxunacaq, sabit işləyəcək və mövzular və dillər üçün miqyaslı olacaq.