Типографическая иерархия в UI-дизайне: заголовок, основной текст и подпись
Типографическая иерархия показывает пользователю, что на экране нужно прочитать в первую очередь. Познакомьтесь с простыми практическими правилами для заголовка, основного текста и подписи.
Человек, зашедший в приложение или на сайт, обычно не читает страницу, а пробегает по ней глазами. Ему нужно с первого взгляда объяснить, что важно. Именно для этого нужна типографическая иерархия: разные части текста отличаются друг от друга и задают порядок чтения. Ниже поговорим о трёх основных уровнях: заголовке, основном тексте и подписи.
Зачем нужна иерархия
Если весь текст одного размера и одного начертания, глазу не за что зацепиться. При хорошей иерархии пользователь понимает тему по заголовку, получает детали из основного текста, а дополнительную информацию узнаёт из подписи. Каждый уровень должен выполнять свою задачу, и они должны чётко отличаться друг от друга.
Заголовок: привлекает внимание
Заголовок должен быть самым ярким элементом на странице. Для этого используйте несколько приёмов:
- увеличенный размер;
- более плотное начертание (например, SemiBold или Bold);
- достаточное свободное пространство, то есть отступы сверху и снизу.
В заголовках хорошо работают геометричные и открытые формы. Например, такие шрифты без засечек, как [Montserrat](/fonts/montserrat) или [Poppins](/fonts/poppins), в крупном размере выглядят чётко и уверенно. Делайте строку заголовка короткой и не делайте межстрочный интервал слишком большим, иначе вместо одного блока заголовок распадётся на отдельные слова.
Основной текст: важно удобство чтения
Задача основного текста — не утомлять глаза. На мобильных экранах хорошей отправной точкой обычно считается размер около 16 px, но всегда проверяйте его на реальном устройстве. Попробуйте межстрочный интервал примерно в полтора раза больше размера шрифта и подстройте его по результату.
Для текста выбирайте шрифт начертания Regular с чётко различимыми буквами. Мягкие и открытые шрифты без засечек, такие как [Nunito Sans](/fonts/nunito-sans), могут быть удобны в длинном тексте. Обращайте внимание и на длину строки: слишком длинную строку трудно читать, поэтому ограничивайте ширину текстового блока.
Подпись: второстепенная, но читаемая
Подпись, текст под изображением, дата и вспомогательные надписи делаются меньше и светлее основного текста. Но не уменьшайте их до нечитаемости. Следуйте таким правилам:
- делайте размер чуть меньше основного текста, а не резко меньше;
- даже если приближаете цвет к серому, сохраняйте достаточный контраст с фоном;
- не прячьте важную информацию (сообщение об ошибке, цену) в подпись.
Практические советы
1. Сначала составьте шкалу из трёх-четырёх уровней: главный заголовок, подзаголовок, основной текст, подпись. Затем повторяйте её во всём проекте.
2. Разница между уровнями должна быть заметной. Если она составляет 1–2 px, пользователь её не почувствует.
3. Создавайте иерархию не только размером, но и начертанием, цветом и отступами.
4. Используйте не более двух семейств шрифтов. Во многих случаях хватает и одного.
5. Проверяйте дизайн, прищурившись: если даже в размытом виде самый важный элемент выделяется, иерархия работает.
Вывод
Типографическая иерархия — не украшение, а система, которая направляет пользователя. Пусть заголовок привлекает внимание, основной текст удобно читается, а подпись помогает, не мешая. Если чётко определить эти три уровня, интерфейс станет понятнее и аккуратнее.