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

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

Перевод статьи: Viewport Unit Based Typography

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

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

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

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

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

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

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

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

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

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

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

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

 

 

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

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

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

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

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

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

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

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

 

Тада!

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

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *