Interfeýsiň tipografiýasy

1) Önümde çaphananyň orny

• skanirlemegi çaltlaşdyrýar we aň-düşünjäni peseldýär,
• iýerarhiýany emele getirýär we
• öwrülişigi ýokarlandyrýar (CTA, formalar) we ýalňyşlyklary azaldýar,
• interfeýsi elýeterli we lokalizasiýa çydamly edýär.

2) Esasy parametrler

Kegl (esasy tekst): 16-18 px desktop, 15-16 px mobile.
Hatara aralyk (line-height): 1. 45–1. 6 tekst üçin, 1. 2–1. 35 sözbaşylar üçin.
Setiriň uzynlygy (measure): 45-80 belgi; sidbarlarda - 36-60.
Harp aralygy (tracking): Adaty tekst üçin 0-1%; kaps üçin - + 2-4%.
Kontrast (WCAG): Adaty tekst ≥ 4. 5:1, uly/ýagly ≥ 3:1.
Register: Hemişelik ALL CAPS-den gaça duruň; bellikler/çipler üçin ulanyň, yzarlamany öwezini doluň.

3) Iýerarhiýa we ululyk şkalasy

Modully çemeleşmäni maslahat berýäris: 8-pt tor + çaphana şkalasy.

• 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

• Goňşy derejeleriň arasynda - görnükli ädim (azyndan 12-16%).
• Iýerarhiýa ululygyň, agramyň, interlinýajyň, reňkiň (kontrasty göz öňünde tutup) we goňşy bloklara çenli aralyklaryň utgaşmasy bilen gurulýar.

4) Esasy beýiklik, esasy çyzyk we optika

Elementleri sözbaşylaryň beýikligine görä tekizläň (nyşanlarda amatly).
4/8-pt ädimli tekstiň esasy çyzygyny saklaň - tekiz ritmler okamagy aňsatlaşdyrýar.
Optiki girintiler: blokyň üstündäki sözbaşylar - onuň aşagyndakydan has köp (mysal üçin, ýokardan + 4-8 px).

5) Çyzgylar we variable-şriftler

Iň az toplumy: Regular, Medium, SemiBold (Bold opsiýa).
UI-de Ultra-Light/Thin ulanmaň.

• Body: 420-470 (optiki taýdan 400-den has tekiz).
• UI labels: 500–550.
• Headers/CTA: 600–650.
• Kegl azalanda - agramy birneme ýokarlandyryň (öwezini dolmak).
• UI belgili bezeg ligaturalaryny öçüriň; kiril/latyn elipbiýi üçin standart ligaturalary saklaň.

6) Sanlar, tablisalar we sene

Jemi, koeffisiýentler, taýmerler, reýtingler üçin tabular figures (monoshirinny sanlar) goşuň.
Alamatlar +/ − - hemişe görünýär we ýeterlik kontrast bilen; negatiw bahalary diňe reňk bilen däl (nyşan/ok/ýag).
Pul bahalary üçin inçe razryad bölüjisi (ýa-da ýerli format) hökmünde dar boşlugy ulanyň.
Tablisalarda onluk nokada görä tekizläň; mono-sütünler üçin - mono giň şrift.
12 px (ykjam) we ≥ 13-14 px (desktop), LH ≥ oklaryň gol çyzgylarynda 1. 3; rowaýatlar ≥ 4. 5:1 fon.

7) Görnüşler, inputlar, habarlar

Bellikler 12-14 px, LH 1. 3–1. 4, adaty ýa-da medium.
Placeholder "howadan çal" bolmaly däldir - fon üçin maksat 3:1, wizual tekstden tapawutlanýar.
Ýalňyşlyklar/üstünlik/help-tekst 12-14 px; Diňe reňke bil baglamaň (nyşan/tekst).

8) Garaňky/açyk mowzuklar

Garaňky mowzukda # 000-e #FFF bolmakdan gaça duruň: Fon L ≈ 0-a çenli galdyryň. 14–0. 18 we teksti L ≈ 0 çenli azaldyň. 9 - az şöhle.
Dark aralygy + 0 bolup biler. 05 Rahatlyk üçin has ýokary.
Garaňkyda baglanyşyklar/aksentler - doýgunlygy peseldiň we ýagtylygy 0 ýokarlandyryň. 02–0. 04.

9) Lokalizasiýa we köp dillilik

Kiril/latyn/grek, aksent belgilerini we walýutalaryny doly goldaýan maşgalalary saýlaň.
RTL: nyşanlaryň/tekizlemeleriň aýnalary, ýöne sanlar we latyn harplary däl; geçişleri synagdan geçiriň.
Awtoperenoslary ('hyphens: auto') diňe uzyn kontent zolaklarynda goşmak; UI düwmelerinde - geçirmegi gadagan etmek.
Türk/azerbaýjan dili üçin "I/y" görnüşini barlaň.
Gürji we taý üçin esasy keglini 1 px ýokarlandyryň (çyzmagyň aýratynlyklary).

10) Elýeterlilik (A11y)

Tekstiň garşylygy: § 2 serediň.
Fokus stilleri - reňksiz görünýär: underline, çarçuwa, kölege, süýşme.
Şriftiň ululygy yzygiderli ulalýar (OS text size goldaw).
Manyny diňe reňk/agram arkaly kodlamaň - aç-açan gollary we nyşanlary goşuň.

11) Şriftleri ýüklemek we ýerine ýetirmek

Maksatlar: blokirlemeleri azaltmak, öňünden aýdyp boljak FOUT we durnukly CLS üpjün etmek.

Subtoplular (subset): latyn, kiril, sanlar/nyşanlar - aýry-aýry faýllar.
Formatlar: 'woff2' (esasy), 'woff' fallback.
'font-display: swap' (ýa-da 'optional' ikinji derejeli maşgalalar üçin).

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

Statikanyň ýerine 3-4 şrift bar - köplenç agram taýdan has girdejili.
Býudjet: ≤ 150-200 KB (gzip/brotli-den soň).
Render: Tekstdäki köp kölegelerden/maskalardan gaça duruň; ulgamlaýyn täsirleri tygşytly ulanyň.

12) Çaphana bellikleri (dizaýn ulgamy)

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üzmek we ritm

8-pt dik modul; esasy ädimiň = 1 × abzaslarynyň arasyndaky aralyklar.
Sanawlar: bellik nokady tekstiň esasy çyzygy boýunça tekizlenýär.
Düwmeler we meýdanlar - beýiklikler esasy toruň çyzyklaryndan köpdür (mysal üçin 40/48/56 px).

14) iGaming aýratynlygy (tejribe)

Koeffisiýentler/mümkinçilikler, balanslar, taýmerler - möhüm sütünlerde tabular-sanlary, mono ini ulanyň.
Liderler/reýtingler: kategoriýa boýunça deňleşdirmek, walýutalaryň ýeke-täk görnüşi, aýdyň "↑/↓".
Jogapkär habarnamalar (18 +, çäkler, töwekgelçilikler) - kontrast boýunça iň az AAA, ALL CAPS ulanmaň.
Mahabat bannerleri: tekst diňe kontrastyň gözegçiligi bilen plaşalarda/overleýlerde.

15) Anti-patternler

Kiçijik kegllerde ýagtylyk/ýagtylyk.
Kontrasty barlamazdan reňkli fonda çal tekst.
Iki ýa-da has köp "gözellik üçin" garnitura.
Uzyn setirler (> 90 nyşan) we dykyz line-height <1. 35.
Tablisalardaky proporsional giňligiň sanlary/" göçürilen "jemler.
Düwmelerdäki/belliklerdäki mejbury göçürmeler.

16) Rebyu çek-sanawy

Okamak

• Beden 16-18 px; LH ≥ 1. 45.
• Setiriň uzynlygy 45-80 belgidir.

Iýerarhiýa

• Ädim şkalasy ≥ 12%; sapaklar tor bilen ylalaşylýar.

Sanlar/Tablisalar

• Jemler/koeffisiýentler üçin Tabular-nums; onluk boýunça deňlemek.

Elýeterlilik

• WCAG-da kontrast gazanyldy; fokus stilleri reňksiz görünýär.

Performans

• Subset/woff2; `font-display: swap`; býudjet ≤ 200 KB.

Lokalizasiýa

• Kiril/Latyn/RTL; göçürmeler/diakritik barlandy.

17) A/B we metrikler

Synag ediň: Body ± 1 px kegle, sözbaşy ädimleri, CTA agramy, baglanyşyk.
Ölçäň: read time, scroll depth, CTR CTA, form ýalňyşlyklary, CLS (tekstiň durnuklylygy).

Gysgaça gysgaça

Tipografiýa - interfeýs skeleti. Öňünden aýdyp boljak masştaby belläň, kontrasty we ritmi saklaň, variable-şriftleri we tabular-sanlary ulanyň, ýüklemäni optimizirläň. Şonda UI çalt okalýar, durnukly işleýär we mowzuklar we diller üçin ulalýar.