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

Источник: «Doing Fluid Typography For Responsive Designs»
Внедрение текучей типографики означает создание текста, адаптирующегося к различным размерам экрана. По мере совершенствования технологий продолжают появляться устройства различных форм и размеров. Как фронтенд-разработчик, вы должны создавать приложения, которые хорошо адаптируются к различным размерам экрана. Дизайн с использованием текучей типографики улучшает пользовательский опыт и доступность; в этой статье мы расскажем как это сделать.

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

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

В приведённом примере 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'а

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

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

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

Сегодня у разработчиков фронтенда появились новые методы создания текучих текстов. Два метода — это использование единиц области просмотра (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);
}

Рассмотрим пример использования функции 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 к предпочитаемому значению обеспечивает соответствие пользовательским предпочтениям.

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

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

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

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

Заключение

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

Дополнительные материалы

Предыдущая Статья

Понимание среды выполнения JavaScript

Следующая Статья

Как использовать Fetch API в Node.js, Deno и Bun