Ничто не может так сильно навредить дизайну, как неверно подобранный шрифт. Самой большой трудностью при этом становится даже не столько выбор самого шрифта, сколько определение его верного размера.
Очевидно, что далеко не все дизайнеры успешно справляются с данной задачей: эта проблема характерна куда большему числу проектов, чем вы могли бы себе представить. Часто бывает, что на десктопной версии сайта шрифт кажется красивым и стильным, но, открыв его мобильную версию на своем смартфоне, вы с трудом можете разобрать, что же там написано. Такое происходит постоянно.
Основная причина подобного упущения заключается в том, что размер шрифта не был оптимизирован под разные типы устройств. Но эту проблему довольно легко решить, если вы как следует поработаете над шкалой размеров текста — типографическим масштабом.
Что такое масштаб типографики?
По сути речь идет о создании так называемой типографической иерархии, в которой размеры и пропорции одних элементов, а также пространства между ними, находятся в тесной зависимости от параметров других элементов. Шкала включает в себя все: от стиля основного текста до заголовков, подзаголовков и других элементов текста.
Эта шкала поможет вам визуально оценить разработанную вами иерархию, размеры основного текста, заголовков, подзаголовков и других элементов по отношению друг к другу. К слову, в веб-дизайне визуальное масштабирование шрифтов соответствует тегам в CSS (h1, h2, h3, p и т.д.).
Масштабирование шрифтов поможет вам достичь гармонии и задать ритм дизайну. Это также убережет вас от разного рода стилистических проблем, потому что текстовые элементы соответствуют элементам CSS и в каждой области дизайна будут использованы такие же элементы и последовательность.
При определении масштаба следует отталкиваться от размера основного текста (сначала всегда устанавливайте базовый шрифт и размер). Уже затем вы будете определять размеры других элементов. Не знаете с чего начать? Обратите внимание на ряд рекомендаций, которые дает Google:
1. Задайте базовый размер шрифта, равный 16 CSS-пикселям.
2. Используйте параметры базового размера, чтобы установить показатели других элементов.
3. Помните, что текст нуждается и в достаточном междустрочном интервале; общая рекомендация заключается в использовании высоты строки в 1,2 em.
4. Ограничьте количество используемых шрифтов и типографических масштабов.
Создайте гармонию и ритм
Иерархия шрифтов не только помогает пользователям продвигаться вниз по странице, но и привносит в поток текста гармонию и ритм. Это важно на любом устройстве.
Так с чего же начать?
Ресурсу UX Matters принадлежат одни из лучших исследований минимальных размеров текста на устройствах. Ниже — таблица с рекомендуемыми для разных устройств размерами текста. Стивен Хубер рекомендует начать с размера, который на 40% превышает рекомендуемый минимум.
После установки размера основного текста можно определить размер других, вспомогательных элементов. Окиньте взглядом всю страницу, и вы сможете приблизительно определить размеры того или иного элемента.
Такого же большого элемента, как заголовок, на странице обычно не бывает. Следует помнить, что двухстрочный заголовок будет восприниматься чуть большим, чем однострочный, даже если в обоих вариантах размер текста будет одинаковым.
Проще всего определить верный масштаб заголовков и других крупных текстовых элементов — опереться на размер основного текста. Разумеется, каждый дизайнер будет подходить к этому вопросу по-своему, но если вы не знаете, с чего начать, можете последовать следующим рекомендациям: для заголовка подходит размер, на 250% превышающий размер основного текста; для заголовка второго уровня (h2) — на 150%, для h3 — 75%, а для цитат — 50% (это не правило, а лишь рекомендация).
Обращаем ваше внимание, что при определении размеров важно использовать именно проценты, ведь размер шрифта других элементов вы будете определять, опираясь на размер основного текста. При этом размер экрана уже не имеет никакого значения. Размер каждого элемента находится в зависимости от размера шрифта основного текста.
Рекомендации по символам и интервалам
Что касается интервалов, то главным критерием здесь является читаемость текста:
- настольные и большие устройства: от 60 до 75 символов в строке;
- телефоны и небольшие устройства: от 35 до 40 символов в строке.
Обратите внимание, что на маленьких экранах читаемость текста обеспечивается размещением на строке меньшего количества символов чуть большего размера.
То же относится и к межстрочным интервалам. Если размер экрана небольшой, необходимо больше пространства между строками текста, чтобы пользователям было легче читать и просматривать контент. Как правило, на небольших экранах межстрочный интервал должен быть на 25% больше, чем на десктопных.
Из-за небольших размеров экрана очень важно обеспечить удобочитаемость текста, его ритм — все это и будет гарантией того, что люди продолжат изучение материала.
Советы для быстрого старта
Существует множество способов, как определить правильный типографический масштаб и быть уверенным, что текст не сделает ваш дизайн уродливым. Какой именно путь вы предпочтете, во многом зависит (в дополнение к вашим талантам дизайнера) и от уровня навыков программирования.
Лучший вариант — использовать адаптивный дизайн с медиа-запросами. Этот подход обеспечит наибольший уровень контроля над спецификациями текста.
Другой способ заключается в разработке различных версий. Хотя это довольно устаревшая концепция, еще существуют компании, использующие мобильные URL-адреса и десктопные URL для своих веб-сайтов. В большинстве случаев так делать не рекомендуется, но для некоторых сайтов, где есть большие отличия в дизайне или пользовательском опыте, это допускается.
Самый простой вариант — начать с темы вашего сайта. Просто убедитесь, что вы выбрали полностью адаптивный вариант. Когда вы используете высококачественную тему, большая часть работы оказывается сделанной вместо вас. Все, о чем вам придется подумать, это размер основного текста. Просто убедитесь в том, что размеры мобильного шрифта соответствуют вашим стандартам.
3 инструмента для создания типографической иерархии
Существует ряд инструментов, которые способны помочь вам увидеть всю иерархию текста сразу. Вот некоторые из лучших и наиболее удобных вариантов:
- Type Scale: введите текст и поэкспериментируйте с такими его свойствами, как размер, масштаб и шрифт через панель, расположенной в левой части экрана; код текста можно получить прямо из сервиса.
- Modular Scale: этот сервис способен помочь верно определить размер шрифта; затем вы сможете скачать результаты в виде плагина Sass или JS или посмотреть их на экране.
- Golden Ratio Typography Calculator: инструмент оптимизирует размер символов, высоту строки, межсимвольный интервал, исходя из значений золотого сечения.
Заключение
Правильно подобранный масштаб текста обязательно внесет свою лепту в стройность и нарядность дизайна вашего сайта. Он добавляет гармонии, которую не все пользователи могут осознать, но которая оказывает значимое влияние на читаемость текста и юзабилити ресурса.
Если страница выглядит как-то не так, то, скорее всего, размер текста на ней не оптимизирован. Неправильный выбор размера шрифта может быть трудно определить, но если дизайн кажется несбалансированным, то вам нужно немедленно начинать поиски. Прежде чем остановиться на чем-то, поэкспериментируйте с несколькими различными вариантами масштаба.
Высоких вам конверсий!
По материалам: webdesignerdepot.com
