Отзывчивый шрифт. Адаптация текста между макетным и минимальным значениями

[hisbvdis]

Вместо своей рекламы, лучше бы хоть один CodePen привели с демонстрацией работы.

Про поддержку браузерами ничего не было сказано.
Поэтому обращу внимание на то, что в современных браузерах (к сожалению, пока что без Safari) уже поддерживается функция «clamp()» и эта задача в некоторой степени решается гораздо проще.
У MDN нет рекламных видео на YouTube, поэтому ограничусь ссылкой на страницу справочника

Ну и пример с демонстрацией работы:

[dom1n1k]

Этот вариант, мягко говоря, не эквивалентен описанному в статье.

[hisbvdis]

Я и не говорил, что это замена.
Упомянул новую интересную функцию

[dom1n1k]

Функция интересная, но:
1. В контексте статьи мало что меняет, поскольку она решает лишь побочную подзадачу (ограничение диапазона), а не основную (управляемое масштабирование).
2. Менее удобна, чем медиа-запрос, потому что из этого выражения совсем не очевидно, при каком размере окна сработает ограничение. Более короткий код не всегда более удобный.
3. Имеет пока неприемлемо слабую поддержку.

[hisbvdis]

Перечитал комментарий.
Да, согласен.
Написал так, будто замена.

[Opaspap]

Можно еще примерно так: font-size: min(12px, max(10vw, 24px))

[dom1n1k]

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

[Eduard07]

SCSS:

@function w($width, $window) {
    @return ($width * 100vw) / $window;
}

Пример: font-size: w(16, 320); где 16 это 16px

[Mark_Harnichev]

Можно избежать костыль:

@media (min-width: 767px){
 h1 {
  font-size: calc(24px + (16 + 16 * 0.7) * ((100vw - 320px) / 1280));
 }
}

простым способом:

{
font-size: calc(24px + 16 * ((100vw - 320px) / (1280 - 320)));
}

Мы тут сразу закрываем проблему с не соответствием шрифта при размере экрана в 320px.

Остается вопрос как ограничивать размер шрифта при увеличения экрана не «костылем».