Текучая типографика для отзывчивого дизайна

Старый подход: медиа-запросы

Старый способ сделать текст отзывчивым — использовать медиа-запросы. Это когда вы устанавливаете разные точки прерывания для разных размеров экрана. Для каждой точки прерывания назначается определённое значение размера шрифта.

В приведённом примере HTML кода есть один заголовок h1 и параграф текста.

<h1>Open Replay Blogger</h1>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend, purus
  non bibendum sollicitudin. Neque dolor accumsan ligula, at tristique elit
  turpis eget tortor. Quisque interdum sapien vel mi lacinia laoreet. Vestibulum
  aliquam fringilla urna, ac condimentum justo suscipit id. Praesent ac sem eu
  ipsum volutpat feugiat. Proin suscipit ex sit amet viverra. Fusce in justo
  vitae tortor placerat tincidunt.
</p>

В приведённом примере CSS кода показаны медиа-запросы для трёх точек прерывания.

/* Стили по умолчанию */
h1 {
  text-align: center;
  width: 500px;
  margin: 20px auto;
}

p {
  text-align: justify;
  width: 550px;
  margin: 20px auto;
}

/* Медиа-запросы для создания отзывчивого текста */
@media screen and (max-width: 600px) {
  h1 {
    font-size: 22px;
  }

  p {
    font-size: 14px;
  }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
  h1 {
    font-size: 36px;
  }

  p {
    font-size: 20px;
  }
}

@media screen and (min-width: 1025px) {
  h1 {
    font-size: 72px;
  }

  p {
    font-size: 36px;
  }
}

See the Pen

В примере выше вы видите разные размеры шрифта для разных размеров экрана. Увидеть которые можно изменяя размер Pen'а

• Экраны менее 600px: 22px для заголовка и 14px для параграфа.
• Экраны от 600px до 1024px: 36px для заголовка и 20px для параграфа.
• Экраны больше 1025px: 72px для заголовка и 36px для параграфа.

Ограничения использования медиа-запросов

Использование медиа-запросов в некоторой степени сделает ваш текст отзывчивым. Но у него всё ещё есть ряд ограничений.

• Трудно учесть все размеры экранов: В наши дни пользователи обращаются к приложениям с устройств разного размера — от самых маленьких смартфонов до сверхшироких экранов и всего, что находится между ними. Например, если вы хотите, чтобы на устройствах с размером экрана 400px или меньше размер шрифта для заголовка был меньше, скажем, 18px? А также другой размер, скажем, 28px для экрана размером 800px. Вам придётся добавить ещё два медиа-запроса.
• Сложно поддерживать код для множества запросов: Чем больше медиа-запросов вы пишете, тем сложнее поддерживать таблицы стилей. По мере увеличения количества точек прерывания ваш код становится всё более сложным. Это становится проблемой при обновлении или устранении неполадок.

Новый подход: текучая типографика

Сегодня у разработчиков фронтенда появились новые методы создания текучих текстов. Два метода — это использование единиц области просмотра (vw и vh) и CSS функции clamp().

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

Вот несколько причин, по которым использование текучей типографики выгодно не только конечным пользователям, но и разработчикам.

• Улучшенный пользовательский опыт: Текучая типографика делает тексты разборчивыми и визуально привлекательными на экранах разных размеров. Это означает, что пользователи будут получать больше удовольствия от работы с вашим приложением.
• Повышение доступности: Вы избежите ситуаций, когда текст оказывается слишком маленьким или слишком большим. При этом практически не придётся вручную корректировать текст. А это может способствовать повышению доступности вашего приложения, особенно для людей с проблемами зрения.
• Большая свобода и гибкость дизайна: Когда вы внедряете текучую типографику, вы освобождаетесь от ограничений, связанных с предопределёнными точками прерывания. У вас появляется творческая свобода изменять размер шрифта в зависимости от дизайнерского замысла, а не от жёстких точек прерывания.

Использование единиц области просмотра для придания тексту текучести

Единицы области просмотра (vw — ширина области просмотра и vh — высота области просмотра) — это простой способ реализовать текучую типографику. Используя единицы области просмотра, вы задаёте размер шрифта относительно области просмотра браузера. Область просмотра браузера — это область экрана, которую браузер занимает на устройстве пользователя.

Вот демонстрация использования ширины области просмотра. Используем тот же заголовок h1 и параграф из первого примера.

h1 {
  font-size: 10vw;
}

p {
  font-size: 3vw;
}

See the Pen

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

Кажется, что это идеальное решение, которое нужно использовать всегда, верно? Но это не совсем так. И вот почему.

Поскольку единица измерения vw основана на ширине области просмотра, это может привести к появлению очень мелких или крупных текстов. Текст может стать слишком мелким для комфортного чтения на очень маленьких или узких экранах. С другой стороны, текст может стать слишком большим для пользователей со сверхширокими экранами. Это также может вызвать проблемы с вёрсткой.

Существует лучший способ с решением этих потенциальных проблем. Это использование CSS функции clamp().

Как использовать CSS clamp()

CSS функция clamp() позволяет задать размер шрифта, адаптирующийся к различным размерам экрана. Она также позволяет задать минимальное и максимальное значение font-size.

Это означает, что при использовании CSS функции clamp() вы можете предотвратить слишком мелкий или слишком крупный текст. Это помогает найти баланс между отзывчивостью и читабельностью. И создаёт лучший пользовательский опыт.

Функция clamp() принимает три значения.

.text {
  font-size: clamp(min-value, pref-value, max-value);
}

• min-value — минимальное значение font-size.
• pref-value — предпочтительное значение font-size.
• max-value — максимальное значение font-size.

Рассмотрим пример использования функции clamp() для установки размера шрифта.

p {
  font-size: clamp(26px, 5vw, 52px);
}

Предпочитаемым значением здесь является 5vw (5% от ширины области просмотра).

Но рассмотрим сценарий, в котором область просмотра составляет 400px. Это означает, что 5vw (5% от 400px) составляет 20px. Предпочтительный размер шрифта 5vw в этом случае будет 20px. Но браузер вместо этого установит минимальное значение font-size, равное 26px.

Минимальное и максимальное значения, которые вы задаёте, служат границами. Убедитесь, что значения font-size не меньше указанного минимального значения. Или больше указанного максимального значения.

В примере выше минимальное и максимальное значения указаны в пикселях. Но считается, что лучше использовать относительные единицы, например rem.

Относительные единицы, такие как rem, реагируют на предпочтения пользователя. Если пользователь меняет размер шрифта по умолчанию в своём браузере, текст меняется в соответствии с этим значением.

Рассмотрим пример ниже.

h1 {
  font-size: clamp(3rem, 7vw + 1rem, 5rem);
}

p {
  font-size: clamp(0.5rem, 2vw + 1rem, 4rem);
}

See the Pen

Примечание: Добавление значения rem к предпочитаемому значению обеспечивает соответствие пользовательским предпочтениям.

Инструменты для реализации текучей типографики

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

• Utopia
• Fluid Type Scale Calculator
• Min-Max Calculator

Некоторые лучшие практики, которые следует учитывать

Ниже перечислены лучшие практики, которые следует учитывать при внедрении текучей типографики в ваше приложение.

• Тщательное тестирование для предотвращения неожиданного поведения: Прежде чем приступить к развёртыванию в продакшен, проведите тщательное тестирование. Протестируйте приложение на разных экранах и в разных браузерах. Это поможет вам выявить и устранить любые потенциальные проблемы. И убедитесь, что ваш текучий шрифт отображается так, как ожидалось.
• Добавление резервных значений для браузеров, не поддерживающих функцию: Большинство браузеров в наши дни поддерживают CSS функцию clamp(). На момент написания этой статьи поддержка clamp браузерами составляет 96%. Но вы всё равно можете добавить резервные значения для браузеров, которые могут не поддерживать clamp. Это поможет сделать приложение более доступным.

Заключение

В этой статье вы узнали о различных способах адаптации текста к различным размерам экрана. Внедрение текучей типографики в ваше приложение сделает его более доступным. CSS Функция clamp() даёт вам свободу от жёстких медиа-запросов. Это не только улучшает пользовательский опыт, но и облегчает вам, как разработчику, поддержку кода.

• Понимание CSS медиа запросов
• CSS: Отзывчивые макеты, меньше CSS медиа запросов
• Отзывчивые CSS макеты без медиа запросов
• Введение в CSS Viewport (Область просмотра)
• Отзывчивая типографика с CSS clamp