Интерфейс типографиясы

1) Өнімде типографияның рөлі

• сканерлеуді жылдамдатады және когнитивтік жүктемені азайтады,
• иерархияны қалыптастырады және
• конверсияны арттырады (CTA, пішін) және қателерді азайтады,
• интерфейсті қол жетімді және оқшаулауға төзімді етеді.

2) Негізгі параметрлер

Кегль (негізгі мәтін): desktop 16-18 px, mobile 15-16 px.
Жол аралығы (line-height): 1. 45–1. 6 мәтін үшін: 1. 2–1. 35 тақырыптар үшін.
Жол ұзындығы (measure): 45-80 таңба; сайдбарларда - 36-60.
Әріпаралық аралық (tracking): кәдімгі мәтін үшін 0-1%; капс үшін - + 2-4%.
Контраст (WCAG): кәдімгі мәтін ≥ 4. 5:1, ірі/майлы ≥ 3:1.
Тіркелім: тұрақты ALL CAPS болдырмау; белгілер/чиптер үшін пайдаланыңыз, tracking орнын толтырыңыз.

3) Иерархия және өлшем шкаласы

Модульдік тәсілді ұсынамыз: 8-pt тор + баспаханалық шкала.

• 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

• Көрші деңгейлер арасында - елеулі қадам (кем дегенде 12-16%).
• Иерархия өлшем, салмақ, интерлиньяж, түс (контрасты ескере отырып) және көршілес блоктарға дейінгі арақашықтық комбинациясымен құрылады.

4) Капвысота, базалық сызық және оптика

Элементтерді тақырыптардың қисық биіктігі бойынша тегістеңіз (иконалар кезінде ыңғайлы).
4/8-pt қадамымен мәтіннің негізгі сызығын ұстаңыз - тегіс ырғақтар оқуды жеңілдетеді.
Оптикалық шегіністер: блок үстіндегі тақырыптар - оның астынан үлкен (мысалы, жоғарыдан + 4-8 px).

5) Сызбалар және variable-қаріптер

Ең аз жиынтығы: Regular, Medium, SemiBold (Bold қосымша).
UI ішінде Ultra-Light/Thin қолданбаңыз.

• Body: 420-470 (400-ден оптикалық тегіс).
• UI labels: 500–550.
• Headers/CTA: 600–650.
• Кегль кішірейген кезде - салмақты сәл көтеріңіз (өтемақы).
• UI сандарындағы сәндік лигатураларды ажыратыңыз; кириллица/латын әліпбиі үшін стандартты лигатураларды сақтаңыз.

6) Сандар, кестелер және датавиздер

Сомалар, коэффициенттер, таймерлер, рейтингтер үшін tabular figures (моноенді сандар) қосыңыз.
+/ − белгілері - әрқашан көрінетін және жеткілікті қарама-қайшылықпен; теріс мәндерді тек түспен ғана таңдаңыз (белгішесі/көрсеткісі/майлылығы).
Ақшалай мәндер үшін жіңішке разрядтар бөлгіші (немесе жергілікті пішім) ретінде жіңішке бос орынды пайдаланыңыз.
Кестелерде ондық нүкте бойынша туралау; моно-бағандар үшін - ені бір қаріп.
Қол қою кестелерінде 12 px (mobile) және 13-14 px (desktop), LH 1 ≥ ≥. 3; аңыздар ≥ 4. Фонға 5:1.

7) Нысандар, инпуттар, хабарламалар

Лейблдер 12-14 px, LH 1. 3–1. 4, тұрақты немесе медиум.
Placeholder «ауадан сұр» болмауы тиіс - мәтіннен көзбен шолып ерекшеленетін фонға 3:1 мақсаты.
Қателер/сәттілік/хелп-мәтін 12-14 px; тек түске (белгішеге/мәтінге) сүйенбеңіз.

8) Қараңғы/ашық тақырыптар

Қараңғы тақырыпта # 000 #FFF болдырмаңыз: фонды L ≈ 0 дейін көтеріңіз. 14–0. 18, ал мәтінді L ≈ 0 дейін төмендетіңіз. 9 - жарқырау аз.
Dark аралығы + 0 болуы мүмкін. 05 жайлылық үшін жоғары.
Қараңғы сілтемелер/екпіндер - қанықтықты азайтып, жарықты 0-ге көтеріңіз. 02–0. 04.

9) Локализация және көптілділік

Кириллицаны/латын әліпбиін/грек, акцент белгілерін және валюталарды толық қолдайтын отбасыларды таңдаңыз.
RTL: иконалар/тегістеу айнасы, бірақ сандар мен латын әрпі емес; ауыстыруды тестілеңіз.
Автоарналар ('hyphens: auto') тек ұзын контентті аймақтарда қосылсын; UI-түймешіктерде - тасымалдауға тыйым салу.
Түрік/әзірбайжан тілдерінде «І/і» пішінін тексеріңіз.
Грузин және тай үшін базалық кеглді 1 px-ке көтеріңіз (сызу ерекшеліктері).

10) Қол жетімділік (A11y)

Мәтіннің қарама-қайшылығы: қараңыз § 2.
Фокус-стильдер - түссіз көрінеді: underline, жақтау, көлеңке, ығысу.
Қаріп өлшемі жүйелі түрде кеңейтіледі (OS text size қолдауы).
Тек түсі/салмағы арқылы мағынаны кодтамаңыз - анық қолтаңбалар мен иконалар қосыңыз.

11) Қаріптерді және спектакльді жүктеу

Мақсаттары: бұғаттауды барынша азайту, болжамды FOUT және тұрақты CLS қамтамасыз ету.

Кіші топтар (subset): латын, кириллица, сандар/символдар - жеке файлдар.
Пішімдер: 'woff2' (негізгі), 'woff' fallback ретінде.
'font-display: swap' (немесе 'optional' екінші дәрежелі жиындар үшін).

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

3-4 статика орнына Variable-қаріп - жиі салмағы бойынша тиімді.
Бюджет: ≤ 150-200 KB (gzip/brotli кейін).
Рендер: мәтіндегі көптеген көлеңкелерден/маскалардан аулақ болыңыз; жүйелік әсерлерді үнемді пайдаланыңыз.

12) Типографиялық токендер (дизайн-жүйе)

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) Беттеу және ырғақ

8-pt тік модуль; абзацтар арасындағы қашықтық = 1 × базалық қадам.
Тізімдер: таңбалауыш шегінісі мәтіннің негізгі сызығы бойынша тураланған.
Түймешіктер мен өрістер - биіктіктер негізгі тор сызығына еселенеді (мысалы, 40/48/56 px).

14) iGaming ерекшелігі (практикум)

Коэффициенттер/мүмкіндіктер, баланстар, таймерлер - tabular-сандарды, критикалық бағандардағы моноенді пайдаланыңыз.
Көшбасшылар/рейтингтер: разряд бойынша теңестіру, валютаның бірыңғай форматы, анық «↑/↓».
Жауапты хабарламалар (18 +, лимиттер, тәуекелдер) - контраст бойынша AAA минимумы, ALL CAPS пайдаланбаңыз.
Промо-баннерлер: контрасты бақыланатын тек плашкалардағы/оверлелердегі мәтін.

15) Қарсы үлгілер

Шағын кегельдерде Light/Thin.
Контрасты тексерусіз түсті фондағы сұр мәтін.
Екі және одан да көп «сұлулыққа арналған» гарнитура.
Ұзын жолдар (> 90 таңба) және тығыз line-height <1. 35.
Кестедегі пропорционалды енінің сандары/« көшірілетін »сомалар.
Түймешіктердегі/лейблдердегі мәжбүрлі тасымалдар.

16) Ревью чек-парағы

Оқылым

• Боди 16-18 px; LH ≥ 1. 45.
• Жолдың ұзындығы 45-80 таңба.

Иерархия

• 12% ≥ қадаммен шкала; шегіністер тормен келісілген.

Сандар/кестелер

• Tabular-nums сомалар/коэффициенттер үшін; ондық бойынша туралау.

Қол жетімділік

• WCAG бойынша қарама-қайшылыққа қол жеткізілді; фокус-стильдер түссіз көрінеді.

Көрініс

• Subset/woff2; `font-display: swap`; бюджет ≤ 200 KB.

Локализация

• Кириллица/Латын әліпбиін/RTL қолдау; ауыстырулар/диакритика тексерілді.

17) A/B және метрика

Тестілеу: Body ± 1 px кеглі, тақырып шкаласының қадамы, CTA салмағы, интерлиньяж.
Өлшеу: read time, scroll depth, CTR CTA, пішін қателері, CLS (мәтін тұрақтылығы).

Қысқаша түйіндеме

Типографиясы - интерфейс скелеті. Болжамды масштабты белгілеңіз, қарама-қарсылық пен ырғақты сақтаңыз, variable қаріптерін және tabular сандарын пайдаланыңыз, жүктеуді оңтайландырыңыз. Сонда UI тез оқылады, тұрақты жұмыс істейді және тақырыптар мен тілдер бойынша кеңейтіледі.