Фронтенд как система,а не набор размеров

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

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

Для плавного масштабирования используем линейную зависимость:

размер = A + B * vw

• A — базовый размер, минимальный на маленьком экране
• B — коэффициент роста, показывающий, насколько размер увеличивается с ростом ширины

После расчёта коэффициенты применяются ко всем элементам через миксины.

• Минимальный размер шрифта: 16px
• Максимальный размер шрифта: 24px
• Минимальная ширина контейнера: 390px
• Максимальная ширина контейнера: 1440px

1vw:

• 390 → 3.9px
• 1440 → 14.4px

Ищем A и B в формуле:

A + B * vw = размер

Система уравнений:

• A + 14.4B = 24
• A + 3.9B = 16

Вычитаем первое уравнение из второго:

• (A + 14.4B) − (A + 3.9B) = 24 − 16
• 14.4B − 3.9B = 8
• 10.5B = 8
• B ≈ 0.762

Подставляем:

• A = 16 − 3.9 × 0.762 ≈ 13.026

Итог:

clamp(16px, calc(13.026px + 0.762vw), 24px)

// В начале _mixin.scss или любого SCSS-файла
@use 'sass:math';
@mixin fluid-font($min-size, $max-size, $min-screen, $max-screen) {
$b: math.round((($max-size - $min-size) / ($max-screen - $min-screen)) * 100 * 100) / 100;
$a: math.round(($min-size - (($min-screen * ($max-size - $min-size)) / ($max-screen - $min-screen))) * 100) / 100;
font-size: clamp(#{$min-size}px, calc(#{$a}px + #{$b}vw), #{$max-size}px);
}
// Пример использования
h1 {
@include fluid-font(16, 24, 390, 1440);
}

Плавный расчёт через clamp() хорошо подходит для основного текста, обычных заголовков на сайте и отступов. В этих случаях размеры могут меняться свободно, без жёсткой привязки к конкретным ширинам, и интерфейс остаётся стабильным.

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