Классы line-* задают высоту строки. Именованные значения (line-tight,
line-relaxed …) — множитель от размера шрифта, числовые (line-1 …
line-12) — ступень шкалы текста. Берите их, чтобы сделать текст плотнее в
заголовках и свободнее в длинных абзацах.
Пример
Множитель
Множитель растёт вместе с размером шрифта. Фон показывает высоту строк.
HTML
<divclass="grid grid-col-1 sm:grid-col-2 gap-3 color-on-surface">
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">line-none</code>
<pclass="m-0 text-2 bg-primary-container color-on-primary-container line-none">Высота строки задаёт расстояние между базовыми линиями соседних строк. Плотный текст экономит место, свободный легче читать в длинных абзацах.</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">line-tight</code>
<pclass="m-0 text-2 bg-primary-container color-on-primary-container line-tight">Высота строки задаёт расстояние между базовыми линиями соседних строк. Плотный текст экономит место, свободный легче читать в длинных абзацах.</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">line-snug</code>
<pclass="m-0 text-2 bg-primary-container color-on-primary-container line-snug">Высота строки задаёт расстояние между базовыми линиями соседних строк. Плотный текст экономит место, свободный легче читать в длинных абзацах.</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">line-normal</code>
<pclass="m-0 text-2 bg-primary-container color-on-primary-container line-normal">Высота строки задаёт расстояние между базовыми линиями соседних строк. Плотный текст экономит место, свободный легче читать в длинных абзацах.</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">line-relaxed</code>
<pclass="m-0 text-2 bg-primary-container color-on-primary-container line-relaxed">Высота строки задаёт расстояние между базовыми линиями соседних строк. Плотный текст экономит место, свободный легче читать в длинных абзацах.</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">line-loose</code>
<pclass="m-0 text-2 bg-primary-container color-on-primary-container line-loose">Высота строки задаёт расстояние между базовыми линиями соседних строк. Плотный текст экономит место, свободный легче читать в длинных абзацах.</p>
</div>
</div>
Шкала
Ступень шкалы задаёт высоту строки, которая не зависит от размера шрифта.
HTML
<divclass="grid grid-col-2 sm:grid-col-3 gap-3 color-on-surface">
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">line-1/2</code>
<pclass="m-0 text-1 bg-primary-container color-on-primary-container line-1/2">Две строки текста одного размера с разной высотой строки по шкале</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">line-1</code>
<pclass="m-0 text-1 bg-primary-container color-on-primary-container line-1">Две строки текста одного размера с разной высотой строки по шкале</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">line-2</code>
<pclass="m-0 text-1 bg-primary-container color-on-primary-container line-2">Две строки текста одного размера с разной высотой строки по шкале</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">line-4</code>
<pclass="m-0 text-1 bg-primary-container color-on-primary-container line-4">Две строки текста одного размера с разной высотой строки по шкале</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">line-6</code>
<pclass="m-0 text-1 bg-primary-container color-on-primary-container line-6">Две строки текста одного размера с разной высотой строки по шкале</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">line-8</code>
<pclass="m-0 text-1 bg-primary-container color-on-primary-container line-8">Две строки текста одного размера с разной высотой строки по шкале</p>
</div>
</div>
Ширина экрана
Меняйте ширину окна просмотра: начиная с ширины md строки становятся
свободнее.
HTML
<divclass="flex flex-col gap-3 color-on-surface">
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">line-tight md:line-loose</code>
<pclass="m-0 text-2 bg-primary-container color-on-primary-container line-tight md:line-loose">Высота строки задаёт расстояние между базовыми линиями соседних строк. Плотный текст экономит место, свободный легче читать в длинных абзацах.</p>
</div>
</div>
Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:line-1/4.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.
Переменная
Значение по умолчанию
--sf-text--height-1/4
0.75rem; от ширины lg: var(--sf-b2)
--sf-text--height-1/3
1rem; от ширины lg: var(--sf-b6)
--sf-text--height-1/2
1rem; от ширины lg: 1.25rem
--sf-text--height-1
var(--sf-c0); от ширины lg: var(--sf-c2)
--sf-text--height-2
var(--sf-c2); от ширины lg: var(--sf-c4)
--sf-text--height-3
var(--sf-c2); от ширины lg: var(--sf-c8)
--sf-text--height-4
var(--sf-c4); от ширины lg: var(--sf-d0)
--sf-text--height-5
var(--sf-c6); от ширины lg: var(--sf-d2)
--sf-text--height-6
var(--sf-c8); от ширины lg: var(--sf-d3)
--sf-text--height-7
var(--sf-d0); от ширины lg: var(--sf-d5)
--sf-text--height-8
var(--sf-d2); от ширины lg: var(--sf-d8)
--sf-text--height-9
var(--sf-d3); от ширины lg: var(--sf-e0)
--sf-text--height-10
var(--sf-d5); от ширины lg: var(--sf-e2)
--sf-text--height-11
var(--sf-d6); от ширины lg: var(--sf-e3)
--sf-text--height-12
var(--sf-d8); от ширины lg: var(--sf-e5)
--sf-text-height-1/4
var(--sf-text--height-1\/4)
--sf-text-height-1/3
var(--sf-text--height-1\/3)
--sf-text-height-1/2
var(--sf-text--height-1\/2)
--sf-text-height-1
var(--sf-text--height-1)
--sf-text-height-2
var(--sf-text--height-2)
--sf-text-height-3
var(--sf-text--height-3)
--sf-text-height-4
var(--sf-text--height-4)
--sf-text-height-5
var(--sf-text--height-5)
--sf-text-height-6
var(--sf-text--height-6)
--sf-text-height-7
var(--sf-text--height-7)
--sf-text-height-8
var(--sf-text--height-8)
--sf-text-height-9
var(--sf-text--height-9)
--sf-text-height-10
var(--sf-text--height-10)
--sf-text-height-11
var(--sf-text--height-11)
--sf-text-height-12
var(--sf-text--height-12)
В CSS косую черту в имени экранируют: var(--sf-text--height-1\/4).
Применение
Класс
Множитель
Где
line-none
1
одна строка: значки, цифры, кнопки
line-tight
1,25
крупные заголовки
line-snug
1,375
подзаголовки
line-normal
1,5
обычный текст
line-relaxed
1,625
длинные абзацы
line-loose
2
редкий текст, подписи с запасом
Класс размера text-* задаёт высоту строки вместе с размером. Ступень
line-* с тем же номером даёт ту же высоту строки, что у text-*.
HTML
<h1class="text-10 line-tight">Заголовок в несколько строк</h1>
<pclass="line-relaxed measure">Длинный абзац статьи…</p>
Ограничения
text-* и line-* задают line-height в одном слое каскада, и при
равной специфичности побеждает правило, которое подключено позже. Для
заголовков с плотной строкой надёжнее title-* или text-* heading.
У шкалы есть совпадающие ступени: line-1/3 и line-1/2, line-2 и
line-3 дают одинаковую высоту строки.
