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

Vuetify реализует систему типографики, основанную на принципах Material Design, предоставляя набор утилит и компонентов для работы с текстом. Главная цель системы — обеспечить единообразие отображения текста на всех устройствах, соблюдение иерархии заголовков, удобочитаемости и эстетики интерфейса.

Классы типографики

В Vuetify предусмотрены предопределённые классы, которые соответствуют стандартным стилям Material Design:

  • display-4 … display-1 — для крупных заголовков и визуально доминирующих элементов.
  • headline — основной крупный заголовок.
  • title — средний заголовок, подходит для секций и блоков.
  • subheading — подзаголовки и поясняющие тексты.
  • body-1 и body-2 — основной текст, различие в размере и межстрочном интервале.
  • caption — маленький текст для подписей, примечаний.
  • overline — верхний текст, часто используется для категорий или меток.

Использование этих классов обеспечивает согласованность визуальной иерархии и правильное распределение акцентов в интерфейсе.

<v-container>
  <v-row>
    <v-col cols="12">
      <h1 class="display-4">Display 4</h1>
      <h2 class="headline">Headline</h2>
      <h3 class="title">Title</h3>
      <h4 class="subheading">Subheading</h4>
      <p class="body-1">Body 1 текст для основного контента.</p>
      <p class="body-2">Body 2 текст для второстепенной информации.</p>
      <span class="caption">Caption пример подписи</span>
      <span class="overline">Overline пример верхнего текста</span>
    </v-col>
  </v-row>
</v-container>

Компонент v-typography

Vuetify 3 предлагает компонент v-typography, который упрощает работу с текстом и применением стилей Material Design. Он позволяет задавать вариант текста, цвет, выравнивание и другие параметры.

<v-typography
  variant="headline"
  class="text-primary"
  align="center"
>
  Заголовок с цветом и центровкой
</v-typography>

Основные свойства v-typography:

  • variant — определяет размер и вес текста (display-4, headline, title, body-1 и т.д.).
  • align — выравнивание текста (start, center, end, justify).
  • color — цвет текста, можно использовать предопределённые цвета Vuetify (primary, secondary, error и др.).
  • line-height — высота строки, важна для читаемости блоков текста.
  • truncate — сокращение текста с добавлением троеточия при переполнении.

Цвет и контрастность текста

Material Design уделяет большое внимание контрасту текста и фона для удобства чтения и доступности. Vuetify позволяет управлять цветом текста через классы или через свойства компонента:

<p class="text-success">Успешное сообщение</p>
<p class="text-error">Сообщение об ошибке</p>
<v-typography color="warning">Предупреждение</v-typography>

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

Стили текста

Vuetify поддерживает следующие стили текста, которые могут применяться через утилитные классы:

  • text-uppercase — преобразует текст в верхний регистр.
  • text-lowercase — нижний регистр.
  • text-capitalize — капитализация первой буквы каждого слова.
  • font-weight-light | font-weight-regular | font-weight-medium | font-weight-bold — управление жирностью текста.
  • text-truncate — обрезка текста с многоточием.
  • line-clamp — ограничение количества строк текста с автоматическим сокращением.
<p class="text-uppercase font-weight-bold text-truncate">
  Пример длинного текста, который будет обрезан…
</p>

Иерархия заголовков и читабельность

Правильное использование классов типографики обеспечивает естественную визуальную иерархию:

  1. display-4 … display-1 — заголовки страниц, ключевые элементы.
  2. headline и title — заголовки секций.
  3. subheading и body-1 — основной контент.
  4. caption и overline — вспомогательные подписи и метки.

Важно соблюдать контраст и расстояния между блоками текста, используя утилиты Vuetify для отступов (ma-*, pa-*) и межстрочного интервала (line-height).

Работа с адаптивностью

Vuetify учитывает отзывчивость типографики. С помощью классов text-xs-*, text-sm-*, text-md-*, text-lg-* можно изменять размер и стиль текста в зависимости от ширины экрана:

<p class="text-sm-body-1 text-md-body-2 text-lg-title">
  Адаптивный текст, который меняет размер на разных устройствах
</p>

Поддержка локализации и юникода

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

Заключение по использованию

Система типографики Vuetify сочетает в себе:

  • строгое соответствие стандартам Material Design,
  • простое управление стилями через классы и компонент v-typography,
  • адаптивность под разные устройства,
  • поддержку цветов, стилей и доступности текста.

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

Оглавление