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

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 будет читаться быстро, работать стабильно и масштабироваться под темы и языки.