Качественное оформление текста не всегда заметно читателю, но именно оно позволяет прочитать материал без лишних усилий. Недочеты в типографике всегда бросаются в глаза, нарушая корректное восприятие информации.
Типографика в широком смысле — это не только работа с буквами и символами, но и взаимодействие с пространством. Поэтому мы подробно разберем как работать с текстом и пространством, чтобы сделать путь читателя максимально комфортным.
Цветовой контраст
Ошибка начинающих дизайнеров — сделать визуально красиво, эстетично, но не подумать об удобстве читателя. Главное и первостепенное в дизайне — удобство для пользователей. Мы делаем дизайн для людей и должны думать о том, как читатель будет пользоваться текстом и не пострадает ли его зрение.
Возьмем два сочетающихся цвета. Бежевый и серый выглядят очень эстетично, но функционально бежевый текст на сером фоне сложен для восприятия. Конечно, все зависит от конкретной задачи и чем больше размер текста, тем больше свободы творчества у дизайнера и даже можно пренебречь контрастностью. Но все таки есть ряд правил для текста и фона.
Контрастность текста должна соответствовать стандартам WCAG AA для компьютера и WCAG AAA для мобильной версии (это стандарты, которые определяют насколько ваш дизайн может восприниматься людьми с ограниченными способностями и визуальными отклонениями).
Где проверить контрастность?
Плагин в Figma Color Contrast Checker — сначала создаешь фрейм (без него плагин работать не будет), ну а дальше делаешь фон, пишешь текст и запускаешь плагин. Важно — плагин умеет работать только с чистыми цветами, с градиентами и полупрозрачными заливками он не поможет.
Сторонний сервис WebAIM — вводишь цвет фона и цвет текста, сайт посчитает насколько цвета контрастируют.
Длина строки
Почему текст сложно читать? Обрати внимание на длину строки и ответь себе на два вопроса — она не слишком длинная и не слишком короткая? Слишком короткие строки делают текст рваным, особенно если мы не уместили в них никакой мысли. А слишком длинные, с двумя и больше ключевыми сообщениями сложно воспринимаются мозгом.
Легче всего определить оптимальную длину строки по смыслу. Донес мысль? Можно заканчивать. Но есть средняя длина строки для текста на русском языке: в десктопной версии — около 60 знаков, а в мобильной — 30-40 знаков.
Количество шрифтов
Запомни четыре слова. Не надо играться шрифтами. Главная цель сайта — не впечатлить пользователя подборкой шрифтов, а донести ключевые сообщения и информацию. Чем меньше информационного шума, тем выше шанс, что пользователь перейдет к тем действиям, которые ты от него ожидаешь.
Выбери гарнитуру (семейство шрифтов) с разными начертаниями (минимум 3) и хорошей читаемостью. Чем меньше разных шрифтов на сайте, тем лучше консистентность (согласованность и единообразие элементов) в дизайне.
Трекинг в заголовках
Обычно шрифты разрабатываются для использования в основном тексте. И тут мы сталкиваемся с тем, что кернинг настроен для удобства чтения в длинных строках и больших абзацах, но никак не для заголовков.
Заголовки обычно короткие с большим пространством вовне. Большое расстояние между символами в заголовке размывает эффект негативного пространства (о нем поговорим в следующих постах) и может ослабить визуальный эффект и уменьшить его эффективность.
Для привлечения внимания пользователя к заголовку, можно подкорректировать трекинг, немного уменьшив расстояние между символами в пределах 1-5%.