Межстрочный интервал

В библиотеке Vuetify управление межстрочным интервалом тесно связано с системой типографики, встроенной в фреймворк, и с возможностями CSS. Межстрочный интервал (line-height) влияет на читаемость текста, визуальную плотность контента и гармоничное распределение элементов на странице.

Использование встроенных классов типографики

Vuetify предоставляет предопределённые классы, которые позволяют быстро управлять размерами текста и межстрочными интервалами без написания дополнительных CSS-правил. Основные классы для текста включают:

  • text-h1 … text-h6 – заголовки с соответствующими размерами и базовыми межстрочными интервалами.
  • subtitle-1, subtitle-2 – подзаголовки среднего уровня.
  • body-1, body-2 – основной текст.

Каждый из этих классов автоматически применяет оптимальный межстрочный интервал, который рассчитывается исходя из высоты шрифта (font-size) и рекомендаций Material Design.

<p class="body-1">
  Это пример текста с использованием класса body-1. Межстрочный интервал уже настроен под оптимальную читаемость.
</p>
<p class="body-2">
  Класс body-2 применяет немного меньший шрифт и соответственно другой межстрочный интервал.
</p>

Прямое управление межстрочным интервалом через утилиты

Vuetify 2 и 3 предоставляют CSS-утилиты для управления line-height через классы:

  • lh-1, lh-2, lh-3 … – задают стандартные кратные значения межстрочного интервала.
  • lh-sm, lh-md, lh-lg – обозначают малый, средний и большой интервал соответственно.
<p class="body-1 lh-lg">
  Этот текст имеет увеличенный межстрочный интервал для улучшенной читаемости.
</p>
<p class="body-2 lh-sm">
  Этот текст сжатый, используется там, где нужно разместить больше контента в ограниченном пространстве.
</p>

Использование style и v-bind для динамических значений

Для более гибкого контроля можно использовать встроенный атрибут style или привязку v-bind:style. Это особенно полезно, если требуется динамическая настройка межстрочного интервала в зависимости от состояния компонента.

<template>
  <v-container>
    <v-row>
      <v-col>
        <p :style="{ lineHeight: dynamicLineHeight + 'em' }">
          Текст с динамически изменяемым межстрочным интервалом
        </p>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      dynamicLineHeight: 1.8
    };
  }
}
</script>

Влияние на компоненты Vuetify

Межстрочный интервал влияет не только на текстовые блоки, но и на поведение компонентов:

  • v-btn и v-card-title – увеличение межстрочного интервала помогает выравнивать текст внутри кнопок и заголовков карт.
  • v-list-item – текст с адекватным интервалом делает списки более читаемыми, особенно при длинных описаниях.
  • v-data-table – line-height корректирует вертикальное распределение строк таблицы, улучшая визуальное восприятие больших наборов данных.

Совмещение с типографикой и отступами

Для точной настройки дизайна рекомендуется использовать межстрочный интервал вместе с отступами (padding и margin), чтобы обеспечить гармоничное распределение элементов. Например, для блоков с большим количеством текста:

<v-card class="pa-4">
  <v-card-text class="body-1 lh-lg">
    Длинный текст в карточке. Увеличенный межстрочный интервал повышает читаемость и делает блок визуально лёгким.
  </v-card-text>
</v-card>

Настройка через SASS-переменные

Для глобальной настройки межстрочного интервала можно использовать переменные SASS Vuetify. В Vuetify 2 они находятся в файле variables.scss:

$body-line-height: 1.6 !default;
$heading-line-height: 1.25 !default;

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

Итоговые рекомендации по работе с межстрочным интервалом

  • Для стандартного текста использовать предопределённые классы body-1, body-2.
  • Для усиленной читаемости длинных текстов применять lh-lg или динамическое значение через v-bind:style.
  • В компонентах с ограниченным пространством (v-btn, v-list-item) можно уменьшать интервал с помощью lh-sm.
  • Для глобальной типографики — настраивать SASS-переменные $body-line-height и $heading-line-height.

Эти подходы обеспечивают гибкость и единообразие интерфейса, позволяя точно управлять визуальной структурой текста в приложениях на Vuetify.

Оглавление