Жидкая типографика: что это такое, зачем и как ее использовать
Опубликовано: 2022-10-26Отзывчивая типографика становится все более важной по мере увеличения вариативности размеров экрана. Но у традиционных методов адаптивного дизайна есть свои ограничения, что побуждает все больше людей внедрять гибкую типографику на своих веб-сайтах.
В этом посте мы рассмотрим гибкую типографику, как она работает и как она реализуется в WordPress.
Что такое гибкая типографика?
Жидкая типографика — это метод адаптивной типографики, при котором текст автоматически масштабируется в зависимости от размера экрана. По мере увеличения размера экрана увеличиваются типографские значения, такие как размер шрифта, высота строки и межбуквенный интервал. Точно так же значения уменьшаются, когда размер экрана становится меньше.
Жидкая типографика против традиционной адаптивной типографики
Традиционно дизайнеры используют контрольные точки для определения размера шрифта. Например, веб-сайт может использовать три точки останова: мобильный телефон, планшет и настольный компьютер. Точки останова определяются не типом устройства, а шириной браузера.
Проблема с этим подходом заключается в том, что размеры экрана сильно различаются на разных устройствах. Таким образом, размеры экрана, находящиеся между точками останова или близкие к ним, часто могут создавать проблемы при проектировании. Например, широкий экран планшета, который почти равен ширине рабочего стола, может привести к тому, что шрифт будет выглядеть слишком маленьким.
Чтобы решить эти проблемы, дизайнеры могли бы реализовать больше точек останова, но это просто приводит к более сложному коду, который трудно поддерживать.
Как работает гибкая типографика
Гибкая типографика начинается с минимального значения и увеличивает его по мере увеличения ширины экрана, пока не достигнет заданного максимального значения. Думайте о значениях как об ограничениях скорости на автостраде. Вы должны поддерживать минимальную скорость 45 миль в час. Верхний предел составляет 65 миль в час, и вы выбираете скорость в зависимости от потока трафика.
Функция зажима CSS
Гибкая типографика использует функцию фиксации CSS для автоматического масштабирования. Для функции фиксации требуется три значения: минимальное, предпочтительное и максимальное. Предпочтительным значением является расчетное число. Функция решает, какое предпочтительное значение должно быть относительно размера экрана, удерживая его между минимальным и максимальным значением.
Оператор clip выглядит следующим образом:
зажим ( минимум , предпочтительный , максимальный );
Давайте посмотрим, как это работает с размером шрифта:
хомут(1,5рем, 2фв + 1рем, 2,25рем);
Обратите внимание, что мы используем значения rem для минимального и максимального значений. Значения Rem более доступны. Если кто-то масштабирует свой браузер, чтобы увеличить размер текста, плавная типографика должна измениться соответствующим образом и лучше, чем если бы вы указали значения в пикселях.
Предпочтительное значение является расчетным. «vw» обозначает окно просмотра, поэтому 2vw — это 2% ширины окна просмотра.
При размере корневого шрифта 16 пикселей и ширине области просмотра 800 пикселей наш предпочтительный размер текста составляет 32 пикселя или 2 рем.
800 пикселей x 0,02 = 16 пикселей (или 1 бэр)
1 бэр + 1 бэр = 2 бэр (или 32 пикселя)
Не волнуйся. Вам не нужно заниматься математикой. Функция CSS позаботится об этом за вас.
Вам также не нужно ломать голову над своими навыками алгебры при написании таблиц стилей. Рассмотрите возможность использования такого инструмента, как редактор современной плавной типографики , для создания оператора зажима.
Диаграмма в инструменте — отличное наглядное пособие для наблюдения за изменением предпочтительного значения между минимальным и максимальным значениями.
Рекомендации по использованию гибкой типографики
Плавная типографика не лишена недостатков. Некоторые дизайнеры утверждают, что с настройкой проблем больше, чем пользы, поскольку подобных результатов можно добиться и более традиционными методами. Помните об этих соображениях, когда решаете, следует ли и как его использовать.
Когда использовать гибкую типографику
Плавная типографика отлично подходит для заголовков и отображаемого текста. Гигантские текстовые обработки, которые являются не только копией, но и элементом дизайна, являются идеальным вариантом использования плавной типографики. Вы хотите, чтобы размер и визуальное воздействие текста соответствовали размеру экрана.
Когда не следует использовать гибкую типографику
С другой стороны, плавная типографика не работает, если разница между минимальным и максимальным значениями не так велика. Текстовые элементы, такие как основной текст, теги, имена авторов и даты публикации, вероятно, довольно стандартны для разных размеров экрана. Вы можете обрабатывать их с помощью традиционного CSS вместо реализации функции зажима.
Всегда устанавливайте резервное значение
Помните, что всякий раз, когда вы используете гибкую типографику, всегда добавляйте резервное значение на случай, если браузер не поддерживает функцию зажима. Все современные браузеры поддерживают функцию привязки, но резервное значение обеспечивает дополнительную безопасность на случай, если Internet Explorer все еще будет упорно сопротивляться.
Плавная типографика в WordPress
Поддержка гибкой типографики была добавлена в Gutenberg 13.8 и будет включена в WordPress 6.1 . Функция гибкой типографики открывает для авторов тем возможность определять масштабируемые размеры шрифта в файле theme.json.
Поскольку эта функция все еще находится в разработке, вам необходимо загрузить плагин Gutenberg , чтобы получить доступ к бета-версии. Подробнее о том, как тестировать и внедрять новые варианты гибкой типографики, можно прочитать в этом посте от команды Make WordPress Themes .
Реализовать плавную типографику в WordPress проще всего на уровне темы. Если вы создаете свою собственную тему, загрузите плагин Gutenberg и начните тестирование. Если создание собственной темы или написание таблицы стилей с гибкой типографикой немного превышает ваши технические навыки, не волнуйтесь. Поскольку все больше тем включают в себя блоки и полное редактирование сайта, вы можете ожидать, что гибкая типографика станет частью новых выпусков тем.
Создавайте и тестируйте новые сайты и стили типографики в WordPress
Веб-дизайнерам и разработчикам нужно пространство для тестирования новых идей и дизайнов, таких как плавная типографика. Мы в Pressable понимаем. Вот почему мы предлагаем всем нашим клиентам неограниченное количество промежуточных сайтов . Создайте столько, сколько вам нужно, чтобы вы могли протестировать создание новой темы или попробовать последние бета-функции в WordPress. Начать работу очень просто. Просто выберите свой тарифный план , и вы получите сайт всего за пару кликов.
