Стандарты типографики (2026)

Этот документ описывает единую типографическую шкалу и правила оформления текста в проекте HSM. Эти стандарты обеспечивают консистентность интерфейса, визуальную иерархию и соответствие современным требованиям доступности (Accessibility).

Основные принципы

1. Mobile-First Scaling: Все размеры определяются сначала для мобильных устройств, а затем масштабируются для десктопа через префикс md:.
2. Доступность: Минимальный размер шрифта для любого текста — 12px (text-xs). Основной текст должен быть не менее 16px (text-base).
3. Читаемость: Для длинных текстовых блоков обязательно использование увеличенного межстрочного интервала (leading-relaxed).
4. Семантика: Размер шрифта должен соответствовать логической роли элемента (заголовок, подзаголовок, основной текст).

Типографическая шкала

В проекте используется следующая система токенов на базе Tailwind CSS:

Уровень	Класс Tailwind	Размер (px)	Назначение
Display	text-5xl md:text-7xl	48-72px	Главные заголовки (Hero)
H2	text-3xl md:text-4xl	30-36px	Заголовки крупных секций
H3	text-xl md:text-2xl	20-24px	Заголовки карточек и подсекций
Body L	text-lg md:text-xl	18-20px	Таглайны, цитаты, вводные абзацы
Body M	text-base md:text-lg	16-18px	Основной текст, списки, описания
Small	text-sm	14px	Подписи, второстепенные детали
Tiny	text-xs	12px	Статус-бары, служебные метки

Примеры использования

Заголовки секций

<h2 className="font-display text-3xl md:text-4xl font-bold uppercase tracking-wider">
  Заголовок секции
</h2>

Основной текст с хорошей читаемостью

<p className="text-base md:text-lg text-slate-400 leading-relaxed">
  Этот текст легко читать благодаря правильному размеру и межстрочному интервалу.
</p>

Цитаты и важные мысли

<blockquote className="text-lg md:text-xl italic leading-relaxed">
  Важная мысль, выделенная размером Body L.
</blockquote>

Межстрочные интервалы (Leading)

• Стандарт: leading-normal (по умолчанию).
• Для контента: leading-relaxed (1.625) — рекомендуется для всех абзацев длиннее 2-х строк.
• Для заголовков: leading-tight (1.25) — если заголовок занимает несколько строк.

Цвета и контрастность

При выборе цвета текста необходимо соблюдать коэффициент контрастности не менее 4.5:1 для обычного текста и 3:1 для крупного текста (согласно WCAG 2.1).

• Основной текст: text-slate-300 или text-white.
• Второстепенный: text-slate-400 или text-slate-500.
• Акценты: text-primary (#00FFCC) или text-secondary (#DAFF00).