CSS-переменные для типографики: как собрать систему

CSS-переменные для типографики позволяют хранить шрифты, размеры текста, межстрочные интервалы, насыщенность и адаптивные значения в единой системе. Вместо десятков разрозненных правил сайт получает предсказуемую и масштабируемую основу. Ниже разберём архитектуру токенов, единицы измерения, практический код, темы, ошибки и чеклист проверки.

CSS-переменная, или пользовательское свойство, хранит значение, которое можно повторно использовать в стилях. Имя начинается с двух дефисов, например --font-body или --text-size-lg, а обращение к переменной выполняется через функцию var(). Если значение меняется в одном месте, все связанные элементы обновляются автоматически. Это особенно удобно для типографики, где один набор правил применяется к заголовкам, тексту, подписям, кнопкам и формам.

Переменные наследуются по дереву документа, поэтому их можно объявить глобально в :root, а затем переопределить для отдельной темы, компонента или медиазапроса. В отличие от препроцессорных переменных Sass, CSS-переменные существуют в браузере во время выполнения. Благодаря этому значение можно менять динамически, например при переключении светлой и тёмной темы.

Типографическая система описывает не отдельные CSS-правила, а набор согласованных решений. Она определяет, какой шрифт используется для основного текста, как отличаются заголовки, какой интервал нужен между строками и как размеры меняются на узком экране. Такая система сокращает количество случайных значений и помогает сохранять единый ритм на всех страницах.

Удобная система обычно строится в три слоя. Базовые токены содержат конкретные значения: название семейства, размер в rem, коэффициент line-height или числовой font-weight. Смысловые токены связывают значение с ролью: основной текст, заголовок первого уровня, вторичный текст. Компонентные токены уточняют поведение внутри кнопки, карточки или навигации. Такая иерархия позволяет заменить шрифт или шкалу без переписывания компонентов.

Начните с нейтральных переменных, которые описывают сами ресурсы. Например: --font-sans: 'Inter', sans-serif; --font-serif: Georgia, serif; --font-mono: 'JetBrains Mono', monospace; --size-1: 0.75rem; --size-2: 0.875rem; --size-3: 1rem; --size-4: 1.25rem; --size-5: 1.75rem; --size-6: 2.5rem. Значения не обязаны повторять этот набор: шкала должна соответствовать содержанию и визуальному характеру проекта.

Компоненты не должны зависеть от абстрактного --size-4, если разработчику важна роль значения. Лучше создать связи вроде --text-body-size: var(--size-3); --text-body-leading: 1.5; --text-heading-size: var(--size-6); --text-heading-leading: 1.1; --text-muted-color: #68707d. Тогда изменение базовой шкалы автоматически сохранит смысловые роли, а названия переменных будут понятны дизайнерам и разработчикам.

Компонентные переменные нужны, когда роль текста зависит от контекста. Для кнопки можно задать --button-font-size: var(--text-body-size); --button-font-weight: 600; --button-line-height: 1.25. Для подписи карточки — --card-meta-size: var(--size-2); --card-meta-leading: 1.35. Если компонент использует уже существующие смысловые токены, система остаётся компактной и не превращается в длинный список почти одинаковых значений.

Для размеров шрифта чаще всего используют rem, потому что он связан с размером корневого элемента документа и хорошо подходит для последовательной шкалы. Единица em зависит от размера шрифта текущего элемента или родителя, поэтому она удобна для локальных отступов, но требует внимательного контроля вложенности. Проценты применяют реже, а px оставляют для случаев, где нужна точная привязка к пикселям, например в отдельных декоративных элементах.

Межстрочный интервал лучше задавать безразмерным числом: line-height: 1.5. Браузер умножит этот коэффициент на текущий размер шрифта, и интервал будет корректно масштабироваться вместе с текстом. Если задать line-height в пикселях для разных размеров, крупные заголовки могут получить слишком плотный ритм, а мелкие подписи — чрезмерно разреженный.

Шкала размеров помогает отличать роли текста не случайно, а по понятной логике. Обычно в ней есть подпись, малый текст, основной текст, подзаголовок, заголовок и крупный дисплейный уровень. Не обязательно использовать много ступеней: для небольшого сайта достаточно нескольких значений, если они покрывают реальные сценарии. Сначала назначьте размеры ролям, затем проверьте их на длинных русскоязычных словах и заголовках.

Практический пример шкалы: --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.75rem; --text-2xl: 2.5rem. Далее роли могут выглядеть так: основной текст использует --text-md, лид — --text-lg, заголовок второго уровня — --text-xl, главный заголовок — --text-2xl. Названия ролей не должны зависеть от конкретного HTML-тега, потому что один и тот же визуальный уровень может встречаться в разных компонентах.

Для плавного изменения размера между мобильным и широким экраном подходит функция clamp(). Она принимает минимальное, предпочтительное и максимальное значение. Например: --heading-size: clamp(2rem, 1.2rem + 3vw, 4rem). Заголовок не станет меньше 2rem и не превысит 4rem, а между этими границами будет зависеть от ширины окна. Такой подход уменьшает количество резких скачков и отдельных медиазапросов.

Размер шрифта не существует отдельно от line-height и ширины текстового блока. Для обычного текста обычно нужен более свободный интервал, чем для крупного заголовка, поскольку мелкие строки сложнее различать визуально. Начните с переменных вроде --leading-tight: 1.15; --leading-normal: 1.5; --leading-loose: 1.7, а затем проверяйте их на реальном контенте. Одновременно ограничивайте ширину абзаца, чтобы строка не становилась чрезмерно длинной.

Вертикальный ритм удобно строить через интервалы, связанные с базовой единицей: --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem. Тогда расстояние между заголовком и абзацем, подписью и полем формы или пунктами списка будет согласованным. Не смешивайте большое количество случайных margin и padding без необходимости.

Семейство шрифта лучше задавать переменной с запасным стеком: --font-body: 'Manrope', Arial, sans-serif; --font-display: 'Cormorant Garamond', Georgia, serif. Если основной шрифт не загрузился, браузер использует следующий доступный вариант. Для насыщенности создайте понятные токены: --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700. Используйте только те начертания, которые действительно подключены, иначе браузер может синтезировать жирность.

Если шрифт подключается через @font-face, проверьте соответствие файла и значения font-weight. Файл с обычным начертанием не следует объявлять как 700 только ради визуального эффекта. Для вариативных шрифтов можно использовать диапазон веса, но значения всё равно стоит ограничить ролями системы, чтобы дизайн не стал непредсказуемым.

Ниже — компактная основа, которую можно адаптировать под сайт: :root { --font-body: Arial, sans-serif; --font-display: Georgia, serif; --size-sm: 0.875rem; --size-md: 1rem; --size-lg: 1.25rem; --size-xl: clamp(1.75rem, 1.2rem + 2vw, 3rem); --size-2xl: clamp(2.25rem, 1.4rem + 4vw, 5rem); --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.15; --leading-normal: 1.5; --text-body-size: var(--size-md); --text-heading-size: var(--size-xl); } body { font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--leading-normal); } h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); } h1 { font-size: var(--size-2xl); } h2 { font-size: var(--text-heading-size); }

Главное преимущество CSS custom properties проявляется при создании тем. Глобальная структура компонентов может оставаться прежней, а значения смысловых токенов меняются в селекторе темы. Например, .theme-dark { --text-main-color: #f4f5f7; --text-muted-color: #a8afba; --surface-color: #17191d; }. Основной текст и подписи, использующие эти переменные, автоматически получают новые цвета без дублирования правил.

По такому же принципу можно сделать компактный режим с уменьшенными размерами или версию для печати. Однако не стоит менять все значения без проверки: слишком маленький текст, чрезмерно плотный line-height или недостаточный контраст ухудшат восприятие. Тема должна переопределять смысловые токены, а не заставлять каждый компонент знать детали конкретной цветовой схемы или шрифта.

Нет, переменная нужна там, где значение повторяется или является частью правила системы. Для уникального декоративного элемента обычное CSS-значение может быть понятнее. Начните с ролей, которые встречаются регулярно: основной текст, заголовки, подписи, кнопки и ссылки.

Для системной типографики обычно удобен rem, потому что он связан с размером корневого элемента и позволяет строить последовательную шкалу. px тоже допустим, если проект требует точного значения. Важнее не само единичное решение, а единообразие и проверка результата на разных экранах.

Да. Пользовательские свойства существуют в браузере во время выполнения, поэтому их можно переопределить у document.documentElement или отдельного элемента. Это применяют для переключения тем, изменения масштаба интерфейса и пользовательских настроек, если такие функции предусмотрены дизайном.

Начните с безразмерного коэффициента и оцените абзацы, списки и заголовки на реальном русском контенте. Основному тексту обычно требуется более свободный интервал, чем крупному заголовку. Итоговое значение зависит от гарнитуры, размера, длины строки и плотности макета.

Да, если одна гарнитура уверенно работает в заголовках, основном тексте и интерфейсе. Второе семейство добавляют осознанно: например, для дисплейных заголовков или технических данных. Чем больше гарнитур и начертаний, тем сложнее удерживать визуальную иерархию и контролировать загрузку.

Проверьте её на нескольких типах страниц и на контенте разной длины. Заголовки должны быстро отличаться по роли, абзацы — сохранять комфортную плотность, а подписи — не теряться. Если для каждого нового блока приходится вручную придумывать размер, шкала нуждается в пересмотре.

CSS-переменные превращают набор типографических правил в управляемую систему: базовые значения описывают ресурсы, смысловые токены задают роли, а компонентные переменные уточняют локальные сценарии. Начните с небольшого набора шрифтов, размеров, line-height и интервалов, затем проверьте его на реальном контенте и разных экранах. Если вы ещё выбираете визуальный характер проекта, создайте собственный шрифт на fontgenerator.ru и заложите его в основу типографической системы.