Дмитрий Яковлев

Вертикальный ритм и модульная шкала средствами CSS

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

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

  • повторяющиеся интервальные паттерны;
  • прогнозируемые пропорциональные соотношения;
  • визуально согласованную иерархию контента.

Всё это необходимо учитывать при создании гибкой и масштабируемой дизайн-системы. Поэтому предлагаю разобрать в том, что есть что, и как это использовать на практике.

Основа дизайн-системы: вертикальный ритм и модульная шкала

Вертикальный ритм

Вертикальный ритм — это концепция, при которой все элементы на странице выравниваются по невидимой сетке, создавая равномерные вертикальные отступы, кратные единой базовой величине.

Вертикальный ритм в веб-дизайне берёт начало в традициях книжной типографики и связан с такими понятия, как:

  • базовая линия — воображаемая линия, на которой располагается основная часть символов текста;
  • интерлиньяж — строго фиксированное расстояние между базовыми линиями смежных строк;
  • вертикальный поток — повторяющийся паттерн пространственных отношений.

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

Модульная шкала

Модульная шкала — это система пропорциональных соотношений размеров, основанная на геометрической прогрессии с фиксированным коэффициентом. Формально модульная шкала определяется следующим уравнением:

sₙ = s₀ × rⁿ

, где:

  • s₀ — базовый размер;
  • r — коэффициент пропорции;
  • n — порядковый номер шага шкалы.

Большинство шкал основаны на музыкальных интервалах и классических типографских пропорциях. Всем знакомое “золотое сечение”, с коэффициентом пропорции 1.618, использовалось ещё в античной архитектуре.

Вот некоторые из шкал с их традиционными названиями и математическими соотношениями:

  1. Минорная секунда (Minor Second): 1.067;
  2. Мажорная секунда (Major Second): 1.125;
  3. Минорная терция (Minor Third): 1.200;
  4. Мажорная терция (Major Third): 1.250;
  5. Чистая кварта (Perfect Fourth): 1.333;
  6. Увеличенная кварта (Augmented Fourth): 1.414;
  7. Чистая квинта (Perfect Fifth): 1.500;
  8. Минорная секста (Minor Sixth): 1.600;
  9. Золотое сечение (Golden Ratio): 1.618.

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

КоэффициентМатематическое соотношениеОбласть применения
1.2505:4 (большая терция)Техническая документация
1.3334:3 (чистая кварта)Веб-интерфейсы
1.414√2 (увеличенная кварта)Полиграфический дизайн, ISO 216
1.5003:2 (чистая квинта)Мобильные приложения
1.618φ (золотое сечение)Премиальные брендинговые решения

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

  1. Контент-ориентированные проекты (блоги, новостные сайты):
    • чистая кварта (1.333) или минорная терция (1.200);
  2. Корпоративные интерфейсы:
    • мажорная терция (1.250) или мажорная секунда (1.125);
  3. Креативные и маркетинговые сайты:
    • золотое сечение (1.618) или чистая квинта (1.500);
  4. Мобильные приложения:
    • мажорная секунда (1.125) для экономии пространства.

Главное, что надо понять при выборе шкалы: чем больше коэффициент пропорции в выбранной шкале, тем больше и контрастнее разница в размере соседних ступеней шкалы.

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

Реализация вертикального ритма и модульной шкалы средствами CSS

Основная идея создания дизайн-системы для соблюдения вертикального ритма и использования модульной шкалы складывается из следующих этапов:

  1. Задание базового размер шрифта и базовой высоты линии;
  2. Определение шкалы для размеров шрифта (типографическая шкала) с использованием модульной шкалы;
  3. Определение вертикальных отступов, кратных базовой линии.

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

Базовые CSS-переменные

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

:root {
  /* --- Базовые настройки --- */
  /* Базовый размер шрифта */
  --base-font-size: 16px;
  /* Базовая высоты строки */
  --base-line-height: 1.5;
  /* Коэффициент масштабирования */
  --scale-ratio: 1.25;
  /* --- Вычисления --- */
  /* Базовая единица отступа для создания вертикального ритма (padding, margin) */
  --rhythm-unit: calc(var(--base-font-size) * var(--base-line-height));
  /* Размеры шрифтов модульной шкалы */
  --font-size-xs: calc(var(--base-font-size) * pow(var(--scale-ratio), -2));
  --font-size-s: calc(var(--base-font-size) * pow(var(--scale-ratio), -1));
  --font-size-m: var(--base-font-size);
  --font-size-l: calc(var(--base-font-size) * pow(var(--scale-ratio), 1));
  --font-size-xl: calc(var(--base-font-size) * pow(var(--scale-ratio), 2));
  --font-size-xxl: calc(var(--base-font-size) * pow(var(--scale-ratio), 3));
  --font-size-xxxl: calc(var(--base-font-size) * pow(var(--scale-ratio), 4));
}

Настройка дизайн-системы выполняется путём изменения значений переменных --base-font-size, --base-line-height и --scale-ratio. В результате вычислений для дальнейшей работы доступна базовая единица отступа для создания вертикального ритма и семь размеров шрифтов, составляющих типографическую шкалу.

Базовое использование CSS-переменных

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

body {
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  margin: 0;
  padding: 0;
}
h1 {
  font-size: var(--font-size-xxxl);
  line-height: calc(4 * var(--rhythm-unit));
  margin: calc(var(--rhythm-unit)) 0 calc(3 * var(--rhythm-unit)) 0;
}
h2 {
  font-size: var(--font-size-xxl);
  line-height: calc(2 * var(--rhythm-unit));
  margin: calc(var(--rhythm-unit)) 0 var(--rhythm-unit) 0;
}
h3 {
  font-size: var(--font-size-xl);
  line-height: calc(2 * var(--rhythm-unit));
  margin: calc(var(--rhythm-unit)) 0 var(--rhythm-unit) 0;
}
p {
  margin: 0 0 var(--rhythm-unit) 0;
}

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

:root{
  /* Множители для вертикального ритма (padding, margin) */
  --rhythm-half: calc(var(--rhythm-unit) / 2);
  --rhythm-quarter: calc(var(--rhythm-unit) / 4);
  --rhythm-double: calc(var(--rhythm-unit) * 2);
}

Можно добавить классы для задания отступов для вертикального ритма:

/* Утилитарные классы для отступов, соответствующие вертикальному ритму */
.rhythm-margin {
  margin: var(--rhythm-unit) 0;
}
.rhythm-margin-half {
  margin: var(--rhythm-half) 0;
}
.rhythm-margin-double {
  margin: var(--rhythm-double) 0;
}
.rhythm-padding {
  padding: var(--rhythm-unit) 0;
}
.rhythm-padding-half {
  padding: var(--rhythm-half) 0;
}
.rhythm-padding-double {
  padding: var(--rhythm-double) 0;
}

Можно изменять и масштабировать CSS-код, основываясь на базовых переменных, гибко подстраиваясь под требования и объём проекта.

Как соблюдать вертикальный ритм

Основной прицип: суммарная высота элемента (контент + padding + border + margin) должна быть кратна базовой единице отступа.

Если для элемента заданы горизонтальные границы, их толщину надо обязательно вычесть из высоты отступа (padding или margin).

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

Для соблюдения визуального однообразия я могу порекомендовать использовать увеличенные отступы межды разными типами контента (--rhythm-double), отступ базовой величины между однотипными элементами (-rhythm-unit) и уменьшенный отступ внутри групп элементов (-rhythm-half).

Адаптивность

Для разных устройств, с разными размерами и разрешением экранов, требуется подстройка вертикального ритма или модульной шкалы. Благодаря тому, что дизайн-система настраивается при помощи трёх базовых переменных, достаточно изменить их значения, в зависимости от условий просмотра страницы. Например, при помощи медиа-запросов:

@media (max-width: 768px) {
  :root {
    --base-font-size: 14px;
    --scale-ratio: 1.125;
  }
}

Создание отладочной сетки для вертикального ритма средствами CSS

С целью визуальной проверки соблюдения вертикального ритма, можно прибегнуть к использованию отладочной сетки.

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

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

/* Отладочная сетка вертикального ритма */
body {
  position: relative;
}
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rhythm-unit) - 1px),
    brown calc(var(--rhythm-unit) - 1px),
    brown var(--rhythm-unit)
  );
  background-size: 100% var(--rhythm-unit);
  background-position: 0 0;
}

В этом коде используется переменная --rhythm-unit из базовой части дизайн-системы, она определяет высоту базовых линий. Для настройки отладочной сетки вы можете изменить цвет (по умолчанию brown) и толщину (по умолчанию 1px) линий.

Пример использования вертикального ритма и модульной шкалы с контролем через отладочную сетку

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