Текст по умолчанию

Ядро оформляет текст ещё до того, как на нём появился класс: body берёт шрифт, кегль и высоту строки из переменных, абзацы и списки получают нижний отступ, заголовки h1–h6 — свою роль. Чтобы изменить текст во всём проекте, меняйте эти переменные, а не правила элементов.

Когда применять

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

Переменные текста

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

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

Кегль и высота строки адаптивны: --sf-text--size-1 и --sf-text--height-1 сами меняются с шириной экрана, поэтому текст без классов растёт на широком экране без условий в разметке.

Отступы текста

Абзацы, списки, таблицы, цитаты и заголовки отбиваются друг от друга переменными интервалов. Значения ступеней — в разделе «Интервалы».

--sf-text--space-bottom и --sf-heading--space-bottom равны --sf-content--space-text, а --sf-heading--space-top — --sf-content--space-section: перед заголовком раздела отступ крупнее, чем между абзацами.

Роли текста

Роль задаёт кегль и высоту строки одним классом. Заголовки h1–h6 получают роль без класса, остальные роли ставятся классом.

Полные классы .sf-… ставят ещё семейство и вес: заголовки — переменные заголовков, крупные надписи — переменные крупных надписей, body и label — семейство текста и вес 400. Классы body вдобавок дают нижний отступ абзаца. Короткие классы — .text-* и .label-* — меняют только кегль и высоту строки, а семейство и вес наследуют от окружения.

Для крупных надписей у ядра есть и короткие имена: .display1 … .display6 и .d1 … .d6 равны .sf-display-1 … .sf-display-6.

Переменные ролей берут значения из общей шкалы:

У ролей нет вариантов с префиксами ширины экрана и состояния. Зависимость от ширины экрана уже заложена в переменные шкалы: заголовки, крупные надписи и body растут на широком экране сами, а подписи label от ширины не зависят.

Пример

Текст без классов и роли текста на одном экране:

<div class="grid grid-col-1 md:grid-col-2 gap-4">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">без классов</code>
    <div class="p-3 radius-surface border border-outline-variant">
      <h3>Заголовок h3</h3>
      <p>Абзац без класса берёт шрифт, кегль и высоту строки у body.</p>
      <p class="m-bottom-0">Следующий абзац отбит нижним отступом предыдущего.</p>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">роли текста</code>
    <div class="p-3 radius-surface border border-outline-variant flex flex-col gap-2">
      <div class="sf-h-5 m-0">sf-h-5</div>
      <div class="text-large">text-large</div>
      <div class="text">text</div>
      <div class="text-small">text-small</div>
      <div class="label-large">label-large</div>
      <div class="label">label</div>
      <div class="label-small">label-small</div>
    </div>
  </div>
</div>

Замена шрифта и веса заголовков во всём проекте — несколько переменных на :root:

:root {
    --sf-text--family: "Golos Text", system-ui, sans-serif;
    --sf-heading--family: "Golos Text", system-ui, sans-serif;
    --sf-display--family: "Golos Text", system-ui, sans-serif;
    --sf-heading--weight: var(--sf-weight--semi-bold);
}

Роль на элементе, который не является заголовком:

<p class="sf-h-4">Подзаголовок карточки</p>
<span class="label-small">Обновлено вчера</span>