Адаптивный размер шрифта

Пожалуйста, меняйте ширину viewport!

Недавно я делал личную страничку и мне захотелось сделать её максимально адаптивной. И в первую очередь шрифт, конечно. Естественно, в голову сразу пришёл rem.
Мы выставляем базовый размер шрифта на странице, скажем 14px. И дальше все размеры считаем в процентах от этого значения. Например, если хотим чтобы шрифт кнопки был в 2 раза больше базового - укажем:

.btn {
  font-size: 2rem;
}

Идея проста и понятна. Но мы же хотим адаптивность! Мы хотим, чтобы размер шрифта менялся в зависимости от ширины экрана устройства.
Тут нам на помощь приходят media queries.
В подавляющем большинстве случаев мы сделаем что-то вроде:

@media only screen and (max-width: 600px) {
  .btn {
    font-size: 1.5rem;
  }
}

Но это же неудобно, писать медиа выражения для каждого элемента. А что если делать динамическим только базовый размер? Тогда все остальные будут меняться автоматически.

Мы можем написать медиа выражение для базового размера, но я решил что не хочу описывать брейкпоинты и добавлять лишний код.
Может быть можно рассчитывать размер на ходу? Раз что-то нужно считать, очевидно там участвует css функция "calc". А раз нужно считать в зависимости от ширины окна, давайте ей передадим 100vw!

В моём случае калькуляция была очень простая:
если предположить, что на странице шириной 1000px мне нужен базовый шрифт 20px, то его размер мы можем посчитать как calc(100vw * 0.02)
Очевидно, что мы хотим ограничить максимальный и минимальный размер шрифта. Вот он выход моей любимой, с недавних пор, функции clamp!
В итоге получаем:

html {
  font-size: clamp(14px, calc(100vw * 0.02), 30px);
}

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

Спасибо, что прочитали! Я буду рад получить любую обратную связь по этому способу и вообще по способам дизайна адаптивных страниц.