Размер текста (text-size)link

https://dev.ru.simai.io/ru/ui/utility/typography/text-size.php

Количество поддерживаемых размеров шрифта уменьшилось с 13 до 12, а также обновлены соответствующие переменные и классы. Данные модификаторы изменяют размер шрифта и высоту строки одновременно.

Таблица классовlink

Класс Свойства
.text-1/4 font-size: var(--sf-text--size-1/4);
line-height: var(--sf-text--height-1/4);
.text-1/3 font-size: var(--sf-text--size-1/3);
line-height: var(--sf-text--height-1/3);
.text-1/2 font-size: var(--sf-text--size-1/2);
line-height: var(--sf-text--height-1/2);
.text-1 font-size: var(--sf-text--size-1);
line-height: var(--sf-text--height-1);
.text-2 font-size: var(--sf-text--size-2);
line-height: var(--sf-text--height-2);
.text-3 font-size: var(--sf-text--size-3);
line-height: var(--sf-text--height-3);
.text-4 font-size: var(--sf-text--size-4);
line-height: var(--sf-text--height-4);
.text-5 font-size: var(--sf-text--size-5);
line-height: var(--sf-text--height-5);
.text-6 font-size: var(--sf-text--size-6);
line-height: var(--sf-text--height-6);
.text-7 font-size: var(--sf-text--size-7);
line-height: var(--sf-text--height-7);
.text-8 font-size: var(--sf-text--size-8);
line-height: var(--sf-text--height-8);
.text-9 font-size: var(--sf-text--size-9);
line-height: var(--sf-text--height-9);
.text-10 font-size: var(--sf-text--size-10);
line-height: var(--sf-text--height-10);
.text-11 font-size: var(--sf-text--size-11);
line-height: var(--sf-text--height-11);
.text-12 font-size: var(--sf-text--size-12);
line-height: var(--sf-text--height-12);

Примечание: Ранее существовал класс text-13, но теперь максимально доступный размер — text-12.

Пример использованияlink

Текст меньше базового размера:link

<p class="text-1/4">Очень мелкий текст</p>
<p class="text-1/3">Меньше базового</p>
<p class="text-1/2">Почти базовый</p>

Базовый размер текста:link

<p class="text-1">Базовый размер текста</p>

Текст больше базового размера:link

<p class="text-2">Чуть больше базового</p>
<p class="text-3">Ещё крупнее</p>
<p class="text-12">Максимальный размер текста</p>

Адаптивностьlink

Для установки размера шрифта начиная с определённой контрольной точки (sm, md, lg, xl) добавьте префикс. Например:

<p class="md:text-2">Этот текст станет размером text-2 начиная с размера экрана md</p>