Система типографики

Демонстрация всех стилей текста, заголовков, списков и утилит

Заголовки h1-h6

Заголовок первого уровня (h1)

Используется для главного заголовка страницы. Размер: var(--app-font-size-4xl), вес: 800.

Заголовок второго уровня (h2)

Для крупных разделов. С нижней границей и отступом.

Заголовок третьего уровня (h3)

Для подразделов внутри h2.

Заголовок четвертого уровня (h4)

Обычно используется в карточках или сайдбарах.

Заголовок пятого уровня (h5)

Мелкий, но жирный заголовок.

Заголовок шестого уровня (h6)

Самый маленький, часто используется в подписях (uppercase).

Абзацы и ссылки

Обычный текст

Это пример обычного абзаца текста с оптимальной шириной строки для чтения. Межстрочный интервал задан через var(--app-line-height-normal).

Второй абзац демонстрирует последовательность текста с правильными отступами. Расстояние между абзацами контролируется через margin-bottom.

Ссылки и инлайн-элементы

Это обычная ссылка с плавным переходом цвета.

Это жирный текст, а это курсив.

Можно комбинировать: жирный курсив.

Маленький текст: дисклеймер или подпись.

Списки

Маркированный (ul)
  • Первый элемент
  • Второй элемент
    • Вложенный пункт
    • Ещё вложенный
  • Третий элемент
Нумерованный (ol)
  1. Шаг первый
  2. Шаг второй
    1. Подшаг 1
    2. Подшаг 2
  3. Шаг третий
Список определений (dl)
Термин 1
Описание термина 1, более подробное объяснение.
Термин 2
Описание термина 2.

Цитаты

Обычная

Это обычная цитата с левой границей и фоновым заполнением. Она выделяет важные мысли.

— Автор
Выноска (pullquote)

Это выноска без фона и границы, для выделения ключевых мыслей в тексте.

— Источник
Важная (important)

Важная цитата с красной границей. Используется для критических замечаний.

— Важный источник

Разделители

Горизонтальные

Текст до разделителя

Текст после обычного разделителя

ИЛИ
Пункт 1
Пункт 2
Пункт 3
Вертикальные
Главная
Профиль
Настройки
Выйти

Левая колонка с контентом. Вертикальный разделитель между колонками.

Правая колонка с контентом.

Текстовые утилиты

Цвета текста
.app-text-primary .app-text-secondary .app-text-success .app-text-danger .app-text-warning .app-text-info .app-text-muted .app-text-light
Размеры шрифта
.app-text-xs (0.75rem) .app-text-sm (0.875rem) .app-text-base (1rem) .app-text-lg (1.125rem) .app-text-xl (1.25rem) .app-text-2xl (1.5rem) .app-text-3xl (1.875rem) .app-text-4xl (2.25rem)
Начертание (вес)
.app-font-light (300) .app-font-normal (400) .app-font-medium (500) .app-font-semibold (600) .app-font-bold (700)
Выравнивание

.app-text-left

.app-text-center

.app-text-right

Регистр

.app-text-uppercase

.app-text-lowercase

.app-text-capitalize

Специальные

.app-text-truncate - этот текст будет обрезан с многоточием, если не поместится в одну строку.

.app-text-break - оченьдлинноесловокотороенепомещается

Практический пример: карточка статьи

Заголовок статьи

Иван Иванов 15 марта 2026 Новости

Первый абзац текста статьи. Он задает тон всей публикации. Здесь может быть ссылка на источник или дополнительный материал.

Ключевая мысль, которую автор хочет донести до читателя, выделяется в виде выноски.

Подзаголовок раздела

Текст второго раздела. Он может содержать маркированный список:

  • Первый пункт списка
  • Второй пункт списка с акцентом
  • Третий пункт
Продолжение следует

* Примечание или сноска к статье.

О системе типографики

Типографика построена на CSS-переменных и обеспечивает полную согласованность во всем приложении.

Основные файлы:
  • variables.css — переменные
  • typography.css — стили
  • utilities.css — утилиты
Ключевые переменные:
  • --app-font-size-*
  • --app-line-height-*
  • --app-color-text-*
Адаптивность:

На мобильных устройствах (768px) размер h1 уменьшается до 2xl, базовый шрифт — до 15px.

Продолжая использовать сайт, вы соглашаетесь на обработку файлов cookie и принимаете Пользовательское соглашение