CSS единицы измерения lh и rlh

Единица измерения lh

CSS единица измерения lh представляет вычисленный line-height элемента. Если у элемента line-height: 1.5, то 1lh равно этому вычисленному значению. Это создаёт прямую связь между текстом и измерениями расстояния между строками.

/* Традиционный подход с магическими числами */
.spacing-old {
  margin-top: 24px;
  padding-bottom: 48px;
}

/* Использование lh для создания точных интервалов в тексте */
.spacing-new {
  margin-top: 1lh;
  padding-bottom: 2lh;
}

Поля формы часто содержат текст разного размера (метки, поля ввода, сообщения об ошибках). Единицы измерения lh автоматически регулируют интервалы в зависимости от размера текста, сохраняя визуальную гармонию даже при увеличении/уменьшении масштаба текста. Если поле формы содержит текст большего размера, расстояние между ними пропорционально увеличивается.

/* Разметка формы - соблюдение единого расстояния между полями */
.form-field {
  margin-bottom: 1lh;
}

Карточки могут содержать большое количество текста разного размера (заголовки, описания, метаданные). CSS единицы измерения lh обеспечивают поля и отступы между элементами пропорционально размеру текста. Это позволяет избежать появления ненужных отступов при переносе текста или динамическом изменении содержимого карточки.

/* Компоненты карточки - соблюдение пропорционального расстояния между текстовыми блоками */
.card-content {
  padding: 1lh;
  gap: 0.5lh;
}

Текст статьи часто изменяет размер при разных размерах экрана. Единица измерения lh сохраняет правильное соотношение интервалов между заголовками и абзацами при изменении размера текста. Это очень важно для удобства чтения — при увеличении или уменьшении размера текста пробелы изменяются пропорционально.

/* Разметка статей - создание ритма между абзацами и заголовками */
.article h2 {
  margin-top: 2lh;
}

.article p {
  margin-bottom: 1lh;
}

Единица измерения rlh

CSS единица измерения rlh отличается тем, что всегда ссылается на line-height корневого элемента (:root). Это обеспечивает согласованность во всём документе, независимо от того, где применяется. Это делает её ценной для глобальных шаблонов интервалов.

:root {
  line-height: 1.5;
}

.global-spacing {
  --space-unit: 1rlh;
  margin-block: var(--space-unit);
  gap: var(--space-unit);
}

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

Это предотвращает распространённую проблему, когда разные размеры текста в компонентах создают несогласованные отступы и поля.

При изменении высоты строки корневого элемента все интервалы пропорционально изменяются, сохраняя визуальную согласованность.

:root {
  line-height: 1.5;
}

/* Согласованные отступы между компонентами */
.layout-grid {
  gap: 1rlh;
  padding: 2rlh;
}

/* Отступы между секциями */
.section {
  margin-block: 3rlh;
}

В навигационных элементах часто сочетаются разные размеры текста — например, логотип рядом с элементами навигации. Использование rlh позволяет сохранить расстояние между элементами независимо от стиля текста.

Единицы измерения rlh предотвращает неравномерное расположение элементов навигации при изменении размера текста. Интервалы остаются привязанными к высоте строки корневого элемента, создавая стабильную визуальную структуру.

.nav {
  /* Согласованные отступы заголовка */
  height: 4rlh;
  padding-block: 1rlh;
}

.nav-items {
  gap: 1rlh;
}

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

:root {
  line-height: 1.5;
}

.global-spacing {
  --space-unit: 1rlh;
  margin-block: var(--space-unit);
  gap: var(--space-unit);
}

Это означает, что все элементы могут быть привязаны к единой базовой сетке, создавая гармоничный поток. При изменении размеров текста сетка остаётся стабильной, потому что она привязана к корневому элементу, а не к отдельным элементам.

Выбор между lh и rlh

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

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

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

Комментарии