Опубликовано:

Отзывчивая типографика с CSS clamp

Источник: «Responsive Typography With Clamp»
Для frontend-разработчика одним из самых утомительных занятий является определение свойств текстовых элементов для различных размеров экрана с помощью медиа-запроса, что приводит к созданию большого файла css. В этой статье мы расскажем как сделать тексты на сайте отзывчивыми без использования медиа-запроса, тем самым сэкономив время и место.

Прежде чем перейти к рассмотрению clamp(), инструмента, который мы будем использовать, давайте рассмотрим значение слова clamp для более чёткого понимания. Clamp согласно словарю Merriam-Webster:

Clamp (зажим, хомут, струбцина) — предназначен для связывания, сжимания или прижимания двух, или более частей друг к другу для их прочной фиксации.

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

Как CSS clamp() работает с отзывчивой типографикой

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

font-size: clamp(minimum, preferred, maximum);

Из приведённого выше синтаксиса:

Давайте теперь присвоим значения нашей функции clamp(), приведённой выше, и посмотрим на результат. Вот HTML

<body>
 <h1>This font is scalable</h1> <!-- Large font size -->
 <h2>This font is scalable</h2> <!-- Medium font size -->
 <h3>This font is scalable</h3> <!-- Small font size -->
 <h6>This font is scalable</h6> <!-- Smallest font size -->
 <p>This font is scalable</p> <!-- Default font size -->
</body>

А вот CSS

/* Стилизация для различных уровней заголовков */
h1{
  font-size: clamp(25px,8vw,100px);
}
h2{
  font-size: clamp(18px,7vw,85px);
}
h3{
  font-size: clamp(14px,6vw,70px);
}
h6,p{
  font-size: clamp(10px,5vw,20px);
}

Ниже приведён результат:

See the Pen

Как CSS clamp() работает с относительными единицами измерения

В приведённом выше примере font-size является отзывчивым; он масштабируется в зависимости от vw, что нам и нужно, но есть проблема: при увеличении или уменьшении масштаба веб-страницы font-size перестаёт быть отзывчивым. Чтобы решить эту проблему, необходимо добавить к vw единицу измерения rem, которая обеспечит читаемость font-size и его масштабирование в соответствии с vw. Давайте добавим 1rem к каждому из наших font-size, чтобы лучше понять эту проблему.

h1{
  font-size: clamp(25px,8vw + 1rem,100px);
}
h2{
  font-size: clamp(18px,7vw + 1rem,85px);
}
h3{
  font-size: clamp(14px,6vw + 1rem,70px);
}
h6,p{
  font-size: clamp(10px,4vw + 1rem,20px);
}

Теперь font-size увеличивается и уменьшается соответственно, при увеличении или уменьшении масштаба.

See the Pen

Работа clamp() с относительными единицами отличается, особенно в зависимости от предпочтительного (preferred) значения vw, указанного в функции clamp(). Комбинация rem и vw позволяет получить размеры шрифта, удобные для чтения на различных устройствах, при разных размерах экрана и ориентации.

Как использовать clamp() для изменения высоты строки и межбуквенного интервала

Используя функцию clamp(), мы также можем сделать line-height и letter-spacing нашего шрифта отзывчивыми для различных размеров экрана и браузеров, сохранив при этом его читабельность. Вот как использовать функцию clamp() для line-height и letter-spacing:

Высота строки с использованием clamp()

Свойство line-height обычно используется для задания расстояния между двумя параллельными строками текста, определяя высоту каждой строки. Свойство line-height важно для поддержания удобочитаемости и эстетики в типографике. Ниже приведён пример использования свойства line-height в функции clamp():

.top_section h1 {
 font-size: clamp(40px, 8vw + 1rem, 100px);
 line-height: clamp(0, 10vw + 1rem, 60px);
}

В приведённом примере высота строки элемента h1 начинается с минимального значения 0 и масштабируется до максимального значения 60px, обеспечивая читаемость текста при его адаптации к различным размерам экрана.

Межбуквенный интервал с использованием clamp()

Свойство letter-spacing управляет размером свободного пространства между символами слова. Оно используется для увеличения или уменьшения пространства между символами в текстовом элементе, что помогает улучшить внешний вид текста. Ниже приведён пример использования свойства letter-spacing в функции clamp():

.top_section h1 {
 font-size: clamp(40px, 8vw + 1rem, 100px);
 letter-spacing: clamp(2px, 10vw + 1rem, 10px);
}

В приведённом примере letter-spacing в элементе h1 начинается с минимального значения 2px и масштабируется до максимального значения 10px, что обеспечивает сохранение нужного интервала при различных размерах экрана. Теперь мы знаем, как использовать clamp() для свойств line-height и letter-spacing, давайте объединим их в приведённом ниже примере. Это HTML:

<body>
 <div class="top_section">
  <h1>START PAGE</h1>
  <h6>Welcome To Start Page</h6>
  <button>Get Started</button>
 </div>
</body>

А это CSS:

body {
 margin: 0 auto;
 width: 85%;
 padding: 0;
 font-family: "Inter", sans-serif;
}
.top_section {
 display: flex;
 flex-direction: column;
 text-align: center;
 align-items: center;
 justify-content: center;
 height: 100vh;
}
.top_section h1 {
 font-size: clamp(40px, 8vw + 1rem, 100px);
 letter-spacing: clamp(2px, 10vw + 1rem, 10px);
 line-height: clamp(0, 10vw + 1rem, 60px);
 margin: -10px 0;
}
.top_section h6 {
 font-size: clamp(14px, 8vw + 1rem, 20px);
 letter-spacing: clamp(2px, 10vw + 1rem,5px);
 line-height: clamp(0px, 10vw + 1rem, 60px);
}
.top_section button {
 background-color: #000;
 color: #fff;
 padding: 10px 30px;
 cursor: pointer;
 font-size: clamp(10px, 8vw + 1rem, 20px);
}

See the Pen

Можно заметить, как адекватно масштабируется line-height и letter-spacing.

Резервные значения для старых браузеров

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

/* Резервные значение для браузеров, не поддерживающих clamp()*/
h1 {
 font-size: 70px;
 color: red;
 letter-spacing: 10px; /* Резервное значение межбуквенного интервала */
 font-family: "Raleway", sans-serif;
 /* Современные браузеры, поддерживающие функцию clamp() */
 font-size: clamp(20px, 8vw + 1rem, 70px);
 letter-spacing: clamp(1px, 0.3vw, 10px);
}

Вы можете заметить, что когда отключаем font-size с clamp() в инструментах разработчика, браузер сразу же возвращается к другому font-size.

Заключение

В этой статье мы рассмотрели отзывчивую типографику функции CSS clamp() и то, как с помощью clamp() сделать отзывчивыми font-size, line-height и letter-spacing. На этом пока остановимся, и я призываю вас провести дополнительные исследования и узнать больше о функции clamp(), используя ту основу, которую я вам дал.

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

Восемь способов писать чистый и лаконичный код в Laravel

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

Новые возможности CSS облегчающие вашу жизнь