Типографика и хороший UI: 7 вещей, которые нужно учитывать
Рассказываем, что нужно держать в голове каждый раз, когда вы садитесь работать с текстами в своём интерфейсе.
Язык типографики характеризуется тем, что передаёт информацию более конкретно и более точно, чем любые другие визуальные языки. Безусловно, цвета, иконки или изображения — также отличный способ, чтобы сформировать иерархию и расставить акценты. Однако посмотрите на любой современный интерфейс. Примерно 60–80% любого продукта — это текст. И от того, насколько грамотно построена текстовая система, и насколько чётко она будет передавать нужные смыслы, зависит успех любого бизнеса. Побуждение к действию — вот что самое главное в нашем суровом, но таком интересном капиталистическом мире.
Кроме того, типографика сама по себе может быть декоративным элементом, и дополнять продукт не хуже, чем любой другой визуальный образ. В этом материале мы собрали 7 пунктов, которые нужно знать, прежде чем настраивать типографику в своём проекте. А если вам уже не терпиться её настроить, то на помощь придут наши 8 советов по улучшению типографики.
Гарнитура и шрифты
Все мы привыкли, что шрифт — это группа символов, которые построены по единым правилам, но могут иметь разные начертание (жирность). На самом деле иерархия сложнее. То, что мы назвали выше — это гарнитура. К пример, Inter — это гарнитура, которая включает в себя более 10 шрифтов.
Окей, а что такое шрифт? Шрифты — это составляющая гарнитуры. Группа символов, которые построены по единым правилам и имеют одинаковое начертание. Например, Inter Bold — это шрифт. Впрочем, это только отсылка к терминологии. Не так важно, как мы назовём кошку, главное — как она ловит мышей. И именно про это ниже.
Читаемость текста, или readability — это ключевой показатель того, что ваш текст вообще захотят читать. Readability напрямую зависит от типа шрифта и его свойств. Именно поэтому мы советуем выбирать те шрифты, которые легко воспринимаются и быстро сканируются. В первую очередь, без засечек, а также с небольшими засечками, которые не мешают разобрать, что за буква за ними прячется. А чтобы избежать чрезмерного усложнения дизайна, используйте одну гарнитуру в своём проекте, а для построения иерархии акцентируйте внимание на разных начертаниях.
Использование шрифтов
Начертания (Weight)
Начертания — лучший способ отобразить иерархию ваших текстов. Существует огромное количество начертаний — Black, Bold, Semibold, Medium, Regular, Light и т.д. Например, всеми этими начертаниями обладает знаменитая Helvetica. Кроме того, некоторые шрифты могут иметь вариативные свойства. То есть, различные показатели (толщину линий, размер засечек и т.д.) можно настраивать точечно.
Правило работы с начертаниями очень простое — чем более важная информация, тем жирнее начертание она должна иметь. Однако стоит обращать внимание на визуал. К примеру, многие гарнитуры имеют начертание Light, но оно настолько тонкое, что воспринимать текст с помощью него практически невозможно. Чтобы не прогадать, мы советуем не использовать начертание, тоньше, чем Regular. Об этом мы говорим в нашем видео про то, как сделать интерфейс лучше. Казалось, бы — мелочь. Но такие мелочи оказывают колоссальное значение по итогу.
Работа с начертаниями
Цвет текста
Всегда обеспечивайте достаточный контраст, чтобы пользователи могли быстро и безошибочно понять текст. Согласно гайдлайнам WCAG, минимальная контрастность текста относительно фона должна составлять 4,5:1. Проверить это легко, достаточно забить в Google «color contrast checker», перейти по первой ссылке и ввести код цвета ваших текста и фона. Если говорить глобально, то правило простое — чем выше уровень контрастности, тем лучше! Кстати, максимальный контраст имеют чёрный текст (#000000) и белый фон (#FFFFFF) — он равняется 21:0.
Так, стоп, вы что, не знаете, где это проверить? А как же наш сервис по проверке контрастности цвета? Он поможет за секунду определить точный уровень контрастности, да ещё и растолкует, для каких текстов его лучше использовать или не использовать.
Работа с цветом текста
Высота строки (Line Height)
Высота строки — это пространство между строками текста. Во время настройки этого параметра нужно держать баланс. С одной стороны, отступы должны быть как можно больше, поскольку несколько строк информации, сжаты в небольшом пространстве, сложны для сканирования человеческим глазом. С другой стороны, расстояние не должно быть очень большим, так как тогда информация на разных строчках будет восприниматься как отдельный блок. Мы рекомендуем высоту строки от 120% до 160%, в зависимости шрифта, его особенностей и размера (как правило, чем больше размер, тем меньшую высоту строки он требует).
Оптимальная высота строки
Расстояние между буквами
Расстояние между буквами называют «трекингом». Здесь работают все те же правила, что и с высотой строки. Если расстояние между буквами будет очень большое, то определённый набор знаков не будет восприниматься глазом, как единое слово. А если очень маленькое, то символы попросту собьются в одну «кучу», которую сложно прочесть.
Трекинг очень зависит от свойств самого шрифта. Однако универсальное правило все же есть. Чаще всего, чем больше размер шрифта, тем меньшее расстояние между буквами ему необходимо задавать (большие размеры делают расстояние между буквами больше, даже при показателе кернинга «0»). Наша рекомендация — для обычных шрифтов с размером от 16 до 18 px устанавливайте показатель кернинга от 0% до 2%. Не забывайте, что все это проверять на реальном тексте, так как Lorem Ipsum, который мы детально разбирали, не покажет вам всю картину «игры с типографикой».
Оптимальный трекинг
Выравнивание
Существует 4 типа выравнивания строк: по левому краю, по правому краю, по центру и по всей ширине. В дизайне интерфейсов лучше всего использовать только 2 типа выравнивания — по правому краю и по центру. Однако выравнивание по центру лучше применять только для текстов с небольшой шириной строчки. Самих же строчек должно быть не более 3–4. В остальных случаях выравнивание по левому краю будет лучшим решением.
Обратите внимание, что выравнивание по левому краю актуально в случае с языками, которые читаются слева направо. Если вы работаете с языком, который читается справа налево (например, иврит), то оптимальное выравнивание — по правому краю.
Правильное выравнивание
Создание библиотеки стилей
Вы можете использовать множество визуальных приёмов, применяя все новые и новые свойства, Но каждый раз, когда вы это делаете, макет превращается в хаотичный и перегруженный. Система текстовых стилей — это must have для любого проекта. Она поможет сделать типографику последовательной за счёт переиспользования ранее заготовленных решений. Пользователи тоже это оценят, так как проект, который построен по чётким «типографическим правилам» легче воспринимается и проще сканируется.
Чтобы упростить себе жизнь максимально, лучше делить все стили на группы. Например, в группе Headlines будут храниться все стили для заголовков (H1, H2 и т.д.), а в группе Body — все стили, которые предназначены для основного текста.
Вариант оформления гайда
Оглянемся назад и подведём итоги
Чтобы типографика ваших проектов всегда была на высоте, необходимо обращать внимание на такие свойства, как размер шрифта, его начертание, высота строки, расстояние между буквами и контраст текста относительно фона. А после все должно быть упаковано в простую, понятную и последовательную систему стилей. Попробуйте применить эти советы на практике уже сегодня, и вы увидите, как ваши проекты начнут преображаться.
Источник: Jake Park (Medium)
