Как сделать адаптивный размер шрифта

Короткий ответ

clamp() задаёт минимум, желаемое значение и максимум. Меняйте ширину окна:

<h1 style="font-size: clamp(1.5rem, 1rem + 4vw, 3rem); margin: 0;">Fresh coffee every day</h1>

Заголовок не меньше 1.5rem на телефоне, не больше 3rem на большом мониторе, а между ними плавно растёт вместе с шириной окна.

Почему rem + vw

Если написать только 4vw, размер полностью зависит от окна и перестаёт меняться при масштабировании страницы — это плохо для людей, которые увеличивают текст. Добавка 1rem сохраняет связь с настройками браузера.

Шкала для всех заголовков

Удобно завести переменные и использовать их по всему сайту:

:root {
  --step-1: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.1rem + 1.5vw, 2rem);
}
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

Частая ошибка

Основной текст тоже делают «резиновым» через vw, и на широком мониторе он становится огромным, а на телефоне — мелким. Для абзацев обычно хватает постоянного 1rem, а clamp() оставьте заголовкам.