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

1) продукт боюнча типографиялык ролу

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

2) негизги параметрлери

Cegle (негизги текст): 16-18 px боюнча desktop, 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.
Register: туруктуу 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) Capweight, базалык сызык жана оптика

Элементтерди баш макалалардын бийиктиги боюнча тегиздеңиз (иконалар үчүн ыңгайлуу).
4/8-PT кадам менен текст базалык сапты колдоо - тегиз ритмдер окуу жөнөкөйлөтүү.
Оптикалык чегинүүлөр: блоктун үстүндөгү аталыштар анын астына караганда көбүрөөк (мисалы, жогоруда + 4-8 px).

5) Designs жана 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 - аз жарык.
караңгы аралыгы + 0 болушу мүмкүн. 05 жогорку сооронуч үчүн.
Караңгы шилтемелер/акценттер - каныккандыкты азайтып, жарыкты 0 көбөйтүңүз. 02–0. 04.

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

Кирил/Латын/Грек толук колдоосу менен үй-бүлөлөрдү тандоо, басым белгилерин жана акча.
RTL: күзгү сөлөкөттөр/тегиздөө, бирок сандар жана латын жазуусу эмес; которууларды сынап көрүңүз.
Autoperenos ('hyphens: auto') гана узун мазмун зоналарында камтыйт; UI баскычтарында - которууга тыюу салуу.
Түрк/азербайжан үчүн "I/i" формасын текшериңиз.
Грузин жана тай үчүн базалык кеглди 1 px жогорулатуу (чийме өзгөчөлүктөрү).

10) Жеткиликтүүлүк (A11y)

Тексттин карама-каршылыгы: караңыз § 2.
Фокус стилдери - түсү жок көрүнүп турат: underline, кадр, көлөкө, жылыш.
Шрифттин өлчөмү системалуу түрдө масштабдалат (OS text size колдоо).
Маанини түс/салмак аркылуу гана коддобоңуз - ачык кол тамгаларды жана иконаларды кошуңуз.

11) Шрифттерди жүктөө жана аткаруу

Максаттары: бөгөт минималдаштыруу, алдын ала FOUT жана туруктуу CLS камсыз кылуу.

Субтитрлер (субтитрлер): латын, кирилл, сандар/символдор - өзүнчө файлдар.
Форматтар: '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 кийин).
Render: текст боюнча бир нече көлөкө/маска качуу; системалык эффекттерди үнөмдүү колдонуңуз.

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-жогорку <1. 35.
таблицаларда пропорционалдуу туурасы сандар/" жүктөп "суммасы.
Мажбурлап которуулар баскычтар/этикеткалар.

16) Ревью чек-баракчасы

Окууга жөндөмдүүлүк

• Body 16-18 px; LH ≥ 1. 45.
• Саптын узундугу 45-80 белги.

Иерархия

• 12% ≥ кадам менен шкала; чегинүүлөр тор менен макулдашылган.

Сандар/таблицалар

• суммалар/коэффициенттер үчүн Tabular-nums; ондук боюнча тегиздөө.

Жеткиликтүүлүк

• WCAG боюнча карама-каршылык жетишилди; фокус стилдери түсү жок көрүнүп турат.

Спектакль

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

Локализация

• Кирилл/латын/RTL колдоо; текшерилген которуулар/диакритика.

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

Сыноо: Body Cegle ± 1 PX, аты-жөнү, CTA салмагы, аралык.
Өлчөө: read time, scroll depth, CTR CTA, бланк каталары, CLS (текст туруктуулугу).

Кыскача резюме

Типография - интерфейстин скелети. алдын ала шкала, карама-каршылыкты жана ритмди сактоо, variable-ариптер жана tabular-сандарды колдонуу, жүктөө оптималдаштыруу. Андан кийин UI тез окулат, туруктуу иштеп, темалар жана тилдер боюнча масштабдуу болот.