Типографика, основанная на единицах вьюпорта

Ранее я писал об использовании rem и em для отзывчивой типографики и для создания модульных компонентов. В комментариях к обоим постам неизбежно появляются единицы вьюпорта.

Я некоторое время упорно сопротивлялся работе с ними, полагая, что их использование будет занозой в заднице из-за вычислений. Но потом, наконец, преодолел себя и разобрался, как использовать единицы вьюпорта в отзывчивой типографике.

Что такое единицы вьюпорта?

На сегодняшний день в CSS доступно 4 различных типа этих единиц:

• vw – процент от ширины окна просмотра;
• vh – процент от высоты окна просмотра;
• vmin – минимальное из vw или vh;
• vmax – максимальное из vw или vh.

Вьюпорт – это экран браузера. 1vw – один процент от ширины браузера. 100vw – полная ширина браузера.

Единицы окна просмотра автоматически пересчитываются при изменении его размеров (загрузке, ресайзе, повороте). Благодаря этому очень легко создать компонент, который всегда будет занимать четверть вьюпорта:

.component {
  width: 50vw;
  height: 50vh;
  background: rgba(255, 0, 0, 0.25)
}

Использование единиц вьюпорта для типографики

Неоспоримое достоинство единиц вьюпорта – автоматический перерасчет при изменении размеров браузера. Значит, нам не нужны медиа-запросы.

В этом примере размер шрифта изменяется с 16px на 20px в точке 800px:

// используется SCSS

html {
  font-size: 16px;

  @media (min-width: 800px) {
    font-size: 20px;
  }
}

Именно так мы всегда и делаем.

Иногда нужно добавить дополнительный медиа-запрос, чтобы типографика хорошо выглядела на всех устройствах:

html {
  font-size: 16px;

  @media (min-width: 600px) {
    font-size: 18px;
  }

  @media (min-width: 800px) {
    font-size: 20px;
  }
}

Мы можем пойти дальше и указать несколько медиа-запросов и несколько размеров шрифта, но чаще всего это излишне, поэтому мы придерживаемся 3-4 размеров.

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

Вот где вступают в игру единицы вьюпорта. Можно легко получить тот же эффект, установив свойство font-size в единицах vw.

html { font-size: 3vw; }

Однако есть и недостаток: шрифт слишком сильно реагирует на изменение ширины экрана.

На устройстве с шириной экрана 320px (мобильный) мы получаем размер текста 10px. Это слишком мало. С другой стороны, на устройствах с шириной экрана 1440px (ноутбук) размер уже 43px. Это слишком много.

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

html { font-size: calc(18px + 0.25vw) }

Я впервые узнал об этой технике в этой статье.

К сожалению, этот код не работает в Safari для Mac. Чтобы исправить это, нужно использовать проценты, и тогда Safari снова сможет масштабировать шрифты:

html { font-size: calc(112.5% + 0.5vw) }

Тада!

Неужели мы уже можем избавиться от em, rem и медиа-запросов в нашем коде?