Типографіка інтерфейсу

1) Роль типографіки в продукті

• прискорює сканування і знижує когнітивне навантаження,
• формує ієрархію і допомагає орієнтуватися в стані,
• підвищує конверсію (CTA, форми) і знижує помилки,
• робить інтерфейс доступним і стійким до локалізації.

2) Базові параметри

Кегль (основний текст): 16-18 px на desktop, 15-16 px на mobile.
Міжрядковий інтервал (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 опціонально).
Не використовуйте Ultra-Light/Thin в UI.

• 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) Темна/світла теми

У темній темі уникайте #FFF на # 000: піднімайте фон до L≈0. 14–0. 18, а текст знижуйте до L≈0. 9 - менше відблисків.
Інтерліньяж в dark може бути на + 0. 05 вище для комфорту.
Посилання/акценти в dark - знижуйте насиченість і підвищуйте світлоту на 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">

Variable-шрифт замість 3-4 статики - часто вигідніший за вагою.
Бюджет: ≤ 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 буде читатися швидко, працювати стабільно і масштабуватися під теми і мови.