Ну что же добро пожаловать в будущее. 4 июня 2026 в спецификации CSS Text Module Level 5 появилось новое CSS-свойство text-fit, которое автоматически масштабирует размер шрифта, чтобы текст идеально соответствовал ширине его блока.

А Chrome 150 уже внедрил к себе реализацию, так что уже можно попробовать.

Обновите Хром если ещё нет и продолжите чтение статье, так как все примеры в статье будут работать только начиная от 150 версии Хрома.

Сразу пример

Заголовок

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

На данный момент для такого эффекта нужно, либо написать кучу JS-кода, либо заменить его на кучу современного CSS-кода. В общем, так или иначе потребуется кучка кода, неважно какого. Новая же CSS-фича позволяет это сделать за одну строчку:

.title {
  text-fit: grow;
}

Другие значения text-fit

У text-fit есть несколько значений и модификаторов:

• none — браузер не масштабирует строчные элементы под ширину строки.
• grow — браузер увеличивает текст, чтобы он занял доступную ширину строки.
• shrink — браузер уменьшает текст, чтобы он поместился в строку.
• consistent — все строки внутри контейнера масштабируются с одним коэффициентом. Если не указать consistent, per-line или per-line-all, браузер считает, что выбрано именно consistent.
• per-line — каждая строка получает свой коэффициент масштабирования, но последняя строка блока и строки с принудительным переносом не масштабируются.
• per-line-all — каждая строка получает свой коэффициент масштабирования, включая последнюю строку и строки с принудительным переносом.
• <percentage> — ограничивает коэффициент масштабирования. Для grow значение от 100% задаёт максимум увеличения, для shrink значение от 0% до 100% задаёт минимум уменьшения.

none

Значение none отключает автоматическое масштабирование. Если текст шире блока, он просто переполнит строку.

.title {
  text-fit: none;
}

Очень длинный заголовок

grow

Значение grow увеличивает текст, если в строке есть свободное место.

.title {
  text-fit: grow;
}

Заголовок

shrink

Значение shrink уменьшает текст, если он не помещается в строку.

.title {
  text-fit: shrink;
}

Очень длинный заголовок

consistent

Значение consistent заставляет все строки использовать один общий коэффициент масштабирования. Поэтому короткие строки не разгоняются сильнее длинных.

.text {
  text-fit: grow consistent;
}

Первая строка заметно длиннее остальных строк
короткая строка
ещё одна короткая

per-line

Значение per-line масштабирует каждую строку отдельно, но не трогает последнюю строку и строки с принудительным переносом.

.text {
  text-fit: grow per-line;
}

Первая строка может вырасти сильнее соседней вторая строка тоже получает свой размер последняя строка остаётся как есть

per-line-all

Значение per-line-all похоже на per-line, но масштабирует вообще все строки, включая последнюю и строки с принудительным переносом.

.text {
  text-fit: grow per-line-all;
}

Первая строка может вырасти сильнее соседней вторая строка тоже получает свой размер последняя строка теперь тоже растёт

<percentage>

Процент задаёт предел масштабирования. Например, grow 140% разрешает тексту увеличиться максимум до 140% от исходного размера.

.title {
  text-fit: grow 140%;
}

Заголовок

А shrink 70% разрешает тексту уменьшиться максимум до 70% от исходного размера.

.title {
  text-fit: shrink 70%;
}

Очень длинный заголовок

Источники

• Спецификация CSS Text Module Level 5