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

Хорошая идея - сделать шрифт, который сам меняет свой размер в зависимости от размера экрана.

Итак, основная идея заключается в использовании font-size: calc совместно с 100vw (шириной экрана)

Пример кода:

 
.text {
    color: red;
    font-size: calc(20px + 10 * (100vw / 1200));
}

@media (max-width: 767px) {
    .text {
        font-size: calc(20px + (10 + 10 * 0.7) * ((100vw - 320px) / 1200));
    }
}

Где:

• 20px - минимальный размер шрифта (например, для экранов с шириной 320px).

• 10 - это вычисляемое число. Получается вычитанием из максимального размера шрифта минимальный. Т.е. если на разрешении 1200px размер шрифта должен быть 30, то считаем так: 30 - 20 = 10

• 1200 - ширина области контента в макете.

• (10 + 10 * 0.7) - для экраном менее 767px, формула расчета усложняется.

• 320px - минимальный размер экрана под который верстаем.

Если интересно, то можно посмотреть Демо